Netease Interviewer: would you please implement JS overload? It's not a TS overload!

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 ${name}`)
}

function fn(name, age) {
  console.log(`I am ${name},this year ${age}year`)
}

function fn(name, age, sport) {
  console.log(`I am ${name},this year ${age}year,Like sports is ${sport}`)
}

/*
* 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 ${name}`)
      break;
    case 2:
      var [name, age] = arguments
      console.log(`I am ${name},this year ${age}year`)
      break;
    case 3:
      var [name, age, sport] = arguments
      console.log(`I am ${name},this year ${age}year,Like sports is ${sport}`)
      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 ${name}`))
addMethod(window, 'fn', (name, age) => console.log(`I am ${name},this year ${age}year`))
addMethod(window, 'fn', (name, age, sport) => console.log(`I am ${name},this year ${age}year,Like sports is ${sport}`))

/*
* 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

reference material

Tags: Javascript Front-end ECMAScript Interview

Posted on Wed, 24 Nov 2021 21:32:06 -0500 by michaelowen