JavaScript中的this关键字

在JavaScript中,this通常绑定到函数被调用的对象上,这种默认绑定在多数情况下是正常的,但是在某些情况下,this的这种绑定会丢失,比如,将函数作为参数传递给另外一个函数,这种默认的绑定就丢失了,例如:

var myObj = {
   name: 'A nice demo!',
   fx: function() {
      alert(this.name);
   }
};

function runFx(fx) {
   fx();
}

window.name = 'I am a nice window';

myObj.fx();  // 在这里,将会提示 A nice demo!

runFx(myObj.fx); // 在这里,得到的提示将会是 I am a nice window

为什么会出现这种情况呢?因为在第二次调用中,myObj.fx作为参数传递给了runFx,在函数runFx中执行时fx丢失了对myObj的默认绑定,而绑定到了runFx的默认绑定window上,所以第二次调用时得到的提示为I am a nice window,而这个往往不是我们需要的结果。

在Ajax横行的今天,要编写复杂的客户端组件,不可避免的要将函数名作为参数传递,Prototype注意到了这个问题,MS ASP.Net Ajax也注意到了这个问题,不知道你注意了没有?

Prototype提供的解决方案是bind方法,在Prototype的官方文档给出的描述是:Provides aguaranteed-binding equivalent of the original function, possibly with pre-filled arguments. 上面的例子如果使用Prototype的话,可以修改如下:

var myObj = {
   name: 'A nice demo!',
   fx: function() {
      alert(this.name);
   }
};

function runFx(fx) {
   fx();
}

window.name = 'I am a nice window';

myObj.fx();  // 在这里,将会提示 A nice demo!

var fx2 = myObj.fx.bind(myObj) // 先做一个绑定,
runFx(fx2); // 在这里,得到的提示将会是 A nide demo !这个往往是我们需要的结果

MS Ajax提供的解决方案是Function.createDelegate函数,createDelegate方法是个静态方法,可以直接调用。如果使用MS Ajax库的话,可以将上面的例子修改为:

var myObj = {
   name: 'A nice demo!',
   fx: function() {
      alert(this.name);
   }
};

function runFx(fx) {
   fx();
}

window.name = 'I am a nice window';

myObj.fx();  // 在这里,将会提示 A nice demo!

var fx2 = Function.createDelegate(myObj, myObj.fx) // 按照微软的说法,先做一个委托,
runFx(fx2); // 在这里,得到的提示将会是 A nide demo !这个往往是我们需要的结果

这看起来只是一个小问题,但是如果不注意的话却会造成很大的问题。引用Prototype中的原话:As discussed on the general Function page,binding can be a pretty tricky thing sometimes.

张志敏所有文章遵循创作共用版权协议,要求署名、非商业 、保持一致。在满足创作共用版权协议的基础上可以转载,但请以超链接形式注明出处。

本博客已经迁移到 GitHub , 围观地址: https://beginor.github.io/

posted @ 2007-03-12 23:53  张志敏  阅读(2370)  评论(17编辑  收藏  举报