js改变this指向的方法：call apply bind

由于js 中this的指向受函数运行环境的影响，指向经常改变，使得开发变得困难和模糊，所以在封装sdk，写一些复杂函数的时候经常会用到this 指向绑定，以避免出现不必要的问题，call、apply、bind基本都能实现这一功能，现对这三种方法使用总结一下：

1、call()——Function.prototype.call()

call 方法可以指定this 的指向（即函数执行时所在的的作用域），然后再指定的作用域中，执行函数

call 方法的参数，应该是对象obj,如果参数为空或null,undefind,则默认传参全局对象

var obj = {};
var fn = function(){
    return this;
};
console.log(fn() === window);  //true this 指向window
console.log(fn.call(obj) === obj)  //true 改变this 指向 obj

 

再看

 var obj = {a:10,b:5};
 var a = 5, b = 5; //即window.a = 5; window.b = 5;
 function fn() {
     return this.a+this.b;
 }
 console.log(fn());  //10 this 指向window
 console.log(fn.call())   //10 如果参数为空或null,undefind,则默认传参全局对象
 console.log(fn.call(null))  //10 如果参数为空或null,undefind,则默认传参全局对象
 console.log(fn.call(undefined))  //10 如果参数为空或null,undefind,则默认传参全局对象
 console.log(fn.call(obj))  //15 改变this 指向 obj

 

2、apply()——Function.prototype.apply()

apply 和call 作用类似，也是改变this 指向，然后调用该函数，唯一区别是apply 接收数组作为函数执行时的参数

var obj = {a:10,b:5};
 var a = 5, b = 5; //即window.a = 5; window.b = 5;
 function fn(c,d) {
     return this.a+this.b+c+d;
 }
 console.log(fn(1,2));  //10 this 指向window
 console.log(fn.call(obj,2,3))  //15 改变this 指向 obj
 console.log(fn.apply(obj,[3,4]))  //15 改变this 指向 obj

3、bind()——Function.prototype.bind()

使用bind方法，会返回一个函数，不会立即执行

 var obj = {a:10,b:5};
 var a = 5, b = 5; //即window.a = 5; window.b = 5;
 function fn(c,d) {
     return this.a+this.b+c+d;
 }
 console.log(fn(1,2));  //10 this 指向window
 console.log(fn.bind(obj)) // fn 返回一个函数,只是this已经指向了obj

我们再执行得到的函数

 var f = fn.bind(obj);
 console.log(f(2,3)) //20 

总结：call()、apply()改变this指向并立即执行，只是传参方式不同。bind只是改变this指向，不会立即执行。