首先我们大概说一些this的指向

事件绑定中的this指向绑定事件的元素

      div.onclick = function () {
         console.log(this); //div
      };
复制代码

对象中的this指向对象本身

      obj = {
          f: function () {
          console.log(this); //obj
       },
      };
    obj.f();
复制代码

构造函数new实例化对象中的this指向实例化的对象（返回值不能是数组、对象、函数）

      function F() {
        this.say = function () {
          console.log(this);
        };
      }
      var xx = new F();
      xx.say() //xx
复制代码

全局情况下的this指向window

   console.log(this) //window
复制代码

函数中的this指向调用的对象

     function f(){
        console.log(this)
     }
    f();// window
    div.onclick=f; //div
复制代码

箭头函数箭头函数中的this指向的是定义时的this，而不是执行时的this。

————————–以上大家已经大概对this指向有所了解了———————————-

思考一个问题：怎么样去把下面this的指向改为其他的对象呢

function f(){
      console.log(this)
 }
f();// window
复制代码

现在开始就可以讲 this的显式绑定了，通过显式绑定去修改this的默认指向和他们之间的区别

call() 用来改变函数的this指向，并且会调用一次函数，参数：第一个参数是改变的指向，从第二个参数开始都是函数的实参

 function f() {
        console.log(this);
      }
 
 f(); //常规的默认绑定 window
 f.call("xx")//用call()把函数this的指向改成 字符串类型的 "xx"
 //-------------------------参数用法-----------------------------------------
  function f(a,b) {
        console.log(this);
        console.log(a,b)
      }
 f.call("xx",1,2) // 打印 "xx" 1 2
 
复制代码

apply()和call()功能一样，区别在参数，apply()只有两个参数，第一个参数是改变的指向，第二个参数是个数组，数组里面放的是函数的实参

 function f() {
        console.log(this);
  }
 f.apply("xx") //用apply()把函数this的指向改成 字符串类型的 "xx"
  //-------------------------参数用法-----------------------------------------
  function f(a,b) {
        console.log(this);
        console.log(a,b)
      }
 f.apply("xx",[1,2]) // 打印 "xx" 1 2
复制代码

bind() 用来改变函数的this指向，但是不会调用函数，并且还有一个返回值，返回值是改变指向之后的函数。参数是要改变的指向。

 function f() {
        console.log(this);
 }
 var ff = f.bind("xx");//代码执行到这里的时候后台是没有打印，但是会拷贝函数f赋值给ff变量
 console.log(ff)// 会打印一份跟函数f一模一样的函数，但是他们不是同一个函数,并且第二给函数的this指向是已经改变过之后的
 ff()//这里调用 ff，打印this是 "xx"
复制代码