call、apply、bind

时间：2021-11-10 19:36:36

***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, '前端工程师')是函数调用

相关文章