问:什么是重载?
答:同样的函数,不同样的参数个数。
《JS高级程序设计》里是提到过函数是没有重载的,ts中有重载。但是可以根据arguments的长度来实现重载。
//js的重载
function fn (name){
console.log(name)
};
function fn(name,age){
console.log(name,age);
} ;
function fn (name,age,sex){
console.log(name,age,sex);
};
fn('ying');
fn('ying',18);
fn('ying',18,女);
// 理想结果:
// 'ying'
// 'ying',18
// 'ying',18,女
//实际结果
// 'ying',undefined,undefined,
// 'ying',18,undefined
// 'ying',18,女
最后定义的fn将前两个fn覆盖掉,所以没有达到重载的效果
想达到一个理想的效果也还是有办法的,就是定义一个fn,然后判断arguments的长度判断,然后分别执行不同的语句。
function fn(){
switch(arguments.length){
case 1:
var [name] = arguments;
console.log(name);
case 2:
var [name,age] = arguments;
console.log(name,age);
case 3:
var [name,age,sex] = arguments;
console.log(name,age,sex);
break;
}
}
//实现效果
// 'ying'
// 'ying',18
// 'ying',18,女
虽然上述达到了想要的效果,但不是完美的实现js的重载。
高端实现js的重载做法是利用闭包。
这个方法在JQuery之父John Resig写的《secrets of the JavaScript ninja》中,这种方法充分的利用了闭包的特性!
function addMethods(object,name,fn){
let old = object[name];//把初始传入的方法存在一个临时变量old中,
object[name] = function (){//重写传入的方法,
if(fn.length === arguments.length){// 如果调用object[name]时,如果传入的参数与预期的一致,则直接调用。
fn.apply(this,arguments);
}else if(typeof fn === 'function'){// 否则判断old是否为函数,如果是,就调用
old.apply(this,arguments);
}
}
}
addMethods(window,'fn',(name)=>{console.log(name)});
addMethods(window,'fn',(name,age)=>{console.log(name,age)});
addMethods(window,'fn',(name,age,sex)=>{console.log(name,age,sex)});
// 结果:
// 'ying'
// 'ying',18
// 'ying',18,女