Home > Web Front-end > JS Tutorial > body text

Adding helper methods for overloaded functions to JavaScript_javascript tips

WBOY
Release: 2016-05-16 18:23:57
Original
1006 people have browsed it

Overloaded functions in JavaScript are generally operated by judging arguments.
For example:

Copy code The code is as follows:

var afunc = function() {
args = arguments;
if(args.length == 1) {
console.log(1);
}else if(args.length == 2) {
console. log(2);
}else if (args.length == 3) {
console.log(3);
}
}

You can imagine if When there are many overloads, how many if-else judgments are needed (in fact, the number of overloads should not be too many).
If you want to overload js functions, the amount of code will definitely be large. So can you find a way to make the code clearer and reduce the writing of the same code?
This is why I wrote an article and related code.
It is common practice to enter the code first:
Copy the code The code is as follows:

/**KOverLoad
A helper method for creating overloaded functions.
In fact, this method just helps sort out the overloaded methods when the parameters are different.
If you still want to judge and overload the parameter type, please implement it yourself in the provided method.
@Author ake 2010-05-02
@weblog http://www.cnblogs.com/akecn
*/
var KOverLoad = function(scope) {
this.scope = scope || window; //Add methods to this object by default. The this of the method added at the same time points to the object.
this.list = {}; //A place to store overloaded functions.
return this;
};
KOverLoad.prototype = {
//Add an overloaded method.
//@param arg Overloaded method.
add:function(arg) {
if(typeof arg == "function") {
this.list[arg.length] = arg; //Storage overloaded method identified by the number of parameters. Obviously, if the number of parameters of your overloaded method is
}
return this;
},
//After adding all overloaded functions, call this method to create the overloaded function.
//@param fc The method name of the overloaded function.
load:function(fc) {
var self = this, args, len;
this.scope[fc] = function() { //Set the specified method in the specified scope as an overloaded function .
args = Array.prototype.slice.call(arguments, 0); //Convert parameters to array.
len = args.length;
if(self.list[len]) { //Call the corresponding overloaded method according to the number of parameters.
self.list[len].apply(self.scope, args); //The scope and parameters are specified here.
}else{
throw new Error("undefined overload type");
}
}
}
};

The method of use is me The method that I think is clearer:
//This is an optional action object.
Copy code The code is as follows:

var s =function(){}
s .prototype = {
init:function() {
console.log();
}
}

//The parameters of the constructor can be of type Object Or other legal types. If not specified, it will be registered in the window object, and the scope will also be window. In fact, it is just to add the overloaded method somewhere.
Copy code The code is as follows:

new KOverLoad(s.prototype).add(function( a) {
console.log("one",a,this)
})
 .add(function(a,b) {
console.log("two",a,b ,this)
})
 .add(function(a,b,c) {
console.log("three",a,b,c,this)
})
.add(function(a,b,c,d) {
console.log("four",a,b,c,d,this)
})
 .load("func") ; //The parameter here is the method name of the overloaded function to be created.

After completing the above operations, s.func is an overloaded function.
We can call the overloaded function like this:
Copy code The code is as follows:

var t = new s();
t.func();//Throw an error exception. Because there is no function specified with zero parameters
t.func("o");//one o Object {}
t.func(1,2);//two 1 2 Object {}

It’s just a simple code. If you have any suggestions or opinions, please leave a message.
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template