Home > Developer > JavaScript
In Javascript, the first defined function can be overwritten by the latter defined function. Therefore, Javascript does not support function overloading. For example:
<Script type = "text/javascript">
Function p (a, B, c ){
Alert (a + B + c );
}
Function p (a, B ){
Alert (a + B );
}
P (1, 2, 3); // alert 6;
</Script>
Although p (a, B, c) functions exist, the function is overwritten by p (a, B. Therefore, function p (a, B) can only be called ). In fact, functions in javascript can be defined as follows:
Var p = function (a, B, c ){
Alert (a + B + c );
}
Var p = function (a, B ){
Alert (a + B );
}
This form of definition makes it more intuitive to see that p is covered. Javascript is not a pure functional language, but also has some features of functional language. All functions here are objects. The Javascript language does not need to be compiled, so it cannot bind functions during compilation. Therefore, when javascript calls a function, it directly uses the current definition of the function.
In Javascript, function parameters can be an indefinite number, and any undifined value is the default value. For example:
Function p (a, B ){
Document. writeln ();
Document. writeln (B );
}
Call p (1); 1 undefined is printed.
Therefore, this method can be used to implement the overload function in disguise, as shown below:
Function p (){
If (arguments. length = 2 ){
Document. writeln (arguments [0]); document. writeln (arguments [1]);
}
If (arguments. length = 3 ){
Document. writeln (arguments [0]); document. writeln (arguments [1]); document. writeln (arguments [2]);
}
}
P ("a", "B ");
Document. writeln ("<br/> ");
P ("a", "B", "c ");
You can see that calling function p calls different logic based on the number of parameters. Although this method works, it is not elegant enough.
You can use the apply method in a more elegant way.
In javascript, a function is an object. Therefore, as an object, a function also has its own methods, such as toString (), call (), and apply (). Before learning about the apply method, take a look at the call method similar to it.
The call method signature is as follows:
Call ([thisObj [, arg1 [, arg2 [, [, argN])
Call Method -- indicates the call method of another object. The call method allows you to change the context of the function object. If the thisObj parameter is not provided, the global object is thisObj by default.
Take an example to understand the call method.
Var x = 1;
Var o = {x: 2 };
Function f (){
This. showtime = function () {alert (Date ());}
Alert (this. x );
}
F (); // call the f function first, and then define a showtime method for the global object. alert outputs the global x variable value.
This. showtime (); // The showtime () of the global object has been defined and can be called.
F. call (o); // indicates that o calls the call method. At this time, context global is changed to an o object, so this. x is o. x, this. showtime is o. showtime ()
O. showtime (); // o. showtime () has been defined and can be called.
The call method can be connected with parameters to indicate the function parameters, for example, the following example:
Var x = 0;
Var o = {x: 2 };
Function f (a, B ){
Alert (this. x + a + B );
}
F. call (o, 3, 4); // alert 9
The apply method is the same as the call method, except that the parameters accepted by apply are an array.
Apply ([thisObj [, argArray])
Therefore, if the above method is changed to apply, you have to write it as follows:
Var x = 0;
Var o = {x: 2 };
Function f (a, B ){
Alert (this. x + a + B );
}
F. apply (o, [3, 4]);
Some foreigners have written a set of methods on the Internet to achieve similar effects of heavy load.
Http://ejohn.org/blog/javascript-method-overloading/source code is as follows:
<! Doctype html public "-// W3C // dtd html 4.0 Transitional // EN">
<Html>
<Head>
<Title> </title>
<Script type = "text/javascript">
Function addMethod (object, name, fn ){
Var old = object [name]; // Closure
Object [name] = function (){
If (fn. length = arguments. length)
Return fn. apply (this, arguments );
Else if (typeof old = 'function ')
Return old. apply (this, arguments );
};
}
Function Users (){
AddMethod (this, "find", function (){
// Find all users...
Alert ();
});
AddMethod (this, "find", function (name ){
// Find a user by name
Alert (name );
});
AddMethod (this, "find", function (first, last ){
// Find a user by first and last name
Alert (first + "" + last );
});
}
Var users = new Users ();
Users. find (); // Finds all
Users. find ("John"); // Finds users by name
Users. find ("John", "Resig"); // Finds users by first and last name
Users. find ("John", "E", "Resig"); // Does nothing
</Script>
</Head>
<Body>
</Body>
</Html>
This set of code is easy to use, but it is hard to understand. It is mainly applied to the closure, and the old value can be stored in the memory all the time. Poll to find the function that matches the number of parameters. The code is hard to understand and inefficient.
Below, I made some minor changes based on the above Code. I used an array to save these overload functions to avoid using closures. Therefore, it is readable. But the code is a little complicated.
<! Doctype html public "-// W3C // dtd html 4.0 Transitional // EN">
<Html>
<Head>
<Title> </title>
<Script type = "text/javascript">
Var chongzailist = new Array (); // store the list of overloaded functions
Function addMethod (object, name, fn ){
If (object [name] = undefined ){
Object [name] = function (){
// (Arguments. length );
For (c in chongzailist ){
If (chongzailist [c] ["Name"] = name ){
For (f in chongzailist [c] ["Func"]) {
If (chongzailist [c] ["Func"] [f]. length = arguments. length ){
Return chongzailist [c] ["Func"] [f]. apply (null, arguments );
}
}
}
}
}
}
Var isexist = false;
For (c in chongzailist ){
If (chongzailist [c] ["Name"] = name ){
Chongzailist [c] ["Func"]. push (fn );
Isexist = true;
Break;
}
}
If (! Isexist ){
Var fnlist = new Array ();
Fnlist. push (fn );
Chongzailist. push (chongzai (name, fnlist ));
}
}
Function chongzai (fname, fnlist ){
Return {Name: fname, Func: fnlist };
}
Function Users (){
AddMethod (this, "find", function (){
Alert ();
});
AddMethod (this, "find", function (name ){
Alert (name );
});
AddMethod (this, "find", function (first, last ){
Alert (first + "" + last );
});
AddMethod (this, "get", function (){
Alert ();
});
AddMethod (this, "get", function (name ){
Alert (name );
});
AddMethod (this, "get", function (first, last ){
Alert (first + "" + last );
});
}
// Users ();
Var users = new Users ();
Users. find (); // Finds all www.2cto.com
Users. find ("John"); // Finds users by name
Users. find ("John", "Resig"); // Finds users by first and last name
Users. find ("John", "E", "Resig"); // Does nothing
Users. get (); // Finds all
Users. get ("John"); // Finds users by name
Users. get ("John", "Resig"); // Finds users by first and last name
Users. get ("John", "E", "Resig"); // Does nothing
</Script>
</Head>
<Body>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
