理解javascript中的Function.prototype.bind的方法
在初学Javascript时，我们也许不需要担心函数绑定的问题，但是当我们需要在另一个函数中保持上下文对象this时，就会遇到相应的问题了，我见过很多人处理这种问题都是先将this赋值给一个变量（比如self、_this、that等），尤其是varthat=this是我见的最多的，这样当你改变环境之后就可以使用它。这些都是可以的，但是还有一种更好的、更专有的方法，那就是使用Function.prototype.bind，下面进行详尽的讲解。
第一部分：需要解决的问题
首先看下面的代码
varmyObj={
specialFunction:function(){
},
anotherSpecialFunction:function(){
},
getAsyncData:function(cb){
cb();
},
render:function(){
this.getAsyncData(function(){
this.specialFunction();
this.anotherSpecialFunction();
});
}
};
myObj.render();
这里我希望创建一个对象，包含了前面两个普通的方法；第三个方法可以传递一个函数，传入的这个函数立即执行；最后一个方法会调用myObj对象的getAsyncData方法，这里使用了this，然后在getAsyncData方法中传入了一个函数，这个函数继续调用这个对象的前两个方法，仍使用了this，这时很多人实际上就可以看出问题所在了，将上述代码输入控制台，得到下面的结果：
TypeError:this.specialFunctionisnotafunction
第二部分：问题剖析
在对象中render方法中的this的确是指向myObj对象的，所以我们可以通过this.getAsyncData来调用这个对象中的函数，但是当我们给其传递函数作为参数时，这里的this就指向了全局环境window了，因为全局环境中没有对象中的前两个方法，所以才会报错。
第三部分：解决问题的几种方式
所以我们需要做的就是正确调用对象中的前两个方法，很多人使用的方法便是首先在对象的环境中获取this赋值给另一个变量，这时就可以在后面的环境中调用了，如下所示：
render:function(){
varthat=this;
this.getAsyncData(function(){
that.specialFunction();
that.anotherSpecialFunction();
});
}
虽然这种方法是可行的，但是使用Function.prototype.bind()会使代码更清晰、易懂，如下所示：
render:function(){
this.getAsyncData(function(){
this.specialFunction();
this.anotherSpecialFunction();
}.bind(this));
}
这里我们就成功地把this绑定到了环境中。
下面是另外一个简单的例子：
varfoo={
x:3
}
varbar=function(){
console.log(this.x);
}
bar();//undefined
varboundFunc=bar.bind(foo);
boundFunc();//3
下面的例子也是常见的：
this.x=9;//thisreferstoglobal"window"objecthereinthebrowser
varmodule={
x:81,
getX:function(){returnthis.x;}
};
module.getX();//81
varretrieveX=module.getX;
retrieveX();
//returns9-Thefunctiongetsinvokedattheglobalscope
//Createanewfunctionwith'this'boundtomodule
//Newprogrammersmightconfusethe
//globalvarxwithmodule'spropertyx
varboundGetX=retrieveX.bind(module);
boundGetX();//81
第四部分：浏览器支持
但是这个方法在IE8及以下是不被支持的，所以我们可以使用MDN提供的方法来使得IE低版本支持.bind()方法：
if(!Function.prototype.bind){
Function.prototype.bind=function(oThis){
if(typeofthis!=="function"){
//closestthingpossibletotheECMAScript5internalIsCallablefunction
thrownewTypeError("Function.prototype.bind-whatistryingtobeboundisnotcallable");
}
varaArgs=Array.prototype.slice.call(arguments,1),
fToBind=this,
fNOP=function(){},
fBound=function(){
returnfToBind.apply(thisinstanceoffNOP&&oThis
?this
:oThis,
aArgs.concat(Array.prototype.slice.call(arguments)));
};
fNOP.prototype=this.prototype;
fBound.prototype=newfNOP();
returnfBound;
};
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。