改变this的指向

5.4改变this的指向

​ 如果系统自动指定的this对象不是我们想要的,我们就可以主动更换this指向的对象

5.4.1 call

​ 在一次调用函数时,临时替换一次函数中的this为指定对象

使用:要调用的函数.call(替换this的对象, 实参值1,...)

call做了的3件事:

​ i:立刻调用一次.前的函数

​ ii:自动将.前的函数中的this替换为指定的新对象

​ iii:向要调用的函数中传入实参值

示例:

    // call
        // 有一个公共的计算器函数,计算员工的总工资
        function jisuan(base,bouns1,bouns2){
            console.log(`${this.name}的工资是:${base+bouns1+bouns2}`);
        }
        var lilei={name:"li lei"};
        var hmm={name:"han meimei"};
        // 使用call函数,改变this的指向,让jisuan函数中的this指向lilei这个对象,并将参数一个一个的传入
        //          this   base  bouns1  bouns2
        jisuan.call(lilei, 10000, 2000,   1000);
        jisuan.call(hmm,10000,1000,3000);
5.4.2 apply

​ 如果多个实参值是放在一个数组中给的,这里就需要既替换this,又要将数组拆散再传入参数

​ 使用:要调用的函数.apply(替换this的对象, 包含实参值的数组)

apply做了3件事:

​ i. 调用.前的函数

​ ii. 替换.前的函数中的this为指定对象

​ iii. 先拆散数组为多个元素值,再分别传给函数的形参变量

示例:

 // apply   
        // 有一个公共的计算器函数,计算员工的总工资
        function jisuan(base,bouns1,bouns2){
            console.log(`${this.name}的工资是:${base+bouns1+bouns2}`);
        }
        var lilei={name:"li lei"};
        var hmm={name:"han meimei"};
        // 使用call函数,改变this的指向,让jisuan函数中的this指向lilei这个对象,并自动遍历数组,且将值放入参数列表
       var arr=[10000,1000,2000];
        //          this   base  bouns1  bouns2
       jisuan.apply(lilei,arr);
5.4.3 bind

​ 如果多次需要调用函数,并且对应的都是一个对象,就可以使用bind进行永久绑定this

​ 功能:创建函数副本,并永久绑定this

​ 【1】使用:var 新函数=原函数.bind(替换this的对象)

​ bind做了2件事:

​ i. 创建一个和原函数一模一样的新函数

	ii. 永久替换新函数中的this为指定对象

​ 如何使用新函数:新函数(实参值,…)

注意: 因为bind()已经提前将指定对象替换了新函数中的this,则后续每次调用时,不需要再替换this了!

​ 【2】bind()不但可以提前永久绑定this,而且还能提前永久绑定部分实参值

​ 如何使用:var 新函数=原函数.bind(替换this的对象, 不变的实参值)

做了3件事:

​ i. 创建一模一样的新函数

 ii. 永久替换this为指定对象

 iii. 永久替换部分形参变量为固定的实参值!

​ 调用:新函数(剩余实参值,...,...)

注意:被bind()永久绑定的this,即使用call,也无法再替换为其它对象了。

示例:

 // bind
      // 有一个公共的计算器函数,计算员工的总工资
         function jisuan(base,bouns1,bouns2){
            console.log(`${this.name}的工资是:${base+bouns1+bouns2}`);
        }
        var lilei={name:"li lei"};
        var hmm={name:"han meimei"};
        var jisuan2=jisuan.bind(lilei);
        jisuan2(10000,1000,2000);
        var jisuan3=jisuan.bind(lilei,10000);
        jisuan3(1000,3000);

[^(4). 总结:]:
[^]: a. 只在一次调用函数时,临时替换一次this: call
[^]: b. 既要替换一次this,又要拆散数组再传参: apply
[^]: c. 创建新函数副本,并永久绑定this: bind

上一篇:Vue中v-model与v-bind区别


下一篇:call, apply, bind改变this指向及实现