Today continue to learn JavaScript series tutorials, although it is the basis, but I think it is necessary to learn by heart, do not be afraid of difficult, do not be afraid to forget, do not be afraid to learn. Which master is not from scratch, I want to strengthen their learning confidence, and seriously go down. Although the road is difficult, but always taste the fragrance at the end.
A function is a section of JS code that defines one time but can be invoked or executed any number of times. A function can sometimes have arguments, that is, a local variable that specifies a value when the function is invoked. Functions often use these parameters to compute a return value, which also becomes the value of the function invocation expression.
The code is as follows |
Copy Code |
function box () { Alert ("Age"); } function box (name,age) { return name+age; } Alert (Box (' Caibaojian ', 24)); Www.111cn.net |
Tip: When the function encounters the first return, it terminates the function down.
Three: Argument objects
In fact, a function body can receive incoming arguments by argument the object.
The code is as follows |
Copy Code |
function box () {
return arguments[0] + ' | ' +ARGUMENTS[1]; Get the value of each parameter } Alert (Box (' Caibaojian ', 24)); The length property of the arguments object can get the number of parameters. function box () { return arguments.length; } Alert (Box (1,2,3,4,5)); 5 |
JavaScript functions do not have overloaded functionality
The code is as follows |
Copy Code |
function box (num,a) { return num+a; } function box (num) { return num; } Alert (Box (5,11)); 50 overload is based on the parameters, select the same function and the parameters of different functions. |
JavaScript only recognize the last name function, according to the order.
But JavaScript can simulate function overloading by its own properties.
Some of the more meaningless examples in the book, such as a calculator function, perform an addition operation if the argument is two digits. If the argument is three digits, the multiplication operation is performed
The most likely realization of this function is
The code is as follows |
Copy Code |
function Calculate () { if (arguments.length = = 2) { return arguments[0] + arguments[1]; } if (arguments.length = = 3) { return arguments[0] * arguments[1] * arguments[2]; } }
|
Alert (Calculate (1, 3))
This function does not look good, but as the demand increases, the if branch becomes larger and the corresponding pattern becomes uglier. Although if is not good for language. But we can consider using another strategy to implement this requirement.
This is a new function overload pattern. The code is as follows
The code is as follows |
Copy Code |
var map = function (arr, callback, PThis) { var len = arr.length; var rlt = new Array (len); for (var i = 0; i < len; i++) { if (i in arr) rlt[i] = Callback.call (PThis, arr[i), I, arr); } return RLT; } /** * Function parameter overload method overload, the function parameter pattern matching. The default dispatcher support * and ... and?, "*" denotes an argument of any type, "..." for multiple arguments of any type, "?" Generally used in ",?..." to represent 0 or any number of parameters * @method Overload * @static * @optional {Dispatcher} is used to match the function that the parameter distributes * @param {Func_maps} based on matching list of functions that accept calls * @return {function} overloaded functions */ var Functionh = { Overload:function (Dispatcher, func_maps) { if (!) ( Dispatcher instanceof Function)) { Func_maps = Dispatcher; Dispatcher = function (args) { var ret = []; return map (args, function (o) {return typeof o}). Join (); } } return function () { var key = Dispatcher ([].slice.apply (arguments)); for (var i in func_maps) { var pattern = new RegExp ("^" + i.replace ("*", "[^,]*"). Replace ("...", ". *") + "$"); if (Pattern.test (key)) { Return func_maps[i].apply (this, arguments); } } } } }; |
Functionh.overload includes two parameters, one is the dispatcher function that handles matching criteria (default), and the other is a set of function mapping tables, and the default dispatcher function is to generate a string based on the type of argument that is actually invoked. For example, the three parameters called 10, "a", [1,2] will generate "Number,string,array", when the specific implementation pattern matching, will be based on the function map of each "key" to generate a regular expression, Use this regular expression to match the return value of the dispatcher function, and if it matches, call the handler function for the key, otherwise the next key will be matched in turn. So the need for that computer function can be written as
The code is as follows |
Copy Code |
var Calculate = Functionh.overload ({ ' Number,number ': function () { return arguments[0] + arguments[1]; }, ' Number,number,number ': function () { return arguments[0] * arguments[1] * arguments[2]; } });
Alert (Calculate (1,2,3)); |
By the way, browser-compatible code can also be written in a similar form
The code is as follows |
Copy Code |
var msie = navigator.userAgent.indexOf (' msie ')!==-1; var foo = functionh.overload (function () { Return MSIE? "IE": "Notie"; }, { "IE": function () { Alert (' is IE '); }, ' Notie ': function () { Alert (' Notie '); } });
Foo (); |
The implementation of the scheme is so, for what is superior to the inferior, we can judge for themselves.