javascript this指向大总结

1. this 的指向

1.1 普通函数内 this 的指向

这些this 指向是当我们调用函数时确定的，调用方式不同决定了this指向不同，函数内的this 一般指向函数的调用者

调用方式	this指向
普通函数调用	window
构造函数调用	实例对象，原型对象里面的方法也指向实例对象
对象方法调用	该方法所属对象
绑定事件方法	绑定事件对象
定时器函数	window
立即执行函数	window

1.2. 箭头函数的 this 指向

箭头函数的this是在定义函数时绑定的，不是在执行过程中绑定的。简单的说，函数在定义时，this就指向了定义函数的对象，所以，这会很好的解决setTimeout和setInterval的this指向问题。我们不用再去给其用that变量存储this。

2. 改变 this 指向的三种方式

2.1 call

call 方法调用一个对象，就是调用函数的方式，可以改变this指向

fn.call(thisAng , ag1, ag2)

• thisAng 为当前fn函数运行时指向的this 值

• ag1,ag2 为传递的参数

• 返回值就是函数的返回值，因为它就是调用函数

eg1:  
 var obj={
      name:'王源',
      age:18
    }
    function fn(name,age){
      this.name = name;
      console.log(this)  // {name: "易洋千玺", age: 18}
    }
    fn.call(obj,'易洋千玺',18)

eg2: 可以用来实现es5函数属性的继承
function father(name,age){
      this.name = name,
      this.age = age
    }

    function son(name,age){
      father.call(this,name,age)
    }
    var fn = new son('易洋千玺',18);
    console.log(fn.name) // 易洋千玺

2.2 apply

apply 方法调用一个函数，就是调用函数的方式，可以改变this指向

fn.apply(thisAng , [ag1, ag2])

• thisAng 为当前fn函数运行时指向的this 值

• [ag1,ag2] 为传递的参数必须包含在数组里面

• 返回值就是函数的返回值，因为它就是调用函数

eg1 :
     var obj={
       name:'王源',
       age:18
     }
     function fn(name,age){
       this.name = name;
       console.log(this)  // {name: "易洋千玺", age: 18}
     }
     fn.apply(obj,['易洋千玺',18])

eg2: 可以利用apply 借助于数学内置对象求最大值
   var arr = [1, 22, 3, 5, 66, 88];
      var max = Math.max.apply(Math, arr);
      console.log(max)  //88

2.3 bind

bind 方法不会调用函数，但是可以改变this指向

fn.bind(thisAng , ag1, ag2)

• thisAng 为当前fn函数运行时指向的this 值

• ag1,ag2 为传递的参数必须包含在数组里面

• 返回值由指定this值和初始化参数改造的原函数拷贝

eg1:
 var obj = {
        name: "王源",
        age: 18,
      };
      function fn(name, age) {
        this.name = name;
        console.log(this); // {name: "易洋千玺", age: 18}
      }
      fn.bind(obj, "易洋千玺", 18)();

eg2: 点击一个按钮时禁用该按钮，三秒后启用（类似于发送验证码）
 var but = document.querySelector("button");
      but.onclick = function () {
        this.disabled = true;
        setTimeout(
          function () {
            this.disabled = false; //如何不改变this指向，定时器里面的this指向window
          }.bind(this),
          3000
        ); // 因为定时器函数不需要调用所以用bind改变this指向最合适
      };

2.4 call apply bind 总结

相同点：

• 都可以改变函数的 this 指向

不同点：

• call apply 会调用函数，并改变函数内部的this指向

• call 和apply 传递的参数不一样 call 是 ag1,ag2…, apply 必须以数组的形式传递参数 [ag1,ag2]

• bind 不会调用函数，但可以改变函数的 this 指向

应用场景：

• call 经常做继承

• apply 经常和数组有关系，比如可以借助数学对象求数组的最大最小值

• bind 经常用于不调用函数但是还想改变函数内部的 this 指向时，比如改变定时器函数里面的 this 指向