理解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; }; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。