观点
重载是指函数或许要领有雷同的称号,然则参数个数或范例不雷同的情况,如许的同名差别参的函数或许要领之间,相互称之为重载函数或要领。
我们晓得,JavaScript函数能够随便通报恣意数目、恣意范例的参数,那末它有没有重载呢?
答案是有的,下面我们经由过程3种要领来完成JavaScript的函数重载。
完成
0. 目的
我们有一个people对象
var people = {
values: ['Dean Edwards', 'Sam Stephenson', 'Alex Russell', 'Dean Tom']
};
想要完成一个find要领,不传参数的时刻,输出一切名字,只传1个参数的时刻,输出一切fristName和参数雷同的名字,传2个参数的时刻,输出一切firstName和lastName和2个参数离别雷同的名字。
people.find(); // ["Dean Edwards", "Sam Stephenson", "Alex Russell", "Dean Tom"]
people.find('Dean'); // ["Dean Edwards", "Dean Tom"]
people.find('Dean', 'Edwards'); // ["Dean Edwards"]
1. 应用arguments和switch完成重载
people.find = function () {
switch (arguments.length) {
case 0:
return this.values;
case 1:
return this.values.filter((value) => {
var firstName = arguments[0];
return value.indexOf(firstName) !== -1 ? true : false;
});
case 2:
return this.values.filter((value) => {
var fullName = `${arguments[0]} ${arguments[1]}`;
return value.indexOf(fullName) !== -1 ? true : false;
});
}
};
console.log(people.find()); // ["Dean Edwards", "Sam Stephenson", "Alex Russell", "Dean Tom"]
console.log(people.find('Dean')); // ["Dean Edwards", "Dean Tom"]
console.log(people.find('Dean', 'Edwards')); // ["Dean Edwards"]
这类体式格局人人一定都能看懂,就不多说啦。
2. 应用arguments和闭包完成重载
function addMethod (object, name, fn) {
// 把前一次增加的要领存在一个暂时变量old中
var old = object[name];
// 重写object[name]要领
object[name] = function () {
if (fn.length === arguments.length) {
// 假如挪用object[name]要领时,假如实参和形参个数一致,则直接挪用
return fn.apply(this, arguments);
} else if (typeof old === 'function') {
// 假如实参形参不一致,推断old是不是是函数,假如是,就挪用old
return old.apply(this, arguments);
}
};
}
addMethod(people, 'find', function() {
return this.values;
});
addMethod(people, 'find', function(firstName) {
return this.values.filter((value) => {
return value.indexOf(firstName) !== -1 ? true : false;
});
});
addMethod(people, 'find', function(firstName, lastName) {
return this.values.filter((value) => {
var fullName = `${firstName} ${lastName}`;
return value.indexOf(fullName) !== -1 ? true : false;
});
});
console.log(people.find()); // ["Dean Edwards", "Sam Stephenson", "Alex Russell", "Dean Tom"]
console.log(people.find('Dean')); // ["Dean Edwards", "Dean Tom"]
console.log(people.find('Dean', 'Edwards')); // ["Dean Edwards"]
这里addMethod(object, name, fn)要领是中心。我们偏重剖析一下为何这里会有闭包,能够保留上一个注册的函数。
function addMethod (object, name, fn) {
// object, name, fn是传入的3个参数
var old = object[name];
object[name] = function () {
// 这里对old和fn进行了援用
if (fn.length === arguments.length) {
return fn.apply(this, arguments);
} else if (typeof old === 'function') {
return old.apply(this, arguments);
}
};
}
object是别的一个援用对象,它的一个要领中援用了old和fn,所以关于addMethod来讲,它的局部变量在addMethod函数实行完后,依然被别的的变量所援用,致使它的实行环境没法烧毁,所以产生了闭包。
因而,每次挪用addMethod,都邑有一个实行环境保留着当时的old和fn,所以在挪用people.find()的时刻能够找到当时注入的fn,完成函数重载。
3. 应用Proxy和arguments完成重载
var proxy = new Proxy(people, {
get: function (target, key, receiver) {
if (key === 'find') {
return function () {
switch (arguments.length) {
case 0:
return this.values;
case 1:
return this.values.filter((value) => {
var firstName = arguments[0];
return value.indexOf(firstName) !== -1 ? true : false;
});
case 2:
return this.values.filter((value) => {
var fullName = `${arguments[0]} ${arguments[1]}`;
return value.indexOf(fullName) !== -1 ? true : false;
});
}
};
}
return Reflect.get(target , key , receiver);
},
set: function (target, key, value, receiver) {
return Reflect.set(target, key, value, receiver);
}
});
console.log(proxy.find()); // ["Dean Edwards", "Sam Stephenson", "Alex Russell", "Dean Tom"]
console.log(proxy.find('Dean')); // ["Dean Edwards", "Dean Tom"]
console.log(proxy.find('Dean', 'Edwards')); // ["Dean Edwards"]
如许写实在觉得有点弄巧成拙了,就当做是别的一种思绪吧。
总结
JavaScript能够完成函数重载,主要有两种头脑:
- 应用arguments类数组来推断吸收参数的个数
- 应用闭包保留之前注册进来的同名函数