js的重载

问:什么是重载?
答:同样的函数,不同样的参数个数。
《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,女

参考资料:https://www.cnblogs.com/yugege/p/5539020.html

你可能感兴趣的:(js的重载)