Javascript中this绑定的3种方法与比较
介绍
this可以说是javascript中最耐人寻味的一个特性，学习this的第一步就是明白this既不是指向函数自身也不指向函数的作用域。this实际上是在函数被调用时发生的绑定，它指向什么地方完全取决于函数在哪里被调用。
为什么需要绑定this
this代指当前的上下文环境，在不经意间容易改变：
varinfo="Thisisglobalinfo";
varobj={
info:'Thisislocalinfo',
getInfo:getInfo
}
functiongetInfo(){
console.log(this.info);
}
obj.getInfo()//Thisislocalinfo
getInfo()//Thisisglobalinfo当前上下文环境被修改了
在上面的例子中，我们在对象内部创建一个属性getInfo，对全局作用域下的getInfo进行引用，而它的作用是打印当前上下文中info的值，当我们使用obj.getInfo进行调用时，它会打印出对象内部的info的值，此时this指向该对象。而当我们使用全局的函数时，它会打印全局环境下的info变量的值，此时this指向全局对象。
这个例子告诉我们：
1、同一个函数，调用的方式不同，this的指向就会不同，结果就会不同。
2、对象内部的属性的值为引用类型时，this的指向不会一直绑定在原对象上。
其次，还有不经意间this丢失的情况：
varinfo="Thisisglobalinfo";
varobj={
info:'Thisislocalinfo',
getInfo:functiongetInfo(){
console.log(this.info);
vargetInfo2=functiongetInfo2(){
console.log(this.info);
}
getInfo2();
}
}
obj.getInfo();
//Thisislocalinfo
//Thisisglobalinfo
上面的例子中，对象obj中定义了一个getInfo方法，方法内定义了一个新的函数，也希望拿到最外层的该对象的info属性的值，但是事与愿违，函数内函数的this被错误的指向了window全局对象上面，这就导致了错误。
解决的方法也很简单，在最外层定义一个变量，存储当前词法作用域内的this指向的位置，根据变量作用域的关系，之后的函数内部还能访问这个变量，从而得到上层函数内部this的真正指向。
varinfo="Thisisglobalinfo";
varobj={
info:'Thisislocalinfo',
getInfo:functiongetInfo(){
console.log(this.info);
varself=this;//将外层this保存到变量中
vargetInfo2=functiongetInfo2(){
console.log(self.info);//指向外层变量代表的this
}
getInfo2();
}
}
obj.getInfo();
//Thisislocalinfo
//Thisislocalinfo
然而这样也会有一些问题，上面的self变量等于重新引用了obj对象，这样的话可能会在有些时候不经意间修改了整个对象，而且当需要取得多个环境下的this指向时，就需要声明多个变量，不利于管理。
有一些方法，可以在不声明类似于self这种变量的条件下，绑定当前环境下的上下文，确保编程内容的安全。
如何绑定this
1.call,apply
call和apply是定义在Function.prototype上的两个函数，他们的作用就是修正函数执行的上下文，也就是this的指向问题。
以call为例，上述anotherFun想要输出localthing就要这样修改：
... varanotherFun=obj.getInfo; anotherFun.call(obj)//Thisislocalinfo
函数调用的参数：
Function.prototype.call(context[,argument1,argument2])
Function.prototype.apply(context[,[arguments]])
从这里就可以看到，call和apply的第一参数是必须的，接受一个重新修正的上下文，第二个参数都是可选的，他们两个的区别在于，call从第二个参数开始，接受传入调用函数的值是一个一个单独出现的，而apply是接受一个数组传入。
functionadd(num1,num2,num3){
returnnum1+num2+num3;
}
add.call(null,10,20,30);//60
add.apply(null,[10,20,30]);//60
当接受的context为undefined或null时，会自动修正为全局对象，上述例子中为window
2.使用Function.prototype.bind进行绑定
ES5中在Function.prototype新增了bind方法，它接受一个需要绑定的上下文对象，并返回一个调用的函数的副本，同样的，它也可以在后面追加参数，实现函数的柯里化。
Function.prototype.bind(context[,argument1,argument2])
//函数柯里化部分
functionadd(num1,num2){
returnnum1+num2;
}
varanotherFun=window.add.bind(window,10);
anotherFun(20);//30
同时，他返回一个函数的副本，并将函数永远的绑定在传入的上下文中。
... varanotherFun=obj.getInfo.bind(obj) anotherFun();//Thisislocalinfo
polyfill
polyfill是一种为了向下兼容的解决方案，在不支持ES5的老旧浏览器上，如何使用bind方法呢，就得需要使用旧的方法重写一个bind方法。
if(!Function.prototype.bind){
Function.prototype.bind=function(obj){
varself=this;
returnfunction(){
self.call(obj);
}
}
}
上面的写法实现了返回一个函数，并且将上下文修正为传入的参数，但是没有实现柯里化部分。
...
Function.prototype.bind=function(obj){
varargs=Array.prototype.slice.call(arguments,1);
//记录下所有第一次传入的参数
varself=this;
returnfunction(){
self.apply(obj,args.concat(Array.prototype.slice.call(arguments)));
}
}
当使用bind进行绑定之后，即不能再通过call，apply进行修正this指向，所以bind绑定又称为硬绑定。
3.使用new关键字进行绑定
在js中，函数有两种调用方式，一种是直接进行调用，一种是通过new关键字进行构造调用。
functionfun(){console.log("functioncalled")}
//直接调用
fun()//functioncalled
//构造调用
varobj=newfun()//functioncalled
那普通的调用和使用new关键字的构造调用之间，又有哪些区别呢？
准确的来说，就是new关键字只是在调用函数的基础上，多增加了几个步骤，其中就包括了修正this指针到return回去的对象上。
vara=5;
functionFun(){
this.a=10;
}
varobj=newFun();
obj.a//10
几种绑定方式的优先级比较
以下面这个例子来进行几种绑定状态的优先级权重的比较
varobj1={
info:"thisisobj1",
getInfo:()=>console.log(this.info)
}
varobj2={
info:"thisisobj2",
getInfo:()=>console.log(this.info)
}
1.call,apply和默认指向比较
首先很显然，根据使用频率来想，使用call和apply会比直接调用的优先级更高。
obj1.getInfo()//thisisobj1 obj2.getInfo()//thisisobj2 obj1.getInfo.call(obj2)//thisisobj2 obj2.getInfo.call(obj1)//thisisobj1
使用call和apply相比于使用new呢？
这个时候就会出现问题了，因为我们没办法运行类似newfunction.call(something)这样的代码。所以，我们通过bind方法返回一个新的函数，再通过new判断优先级。
varobj={}
functionfoo(num){
this.num=num;
}
varsetNum=foo.bind(obj);
setNum(10);
obj.num//10
varobj2=newsetNum(20);
obj.num//10
obj2.num//20
通过这个例子我们可以看出来，使用new进行构造调用时，会返回一个新的对象，并将this修正到这个对象上，但是它并不会改变之前的对象内容。
那么问题来了，上面我们写的bind的polyfill明显不具备这样的能力。而在MDN上有一个bind的polyfill方法，它的方法如下：
if(!Function.prototype.bind){
Function.prototype.bind=function(oThis){
if(typeofthis!=="function"){
thrownewTypeError("Function.prototype.bind-
whatistryingtobeboundisnotcallable");
}
varaArgs=Array.prototype.slice.call(arguments,1),
fToBind=this,
fNOP=function(){},
fBound=function(){
returnfToBind.apply(thisinstanceoffNOP?
this:oThis||this,
aArgs.concat(Array.prototype.slice.call(arguments)));
};
fNOP.prototype=this.prototype;
fBound.prototype=newfNOP();
returnfBound;
};
}
上面的polyfill首先判断需要绑定的对象是否为函数，防止使用Function.prototype.bind.call(something)时，something不是一个函数造成未知错误。之后让需要返回的fBound函数继承自this，返回fBound。
特殊情况
当然，在某些情况下，this指针指向也存在一些意外。
箭头函数
ES6中新增了一种定义函数方式，使用"=>"进行函数的定义，在它的内部，this的指针不会改变，永远指向最外层的词法作用域。
varobj={
num:1,
getNum:function(){
returnfunction(){
//this丢失
console.log(this.num);
//此处的this指向window
}
}
}
obj.getNum()();//undefined
varobj2={
num:2,
getNum:function(){
return()=>console.log(this.num);
//箭头函数内部绑定外部getNum的this，外部this指向调用的对象
}
}
obj2.getNum()();//2
软绑定
上面提供的bind方法可以通过强制修正this指向，并且再不能通过call，apply进行修正。如果我们希望即能有bind效果，但是也能通过call和apply对函数进行二次修正，这个时候就需要我们重写一个建立在Function.prototype上的方法，我们给它起名为"软绑定"。
if(!Function.prototype.softBind){
Function.prototype.softbind=function(obj){
varself=this;
varargs=Array.prototype.slice.call(arguments,1);
returnfunction(){
returnself.apply((!this||this===(window||global))?
obj:this,
args.concat(Array.prototype.slice.call(arguments)));
}
}
}
bind，call的妙用
在平日里我们需要将伪数组元素变为正常的数组元素时，往往通过Array.prototype.slice方法，正如上面的实例那样。将arguments这个对象变为真正的数组对象，使用Array.prototype.slice.call(arguments)进行转化.。但是，每次使用这个方法太长而且繁琐。所以有时候我们就会这样写：
varslice=Array.prototype.slice; slice(arguments); //error
同样的问题还出现在：
varqsa=document.querySelectorAll; qsa(something); //error
上面的问题就出现在，内置的slice和querySelectorAll方法，内部使用了this，当我们简单引用时，this在运行时成为了全局环境window，当然会造成错误。我们只需要简单的使用bind，就能创建一个函数副本。
varqsa=document.querySelectorAll.bind(document); qsa(something);
同样的，使用因为call和apply也是一个函数，所以也可以在它们上面调用bind方法。从而使返回的函数的副本本身就带有修正指针的功能。
varslice=Function.prototype.call.bind(Array.prototype.slice); slice(arguments);
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或工作能带来一定的帮助，如果有疑问大家可以留言交流。