js 改变this指向的几种方法

上次说了this的几种情况，分别讲了几种情形下this代表的是什么，回顾一下就是

函数在哪里调用的，this就指向哪里。

• 对于构造函数，this指向的就是它构造的实例。
• 对于事件绑定，this指向的就是绑定了事件的元素。
• 对于对象定义，this指向的就是定义的这个对象。

我们通常说箭头函数没有自己的this，为什么呢， 这一点例外的是：箭头函数的this是在定义函数时绑定的， 不是在执行过程中绑定的。

call() 和 apply()： 两种方法都能改变this指向，很类似，区别主要是第二个以后参数，

1、 call()

第一个参数表示要把this指向的新目标，第二个之后的参数其实相当于传参，参数以逗号,隔开 （性能较apply略好）

• 用法：a.call( b,1,2 );
  表示要把a函数的this指向修改为b的this指向，并且运行a函数，传进去的参数是（1，2）

2、 apply()

第一个参数同上，第二个参数接受一个数组，里面也是传参，只是以数组的方式，相当于arguments

• 用法：a.apply( b, [ 1, 2 ] );
  表示要把a函数的this指向修改为b的this指向，并且运行a函数，传进去的参数是[ 1 , 2 ]
• 注意 ：即使只有一个参数的话，也要是数组的形式

3、 bind()

bind()方法会创建一个新函数，称为绑定函数，当调用这个绑定函数时，绑定函数会以创建它时传入 bind()方法的 第一个参数 作为 this；
传入 bind() 方法的第二个以及以后的参数加上绑定函数运行时本身的参数 按照顺序作为原函数的参数来调用原函数。

例子：

 function animalFn(arg1,arg2){
      console.log(this)
      console.log(this.name, arg1,arg2 )
    }

    var obj = {
      name : 'apple',
      say : function(){
        console.log(this.name);
      }
    }


    // call
    animalFn.call(obj, 1, 1)   // animalFn里的this代表obj

    // apply
    animalFn.apply(obj, [2,2])  // animalFn里的this代表obj

    // bind
    animalFn.bind(obj, 3, 3)  // 没有反应 只是绑定了没有执行
    animalFn.bind(obj, 3, 3)()

    # bind 只改变this指向 需要手动调用 ! ! !

4、 存储this指向到变量中

var oDiv1 = document.getElementById("div1");
oDiv1.onclick = function () {
    var _this = this; //将this储存在变量中，而且不改变定时器的指向
    setTimeout(function () {
        console.log(_this); //注意这里是_this，而不是this-- <div id="div1">点击</div>
        console.log(this); //定时器的指向没有被改变--仍然是window
    }, 1000)
}