改变this的指向_this换指向后-CSDN博客

本文链接：https://blog.csdn.net/qq_48648782/article/details/118498191

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);