1.这三个方法都能改变this的指向

2.代码实战

   let obj1 = {
      name: "小红",
      age: 20,
      fn: function () {
        console.log('当前this的指向',this);
        console.log(`我叫${this.name},今年${this.age}岁`);
      },
    };
    obj1.fn();

这里的代码,obj1是一个对象,里面有属性name和age 正常情况下我们调用这个对象的方法this的指向是:

从打印的结果来看,谁调用的就指向谁,很明显是obj1这个对象进行调用的

   let obj2 = {
      name: "小明",
      age: 21,
    };

我们在这里又定义了一个新的对象obj2，对象里面同样有两个属性age和name，现在我们需要的是调用obj1对象的fn方法的时候 让this指向obj2，这个时候就可以使用call来改变this的指向。

(1).call方法也可以直接调用函数

调用完的结果是这个this指向了window,很明显这个结果不是我们想要的。

  obj1.fn.call(obj2)

新的打印结果:

这个结果很明显是我们想要的。

(2)通过apply方法

    obj1.fn.apply(obj2)

(3)通过bind方法

    obj1.fn.bind(obj2)

控制台里面什么都没用,修改:

    obj1.fn.bind(obj2)()

可以看出bind方法后面多出了一个()调用的过程。

3.call和apply的传参方式不同

(1)call的传参

    let obj1 = {
      name: "小红",
      age: 20,
      fn: function (name,jg) {
    
        console.log(`${name}是${jg}`);
      },
    };


    let obj2 = {
      name: "小明",
      age: 21,
    };

    obj1.fn.call(obj2,'冰红茶','3元')
  </script>

       

(2)apply的传参

  obj1.fn.apply(obj2,'冰红茶','3元')

代码报错了

正确的代码:  

    obj1.fn.apply(obj2,['冰红茶','3元'])

(3)可以看出call和apply的传参的形式是不一样的

call间接隔开的形式一个个进行传参,例如a,b,c

而apply是以数组[]的形式进行包裹着的。

4.总结

1.bind,call,apply都可以改变this的指向

2.call，applly的传参的方式不一样

3.注意bind改变指向后 需要在加()进行调用