JavaScript改变函数内this的指向

JavaScript 为我们专门提供了一些函数方法来帮我们更优雅的处理函数内部 this 的指向问题，常用的有 bind()、 call()、apply() 三种方法。

• call 方法
  作用：可以调用函数，可以改变函数中this的指向，可以实现继承父类构造函数中的属性。
  返回值：函数本身的返回值，因为call就是调用函数。
  主要应用：想改变 this 指向，同时想调用这个函数的时候使用。

var o = { name:ryan };
function fn(a,b){ 
	console.log(this);
	console.log(a+b);
}
fn.call(o,1,2); //第一个参数是要原本函数中的this改变为指向这个实参，后面两个参数是传递给a,b的实参

• apply方法
  作用：调用一个函数。简单理解为调用函数的方式，但是它可以改变函数的 this 指向。
  主要应用：利用apply借助内置数学对象Math求最大值。因为max方法支持传递多个参数但不支持数组，用这种方法就能够巧妙地使用数组。

fn.apply(o,[1,2]); //除第一个实参指定this外，第二个实参要是一个数组的形式传递参数
var arr=[1,66,3,22];
var max = Math.max.apply(Math,arr);

• bind方法
  作用：不会调用函数，但是能改变函数内部this 指向。
  返回值：指定的 this 值和初始化参数改造的原函数拷贝。
  主要应用：只是想改变 this 指向，并且不想调用这个函数的时候。比如发送短信验证码的按钮。

var f = fn.bind(o,1,2);
f();

 btn.onclick = function() {
             this.disabled = true; // 这个this 指向的是 btn 这个按钮
             // var that = this;
             setTimeout(function() {
                 // that.disabled = false; // 定时器函数里面的this 指向的是window
                 this.disabled = false; // 此时定时器函数里面的this 指向的是btn
             }.bind(this), 3000); // 这个this 指向的是btn 这个对象
         }

总结

相同点:
call、apply、bind都可以改变函数内部的this指向。
.
区别点:

1. call 和 apply 会调用函数, 并且改变函数内部this指向.
2. call 和 apply 传递的参数不一样, call 传递参数 aru1, aru2…形式 apply 必须数组形式[arg]
3. bind 不会调用函数, 可以改变函数内部this指向.

主要应用场景:

1. call 经常做继承.
2. apply 经常跟数组有关系. 比如借助于数学对象实现数组最大值最小值
3. bind 不调用函数,但是还想改变this指向. 比如改变定时器内部的this指向.

相关联想
ES6中箭头函数的this
箭头函数中的this并不是指向函数的调用者，而是箭头函数在那里，箭头函数里面的this就和那里的this的指向是相同的。也就是说箭头函数中的this，指向的是箭头函数定义位置的上下文this。