Last Thursday afternoon, received a video interview with NetEase (front-end intern second round of technical interview). Face for one hours, self-feeling interview is very bad, because many of the questions are difficult, can not answer at all. But that night, still very pleasantly surprised to receive the HR face phone. Now HR interview results have not come out, heard to wait until next Tuesday only, so good wait a few days ha.
before saying this much nonsense, now is the time to share the interview with the Friends of the dry ah. Because there are a lot of things to ask on the two side, it's not all listed here. This is just about overloading the function. Here is the interview dialogue, "face" refers to the interviewer, "I" Is Me ~
noodles: Can you tell me how JS implements the overloaded function? I:because JS parameters are variable-length, there is no overload! There is no need to use heavy-duty! Surface:Why isn't it necessary to use overloading? What are you going to tell me about overloading? me: Overloading is a set of functions (methods) with the same name and different parameter lists.
face: Yes, then why do you also say that JS is not overloaded, there is no need to use overloading it?
I was so confused because I didn't know what the interviewer was trying to test me for,because I remember that "JS advanced programming" is mentioned in the function is not overloaded AH (later checked, in the third edition of 66 pages, the parents can open their own books to see), but now the interviewer does not agree with my answer ah, that is, in his view, JS is overloaded, I can not insist that no overloading ah. So I thought for a moment in the direction of the overloaded concept, then thought of using the arguments object for judgment. So: I: I think, if the JS function needs to implement overloading, can be judged according to the length value of the arguments object.
face: Can you write an example for me to see? then, I wrote the following code in the input box:
functionoverloading () {//depending on the arguments.length, different values are operated differently Switch(arguments.length) { Case0:/*the code for Operation 1 is written here.*/ Break; Case1:/*the code for Operation 2 is written here.*/ Break; Case2:/*the code for Operation 3 is written here.*/ //There's a lot of case behind it ...} }
I sent the code to the interviewer.
Face: Yes, this is an implementation of the overloaded Method! But can you think of a better way? Me: I think of this method for the time being. All right, so much for the conversation with the interviewer. He asked me if I could come up with a better way, which means there must be other ways I didn't know. So, I began to search for books. Haha, finally in the father of jquery John Resig wrote "Secrets of the JavaScript Ninja" found a wonderful clever way!that method takes full advantage of the characteristics of closures! Before introducing this approach, let's take a look at the names of foreigners, for example, John Resig,john is First-name,resig is Last-name, the equivalent of our name consists of a surname and a name. We now have such a demand, there is a People object, which contains some names, as follows:
var people = { values: ["Dean Edwards", "Sam Stephenson", "Alex Russell", "Dean Tom"]};
We want the people object to have a Find method that returns all elements inside the people.values when no arguments are passed, and returns the element that matches the First-name parameter when passing a parameter; When passing two arguments, Then the first-name and Last-name are matched to return. Because the Find method performs different operations depending on the number of arguments, we would like to have a Addmethod method that can add an overload of find for people as follows:
function /* do not send a reference */ function/* pass a */function /* Pass two * /
At this point, the problem, the overall Addmethod method how to achieve it? John Resig is implemented as follows, the code is not long, but very ingenious:
functionAddmethod (object, name, fn) {varOld = Object[name];//The previous added method has a temporary variable inside the oldObject[name] =function() {//the method of rewriting the Object[name]//if the number of arguments passed in is the same as expected when the Object[name] method is called, call directly if(Fn.length = = =arguments.length) {returnFn.apply ( This, arguments); //Otherwise, determine if old is a function and, if it is, call old}Else if(typeofOld = = "function") {returnOld.apply ( This, arguments); }}}
now, let's analyze one of these addmethod functions, which takes 3 parameters, the first is the object to bind the method, the second is the method name of the binding, and the third is the method that needs to be bound (an anonymous function). The analysis of the function body is already in the comment.
OK, now this addmethod method has been implemented, we will implement the people.find of the next load! The full code is as follows:
//AddmethodfunctionAddmethod (object, name, fn) {varOld =Object[name]; Object[name]=function() {if(Fn.length = = =arguments.length) {returnFn.apply ( This, arguments); } Else if(typeofOld = = "function") {returnOld.apply ( This, arguments); }}}varPeople ={values: ["Dean Edwards", "Alex Russell", "Dean Tom."]}; /*The following begins the overloading of the People.find method with Addmethod*/ //returns all elements inside the peopld.values when no arguments are passedAddmethod (People, "find",function() {return This. values;}); //when a parameter is passed, it is returned by matching first-name.Addmethod (People, "find",function(firstName) {varRET = []; for(vari = 0; I < This. values.length; i++) {if( This. Values[i].indexof (firstName) = = = 0) {Ret.push ( This. Values[i]); }}returnret;}); //returns an element that matches both First-name and Last-name when passing two parametersAddmethod (People, "find",function(FirstName, lastName) {varRET = []; for(vari = 0; I < This. values.length; i++) {if( This. values[i] = = = (FirstName + "" +lastName)) {Ret.push ( This. Values[i]); }}returnret;}); //Test:Console.log (People.find ());//["Dean Edwards", "Alex Russell", "Dean Tom")Console.log (People.find ("Dean"));//["Dean Edwards", "Dean Tom"]Console.log (People.find ("Dean Edwards"));//["Dean Edwards"]
OK, the implementation of the JS function overload is written so much, if the pro has a better way to achieve, welcome to comment exchange Ha ~
On JavaScript function overloading