preface
Hello, I'm Lin Sanxin. In the most easy to understand words, the most difficult knowledge point is my motto. The foundation is advanced, and the premise is my original heart. Today I'll tell you a question. It's a Netease interview question
- A classmate: "how to implement JS overload?"
- Me: "is JS overloaded? Isn't it TS?"
- A classmate: "yes, this is a Netease interview question"
- Me: "well, let me think!"
What is overloading
The first time I saw the word overload was when I learned Java before. I always felt that JavaScript was not overloaded until TypeScript appeared, so I always felt that JavaScript was not overloaded and TypeScript was not overloaded, but now it seems that I am wrong.
The overload I understand is: the same function, different number of parameters, execute different codes, such as:
/* * heavy load */ function fn(name) { console.log(`I am $`) } function fn(name, age) { console.log(`I am $,this year $year`) } function fn(name, age, sport) { console.log(`I am $,this year $year,Like sports is $`) } /* * Ideal result */ fn('Lin Sanxin') // I'm Lin Sanxin fn('Lin Sanxin', 18) // I'm Lin Sanxin. I'm 18 years old fn('Lin Sanxin', 18, 'Play basketball') // I'm Lin Sanxin. I'm 18 years old. My favorite sport is playing basketball
However, it is definitely not possible to write this directly in JavaScript. Let's take a look at the actual execution results of the above code. We can see that the definition of the last fn overrides the first two, so it does not achieve the effect of overloading
I'm Lin Sanxin,this year undefined year,Like sports is undefined I'm Lin Sanxin,He is 18 years old,Like sports is undefined I'm Lin Sanxin,He is 18 years old,My favorite sport is playing basketball
My approach
In fact, I still have a way to achieve the ideal overload effect. I can only write a fn function, judge the length of the arguments class array in this function, and execute different codes to complete the overload effect
function fn() { switch (arguments.length) { case 1: var [name] = arguments console.log(`I am $`) break; case 2: var [name, age] = arguments console.log(`I am $,this year $year`) break; case 3: var [name, age, sport] = arguments console.log(`I am $,this year $year,Like sports is $`) break; } } /* * Realization effect */ fn('Lin Sanxin') // I'm Lin Sanxin fn('Lin Sanxin', 18) // I'm Lin Sanxin. I'm 18 years old fn('Lin Sanxin', 18, 'Play basketball') // I'm Lin Sanxin. I'm 18 years old. My favorite sport is playing basketball
But the classmate said that the interviewer of Netease seemed to think it could be realized, but I was confused whether there was a better implementation method.
High end approach
After my online search, I found a relatively high-end method, which can use closures to achieve the effect of overloading. This method is in the secrets of the JavaScript ninja written by John Resig, the father of JQuery. This method makes full use of the characteristics of closures!
function addMethod(object, name, fn) { var old = object[name]; //Store the previously added method in a temporary variable old object[name] = function () { // Overriding the method of object[name] // If the number of parameters passed in is the same as expected when calling the object[name] method, you can call it directly if (fn.length === arguments.length) { return fn.apply(this, arguments); // Otherwise, judge whether old is a function. If so, call old } else if (typeof old === "function") { return old.apply(this, arguments); } } } addMethod(window, 'fn', (name) => console.log(`I am $`)) addMethod(window, 'fn', (name, age) => console.log(`I am $,this year $year`)) addMethod(window, 'fn', (name, age, sport) => console.log(`I am $,this year $year,Like sports is $`)) /* * Realization effect */ window.fn('Lin Sanxin') // I'm Lin Sanxin window.fn('Lin Sanxin', 18) // I'm Lin Sanxin. I'm 18 years old window.fn('Lin Sanxin', 18, 'Play basketball') // I'm Lin Sanxin. I'm 18 years old. My favorite sport is playing basketball
epilogue
If you think this article is of little help to you, give a praise and encourage Lin Sanxin, ha ha. Or you can join my fishing group. If you want to join the learning group, please click here loaf on a job , I will regularly broadcast simulated interviews, resume guidance, and answer questions
