call、apply、bind

***call,apply,bind

替换this

何时: 只要this不是想要的都可用call,apply,bind替换

选择:

 call/apply: *调用*函数，在调用时，*临时*替换函数中的this为指定对象.

   何时: 希望在调用函数时，临时替换this，就用call

   apply的作用和call完全一样！

   差别: apply要求传入函数的参数，必须放在数组中传入。

apply可自动打散数组类型参数为单个数据再传递给函数参数

回顾: Math.max(值1,值2,…)

     Math.max.apply(null,arr)

  apply: 1. 调用max

            2. 用null代替max中的this——无视

            3. 打散arr，再分别传给max

 

 bind: 基于原函数*创建*一个新函数，*永久*绑定其中的this为指定对象

 

 

  function calc(base,bonus1,bonus2){
    console.log(this.ename+"的总工资是:"
        +(base+bonus1+bonus2));
  }
  var lilei={ename:"Li Lei"};
  var hmm={ename:"Han Meimei"};
  calc.call(lilei,10000,1000,2000);
  var hmm_sals=[3000,4000,5000];
  calc.apply(hmm,hmm_sals);
  //calc(10000,1000,2000);

  var lilei_calc=calc.bind(lilei,10000);
  //lilei_calc:function(base=10000,bonus1,bonus2){
  //   ...lilei.ename...
  // }
  lilei_calc(1000,2000);
  lilei_calc(2000,3000);
  //lilei_calc.call(hmm,3000,4000,5000);

 

var name = 'global';
var person = {
    name: 'zero'
};
// 输出姓名、年龄和职业
function printInfo(age, job) {
    console.log(this.name, age, job);
}
// 直接调用
printInfo(20, '前端工程师');
// 打印：global 20 前端工程师
// 因为默认的上下文是window，所以this.name是全局定义的global，如果我们想打印出来zero的话，就需要改变函数执行的上下文
printInfo.call(person, 20, '前端工程师');
printInfo.apply(person, [20, '前端工程师']);
// 这两种方式是一样的，第一个参数都是传进去的上下文，this.name取的是person.name，所以打印出来的名字就是zero了，后面的为age和job，只是参数传递的方式不一样，apply比较特殊，把要传的参数放在数组里面
// 而bind和以上两种有区别，bind是es5定义的新方法，用来返回一个有自己上下文的函数，用法也比较类似：
printInfo.bind(person)(20, '前端工程师');
// printInfo.bind(person)这一块是返回的以peron为上下文的函数，后面的(20, '前端工程师')是函数调用