大多数开发者不了解或不够关心JavaScript中的绑定,然而,正是这样一个问题在大多数JavaScript相关的支持渠道中才产生了相当一部分问题。每天开发者被折磨德有数以千计----如果不是数百万的法---的发丝落地。但是,只要对这个经常忽略的主体稍加留心,你就会节约时间、精力和耐心
,从而转向更为强大、有效的脚本。
我们为什么要关心绑定?
几乎大多数面向对象的程序语言(oop)没有强制你考虑绑定。也就是说,这些语言并不要求你明确的用一个诸如this或者self之类的参数使接近当前对象的成员(方法和属性)合格化。如果你在非特定对象上调用其方法,你常常是在当前对象上调用它。当你为以后的引用传递参数时也是一样:它仍保持在当前对象上。简言之,对于大多数面向对象的语言(oop),绑定是隐含的,这在java、c#、Ruby、Delphi和c++里是一样的,略举数例。
PHP和JavaScript要求你明确的声明你正在接触的对象,即使是当前对象也是一样(这也许是我宁愿将PHP和JavaScript放到一块的原因)
当然,从传统意义上讲,PHP和JavaScript都不是真正的面向对象。就PHP来说,作为事后诸葛,对象支持增加了,而不是草率行事。即使是在PHP5,函数也不是第一个值,许多oop特色都暗淡无光。JavaScript活力十足,依赖于“原型继承”,较之于类继承,它是一个与众不同的范式。这些差异并不马上与绑定问题相关,但是,它表明传统对象相关的语法和行为对JavaScript设计师没有多大的重要性。
在JavaScript中,绑定总是具体的,也容易丢失。因此,使用this的方法在所有情况下并不指向固有的对象,除非你强制它指向一个固有对象。总体来讲,JavaScript中的绑定是一个很难的概念,但是它经常被JavaScript程序员忽略和曲解,从而混淆视听。
让我们走进它
设想下面这个看起来无伤大雅的例子,它们实际的行为好像是多么的难以预料。
var john = {
name: 'John',
greet: function(person) {
alert("Hi " + person + ", my name is " + name);
}
};
john.greet("Mark");
// => "Hi Mark, my name is "
不可思议的事情发生了,name哪里去了?在这里,我们犯了一个绑定假设的错误:我们的方法仅仅指向name,JavaScript将在变量有效的几个层级上去寻找。最终以window结束。当然,我们的window拥有一个name属性,但它默认的值是空的,因此就没有name属性值显示。
试试看:
name = 'Ray'; // 或者具体些: window.name = 'Ray';
var john = {
name: 'John',
greet: function(person) {
alert("Hi " + person + ", my name is " + name);
}
};
john.greet("Mark");
// => "Hi Mark, my name is Ray"
一切正常,但毫无意义。我们需要的是对象name的属性,并不是window的name属性。在这里,明确的绑定是很重要的:
var john = {
name: 'John',
greet: function(person) {
alert("Hi " + person + ", my name is " + this.name);
}
};
john.greet("Mark");
// => "Hi Mark, my name is John"
注意到我们是如何在我们的name参数前面加上关键字this的:这就是具体绑定,它能真正的运行,抑或不能?
var john = {
name: 'John',
greet: function(person) {
alert("Hi " + person + ", my name is " + this.name);
}
};
var fx = john.greet;
fx("Mark");
// => "Hi Mark, my name is " (or "Hi Mark, my name »
is Ray" 取决于你在什么地方调试它)
也许你对将函数当作地一个值很陌生,所以var fx=john.greet看起来很怪异。这并不是调用greet方法,而是创建一个对它的引用-----如果你愿意。可称为方法的别名。因此,调用fx方法以调用greet方法结束。但是,我们似乎一下子糊涂了:我们明确的使用了关键字this,然而它不用john,给了什么?
这就是JavaScript绑定中很重要的问题----有时我称之为“绑定丢失”。当你通过一个引用而不是直接通过自己的对象接触一个方法时 ,他就会发生。这个方法失去了它隐含的绑定,this不再引用它自己的对象,并返回它原来默认的值,在这里是window(如果window拥有name属性,它将被采用)。
认识绑定敏感代码模式
绑定敏感代码模式包括传递参数引用,它通过两种可能的方法发生:要么将方法当作值分配,要么将方法当作参数传递(当你认真思考时,你发现其实质是一样的).
思考下面简单的类定义:
function Person(first, last, age) {
this.first = first;
this.last = last;
this.age = age;
}
Person.prototype = {
getFullName: function() {
alert(this.first + ' ' + this.last);
},
greet: function(other) {
alert("Hi " + other.first + ", I'm " + »
this.first + ".");
}
};
试试看:
var elodie = new Person('Elodie', 'Jaubert', 27);
var christophe = new Person('Christophe', »
'Porteneuve', 30);
christophe.greet(elodie);
// => "Hi Elodie, I'm Christophe."
到目前为止看起来很好,让我们在前面添加以下代码:
function times(n, fx, arg) {
for (var index = 0; index < n; ++index) {
fx(arg);
}
}
times(3, christophe.greet, elodie);
// => Three times "Hi Elodie, I'm undefined."
times(1, elodie.getFullName);
// => "undefined undefined"
啊!我们困惑了,未定义什么?当我们将greet和getFullName作为参数传递时,它们的this引用指向window对象,该对象没有first和last属性,我们因此失去了绑定。
正如我们所做的一样,当你笨拙的手写JavaScript代码时,你通常会更加意识到这些问题,但是,当你依赖框架处理这些基本问题时,绑定会使你困惑,它只需要你写出几行简单的代码即可,思考下面基于原型的代码片断:
this.items.each(function(item) {
// Process item
this.markItemAsProcessed(item);
});
这些代码会触发一个错误——声明markItemAsProcessed方法undefined。为什么是那样?因为你仅仅传递一个引用给一个匿名函数。因此,this在那里指向window,并不是指向每一个的外部对象。这是一个非常普遍的错误,在关于框架问题有机列表中占了相当一部分份额。
绑定具体化
因此,我们应该如何固定它?我们使绑定具体化——也就是说,在一个被调用的方法内明确声明this的指向。现在我们该如何做?JavaScript给了我们两种选择:apply和call。
Apply
每个JavaScript函数都配有一个apply方法,它允许你在特定的绑定中调用那个函数(如果你愿意,就是一个具体的this)。它接受两个参数:绑定的对象,一个传递给函数的参数数组,这里有一个基于我们前面代码的例子:
var fx = christophe.greet;
fx.apply(christophe, [elodie]);
// => "Hi Elodie, I'm Christophe."
一个数组的好处在于你调用apply时无须进一步知道它将接受那个参数。你可以写出世纪的参数列表——构建任何你想要的数组并传递给它。在你传给它之前,你可以接受一个已经存在的参数数组并将它改进成你想要得内容。
Call
当你想知道传递的是那个特定参数时,call将使你如愿以偿,它接受参数自身,而不是参数数组。
var fx = christophe.greet;
fx.call(christophe, elodie);
// => "Hi Elodie, I'm Christophe."
但是,call失去了数组的灵活性,一切取决于特定的环境:抛却它们之间的差异,apply和call拥有同样的语义和行为。
顺便提一句,方法并不真正属于你绑定的对象,只要它使用this时在各方面与绑定的对象(提示:在绑定的对象内成员存在)兼容,我们就能明确。这种灵活性时可能的——因为JavaScript是在运行时解析成员的动态语言,此特色有时称为“晚绑定”。在每一种程序语言中(如Perl, Ruby, Python, PHP),你也将会发现晚绑定,偶尔也包括OLE Automation。
如释重负
很高兴有一种方法来指定绑定。但问题是,你仅仅只能在引用时段内来指定它,即你不能提前指定它,让它在合适的时候使其它代码引用你正常绑定的方法。这是一个大问题,因为我们传递方法参数时,我们欲使其它代码选择何时引用。
因此,我们需要的是永久的绑定一个方法,这样我们就取得一个限定的方法参数。能达到此目的的唯一途径是将其原始的方法封装在另一个之中,,让它在内部调用apply方法,下面是一次尝试:
function createBoundedWrapper(object, method) {
return function() {
return method.apply(object, arguments);
};
}
如果你对JavaScript不够热心,上面的代码未免让你糊涂。其思想在于用一个假定的对象调用createBoundedWrapper方法(情理上属于所说的对象),该方法生成一个新的函数(我们返回的匿名函数)。
被调用的函数接受原来的方法并调用apply方法,它传递的是:
1.原始对象的绑定(名叫object的变量)和
2.在调用期间,作为参数传递的数组。
(每个函数都有一个自动参数变量,它就象我们传递给它的所有数组组成的数组)
试试看:
var chrisGreet = createBoundedWrapper(christophe, »
christophe.greet);
chrisGreet(elodie);
// "Hi Elodie, I'm Christophe."
哈哈,执行了!我们创建了一个基于christophe和它的greet方法的限定方法参数。
JavaScript框架中的绑定
我们的createBoundedWrapper函数是干净的,但有点笨拙,如果你精于JavaScript工作,你可能依赖于框架去解决浏览器的兼容性、方便的DOM操作以及壮大JavaScript。因此,让我们看看一些流行的JavaScript框架是如何处理方法绑定的。
Prototype
Prototype有很长的备用函数,你仅仅需要这样做就行:
var chrisGreet = christophe.greet.bind(christophe);
chrisGreet(elodie);
到目前为止,太少的人知道绑定也可以让你做“局部应用”——也就是说,预填充一个或者更多的参数。例如,你有一个toggle专栏状态的方法:
var coolBehavior = {
// ...
toggle: function(enabled) {
this.enabled = enabled;
// ...
},
// ...
};
你可以很容易的定义两种快捷方式——enable和disable,如下:
coolBehavior.enable = coolBehavior.toggle.bind »
(coolBehavior, true);
coolBehavior.disable = coolBehavior.toggle.bind »
(coolBehavior, false);
// And then:
coolBehavior.enable();
正确使用要注意:有时,如果对绑定没有兴趣,绑定仅用来预填充,有点像下面你看到的代码:
function times (count, fx) {
for (var index = 0; index < count; ++index) {
fx();
}
}
// ...
var threeTimes = times.bind(null, 3);
// ...
threeTimes(someFunction);
作为旁注,在Prototype 1.6中,如果你对预填充感兴趣,你更喜欢curry——它保持当前的绑定,集中在参数的预填充上。
var threeTimes = times.curry(3);
Ext JS
Ext JS库通过给一个名为createDelegate添加方法来适应绑定,其语法就像这样:
method.createDelegate(scope[, argArray] [, appendArgs = false])
首先,你声明的额外的参数需要作为数组提供,而不是在一行,即myMethod.createDelegate(scope, [arg1, arg2]), 而不是 myMethod.createDelegate(scope, arg1, arg2).
另外一个重要的细微差别是在调用的时候,这些参数将替代你传递的参数,而不是局部应用。如果你需要的是后者,你需要传递true(它附加参数数组,Prototype则追加到前面)或者作为第三个参数插入其中(一般来说,用0作为前导),这里有一个从API文档中摘出来的例子:
var fn = scope.func1.createDelegate(scope, [arg1, arg2], true);
fn(a, b, c); // => scope.func1(a, b, c, arg1, arg2);
var fn = scope.func1.createDelegate(scope, [arg1, arg2]);
fn(a, b, c); // => scope.func1(arg1, arg2);
var fn = scope.func1.createDelegate(scope, [arg1, arg2], 1);
fn(a, b, c); // => scope.func1(a, arg1, arg2, b, c);
Dojo
Dojo工具包也满足方法绑定,它有一个搞笑的名字——hitch,语法如下:
dojo.hitch(scope, methodOrMethodName[, arg…])
有意思的是,这些方法要么直接传递,要么用它的名字。额外的参数(如果有的法)在实际运行期之前传递,这里有一些例子:
var fn = dojo.hitch(scope, func1)
fn(a, b, c); // => scope.func1(a, b, c);
var fn = dojo.hitch(scope, func1, arg1, arg2)
fn(a, b, c); // => scope.func1(arg1, arg2, a, b, c);
Base2
Dean Edwards 华丽的Base2库扮演的好似所有JavaScript库拥有的共同点的角色,在JavaScript运行期间,它忽略了所有烦人的分歧。它承认绑定是需要的,并提供了一个简单的绑定函数。
base2.bind(method, scope[, arg]);
注意:作用域对象在第二位,并不是第一个。除此之外,其语法与Prototype的bind或者Dojo的hitch严格等同。
var fn = base2.bind(func1, scope)
fn(a, b, c); // => scope.func1(a, b, c);
var fn = base2.bind(func1, scope, arg1, arg2)
fn(a, b, c); // => scope.func1(arg1, arg2, a, b, c);
jQuery
jQuery库不提供如此的绑定机制,该库的哲学是偏袒闭包胜过绑定,当用户需要传递一条称之为“实例成员”的代码时,它会强迫它们去经历一些苦衷(也就是说,手动的方式联合语义上的闭包和Apply或者call,与其它库在内部实现不同)。
你应该适时地绑定
现在我们已经浏览到了绑定的细节,我们的公平的说,有些时候绑定有点矫枉过正了。具体来说,较之于显著的性能回报,代码模式中的绑定可以被语义上的闭包代替(如果你不明白什么是闭包,不要惊慌。)
这里有一种模式:一些代码的方法依赖于一个匿名函数,该函数通过传递参数工作。那些匿名函数需要接触到环境中方法的this关键字。例如,假设一分钟,我们在一个数组里迭代每一项,再次思考下面的代码:
// ...
processItems: function() {
this.items.each(function(item) {
// Process item…
this.markItemAsProcessed(item);
});
},
// ...
这里的问题是:拥有实际处理过程的匿名函数是作为变量传递到每一个迭代对象的。因此,它失去了当前的绑定。当它尝试去调用this.markItemAsProcessed()时,因为window没有此方法,故而失败。
多数开发者非常迅速的用绑定来固定。如用Prototype,他们添加了如下的方法:
// ...
processItems: function() {
this.items.each(function(item) {
// Process item
this.markItemAsProcessed(item);
}.bind(this));
},
// ...
注意:加上去的称之为绑定。但是,此代码看起来不是一个好主意。我们看到,实现这种“限定参数”要求我们将原始的方法封装在一个匿名函数之内。这意味着调用界定方法参数会导致两个方法的调用:我们的匿名包和原始的方法。如果对任何语言有一件事是正确的法,那就是call方法的代价是昂贵的。
在这种情况下,我们就要使用原始的、我们在同一代码位置定义的预期的this关键字,并调用这个有待完善的函数(我们将其作为一个参数传递给每个对象的匿名函数)。我们简单在局部变量中存储这个正常的this参数,然后再迭代函数内部使用它。
// ...
processItems: function() {
var that = this;
this.items.each(function(item) {
// Process item
that.markItemAsProcessed(item);
});
},
// ..
瞧!没有绑定,这些代码使用了一个称之为“语义闭包”的语言特色。简而言之,闭包 能使代码在A处使用环境A中定义的标识符。在这儿,我们的匿名函数使用环境中函数的变量——我的processItems方法。无论如何,这样一个闭包在JavaScript执行期间维持。因此,使用它也无须付出额外的代价。即使有,我也很有自信的认为,其成本远远低于每一个交替循环 调用额外函数的成本。
小心你的闭包:有时候闭包提供更简单、更短小、更好的方法(正因为如此,我认为为什么“jQuery”让用户以手动的方式来处理绑定,这样能使他们对每一种情况能做出最佳选择)。同时,闭包也有自身的一些问题——使用不当,他们会导致某些浏览器内存泄漏,这里我推荐的用法是相当安全的。
外卖点(我实在不知道如何翻译)
摘要:
. 任何使用的成员在相关的对象内必须合格化,即使是this。
. 任何形式的函数引用(作为值分配,作为参数传递)失去原有函数的绑定。
. JavaScript提供了两个等价的方法明确函数调用是的绑定:Apply和call.
. 创建一个“界定方法参数”需要一个匿名封装函数和调用成本。在特定情况下,利用闭包也许使更好的选择。
现在,在这篇文章的帮助下,你将对绑定没有什么疑虑了吧 !
原文地址: http://www.alistapart.com/articles/getoutbindingsituations
译文地址: http://blog.myspace.cn/130773114 ... 8/14/402009066.aspx
我们为什么要关心绑定?
几乎大多数面向对象的程序语言(oop)没有强制你考虑绑定。也就是说,这些语言并不要求你明确的用一个诸如this或者self之类的参数使接近当前对象的成员(方法和属性)合格化。如果你在非特定对象上调用其方法,你常常是在当前对象上调用它。当你为以后的引用传递参数时也是一样:它仍保持在当前对象上。简言之,对于大多数面向对象的语言(oop),绑定是隐含的,这在java、c#、Ruby、Delphi和c++里是一样的,略举数例。
PHP和JavaScript要求你明确的声明你正在接触的对象,即使是当前对象也是一样(这也许是我宁愿将PHP和JavaScript放到一块的原因)
当然,从传统意义上讲,PHP和JavaScript都不是真正的面向对象。就PHP来说,作为事后诸葛,对象支持增加了,而不是草率行事。即使是在PHP5,函数也不是第一个值,许多oop特色都暗淡无光。JavaScript活力十足,依赖于“原型继承”,较之于类继承,它是一个与众不同的范式。这些差异并不马上与绑定问题相关,但是,它表明传统对象相关的语法和行为对JavaScript设计师没有多大的重要性。
在JavaScript中,绑定总是具体的,也容易丢失。因此,使用this的方法在所有情况下并不指向固有的对象,除非你强制它指向一个固有对象。总体来讲,JavaScript中的绑定是一个很难的概念,但是它经常被JavaScript程序员忽略和曲解,从而混淆视听。
让我们走进它
设想下面这个看起来无伤大雅的例子,它们实际的行为好像是多么的难以预料。
var john = {
name: 'John',
greet: function(person) {
alert("Hi " + person + ", my name is " + name);
}
};
john.greet("Mark");
// => "Hi Mark, my name is "
不可思议的事情发生了,name哪里去了?在这里,我们犯了一个绑定假设的错误:我们的方法仅仅指向name,JavaScript将在变量有效的几个层级上去寻找。最终以window结束。当然,我们的window拥有一个name属性,但它默认的值是空的,因此就没有name属性值显示。
试试看:
name = 'Ray'; // 或者具体些: window.name = 'Ray';
var john = {
name: 'John',
greet: function(person) {
alert("Hi " + person + ", my name is " + name);
}
};
john.greet("Mark");
// => "Hi Mark, my name is Ray"
一切正常,但毫无意义。我们需要的是对象name的属性,并不是window的name属性。在这里,明确的绑定是很重要的:
var john = {
name: 'John',
greet: function(person) {
alert("Hi " + person + ", my name is " + this.name);
}
};
john.greet("Mark");
// => "Hi Mark, my name is John"
注意到我们是如何在我们的name参数前面加上关键字this的:这就是具体绑定,它能真正的运行,抑或不能?
var john = {
name: 'John',
greet: function(person) {
alert("Hi " + person + ", my name is " + this.name);
}
};
var fx = john.greet;
fx("Mark");
// => "Hi Mark, my name is " (or "Hi Mark, my name »
is Ray" 取决于你在什么地方调试它)
也许你对将函数当作地一个值很陌生,所以var fx=john.greet看起来很怪异。这并不是调用greet方法,而是创建一个对它的引用-----如果你愿意。可称为方法的别名。因此,调用fx方法以调用greet方法结束。但是,我们似乎一下子糊涂了:我们明确的使用了关键字this,然而它不用john,给了什么?
这就是JavaScript绑定中很重要的问题----有时我称之为“绑定丢失”。当你通过一个引用而不是直接通过自己的对象接触一个方法时 ,他就会发生。这个方法失去了它隐含的绑定,this不再引用它自己的对象,并返回它原来默认的值,在这里是window(如果window拥有name属性,它将被采用)。
认识绑定敏感代码模式
绑定敏感代码模式包括传递参数引用,它通过两种可能的方法发生:要么将方法当作值分配,要么将方法当作参数传递(当你认真思考时,你发现其实质是一样的).
思考下面简单的类定义:
function Person(first, last, age) {
this.first = first;
this.last = last;
this.age = age;
}
Person.prototype = {
getFullName: function() {
alert(this.first + ' ' + this.last);
},
greet: function(other) {
alert("Hi " + other.first + ", I'm " + »
this.first + ".");
}
};
试试看:
var elodie = new Person('Elodie', 'Jaubert', 27);
var christophe = new Person('Christophe', »
'Porteneuve', 30);
christophe.greet(elodie);
// => "Hi Elodie, I'm Christophe."
到目前为止看起来很好,让我们在前面添加以下代码:
function times(n, fx, arg) {
for (var index = 0; index < n; ++index) {
fx(arg);
}
}
times(3, christophe.greet, elodie);
// => Three times "Hi Elodie, I'm undefined."
times(1, elodie.getFullName);
// => "undefined undefined"
啊!我们困惑了,未定义什么?当我们将greet和getFullName作为参数传递时,它们的this引用指向window对象,该对象没有first和last属性,我们因此失去了绑定。
正如我们所做的一样,当你笨拙的手写JavaScript代码时,你通常会更加意识到这些问题,但是,当你依赖框架处理这些基本问题时,绑定会使你困惑,它只需要你写出几行简单的代码即可,思考下面基于原型的代码片断:
this.items.each(function(item) {
// Process item
this.markItemAsProcessed(item);
});
这些代码会触发一个错误——声明markItemAsProcessed方法undefined。为什么是那样?因为你仅仅传递一个引用给一个匿名函数。因此,this在那里指向window,并不是指向每一个的外部对象。这是一个非常普遍的错误,在关于框架问题有机列表中占了相当一部分份额。
绑定具体化
因此,我们应该如何固定它?我们使绑定具体化——也就是说,在一个被调用的方法内明确声明this的指向。现在我们该如何做?JavaScript给了我们两种选择:apply和call。
Apply
每个JavaScript函数都配有一个apply方法,它允许你在特定的绑定中调用那个函数(如果你愿意,就是一个具体的this)。它接受两个参数:绑定的对象,一个传递给函数的参数数组,这里有一个基于我们前面代码的例子:
var fx = christophe.greet;
fx.apply(christophe, [elodie]);
// => "Hi Elodie, I'm Christophe."
一个数组的好处在于你调用apply时无须进一步知道它将接受那个参数。你可以写出世纪的参数列表——构建任何你想要的数组并传递给它。在你传给它之前,你可以接受一个已经存在的参数数组并将它改进成你想要得内容。
Call
当你想知道传递的是那个特定参数时,call将使你如愿以偿,它接受参数自身,而不是参数数组。
var fx = christophe.greet;
fx.call(christophe, elodie);
// => "Hi Elodie, I'm Christophe."
但是,call失去了数组的灵活性,一切取决于特定的环境:抛却它们之间的差异,apply和call拥有同样的语义和行为。
顺便提一句,方法并不真正属于你绑定的对象,只要它使用this时在各方面与绑定的对象(提示:在绑定的对象内成员存在)兼容,我们就能明确。这种灵活性时可能的——因为JavaScript是在运行时解析成员的动态语言,此特色有时称为“晚绑定”。在每一种程序语言中(如Perl, Ruby, Python, PHP),你也将会发现晚绑定,偶尔也包括OLE Automation。
如释重负
很高兴有一种方法来指定绑定。但问题是,你仅仅只能在引用时段内来指定它,即你不能提前指定它,让它在合适的时候使其它代码引用你正常绑定的方法。这是一个大问题,因为我们传递方法参数时,我们欲使其它代码选择何时引用。
因此,我们需要的是永久的绑定一个方法,这样我们就取得一个限定的方法参数。能达到此目的的唯一途径是将其原始的方法封装在另一个之中,,让它在内部调用apply方法,下面是一次尝试:
function createBoundedWrapper(object, method) {
return function() {
return method.apply(object, arguments);
};
}
如果你对JavaScript不够热心,上面的代码未免让你糊涂。其思想在于用一个假定的对象调用createBoundedWrapper方法(情理上属于所说的对象),该方法生成一个新的函数(我们返回的匿名函数)。
被调用的函数接受原来的方法并调用apply方法,它传递的是:
1.原始对象的绑定(名叫object的变量)和
2.在调用期间,作为参数传递的数组。
(每个函数都有一个自动参数变量,它就象我们传递给它的所有数组组成的数组)
试试看:
var chrisGreet = createBoundedWrapper(christophe, »
christophe.greet);
chrisGreet(elodie);
// "Hi Elodie, I'm Christophe."
哈哈,执行了!我们创建了一个基于christophe和它的greet方法的限定方法参数。
JavaScript框架中的绑定
我们的createBoundedWrapper函数是干净的,但有点笨拙,如果你精于JavaScript工作,你可能依赖于框架去解决浏览器的兼容性、方便的DOM操作以及壮大JavaScript。因此,让我们看看一些流行的JavaScript框架是如何处理方法绑定的。
Prototype
Prototype有很长的备用函数,你仅仅需要这样做就行:
var chrisGreet = christophe.greet.bind(christophe);
chrisGreet(elodie);
到目前为止,太少的人知道绑定也可以让你做“局部应用”——也就是说,预填充一个或者更多的参数。例如,你有一个toggle专栏状态的方法:
var coolBehavior = {
// ...
toggle: function(enabled) {
this.enabled = enabled;
// ...
},
// ...
};
你可以很容易的定义两种快捷方式——enable和disable,如下:
coolBehavior.enable = coolBehavior.toggle.bind »
(coolBehavior, true);
coolBehavior.disable = coolBehavior.toggle.bind »
(coolBehavior, false);
// And then:
coolBehavior.enable();
正确使用要注意:有时,如果对绑定没有兴趣,绑定仅用来预填充,有点像下面你看到的代码:
function times (count, fx) {
for (var index = 0; index < count; ++index) {
fx();
}
}
// ...
var threeTimes = times.bind(null, 3);
// ...
threeTimes(someFunction);
作为旁注,在Prototype 1.6中,如果你对预填充感兴趣,你更喜欢curry——它保持当前的绑定,集中在参数的预填充上。
var threeTimes = times.curry(3);
Ext JS
Ext JS库通过给一个名为createDelegate添加方法来适应绑定,其语法就像这样:
method.createDelegate(scope[, argArray] [, appendArgs = false])
首先,你声明的额外的参数需要作为数组提供,而不是在一行,即myMethod.createDelegate(scope, [arg1, arg2]), 而不是 myMethod.createDelegate(scope, arg1, arg2).
另外一个重要的细微差别是在调用的时候,这些参数将替代你传递的参数,而不是局部应用。如果你需要的是后者,你需要传递true(它附加参数数组,Prototype则追加到前面)或者作为第三个参数插入其中(一般来说,用0作为前导),这里有一个从API文档中摘出来的例子:
var fn = scope.func1.createDelegate(scope, [arg1, arg2], true);
fn(a, b, c); // => scope.func1(a, b, c, arg1, arg2);
var fn = scope.func1.createDelegate(scope, [arg1, arg2]);
fn(a, b, c); // => scope.func1(arg1, arg2);
var fn = scope.func1.createDelegate(scope, [arg1, arg2], 1);
fn(a, b, c); // => scope.func1(a, arg1, arg2, b, c);
Dojo
Dojo工具包也满足方法绑定,它有一个搞笑的名字——hitch,语法如下:
dojo.hitch(scope, methodOrMethodName[, arg…])
有意思的是,这些方法要么直接传递,要么用它的名字。额外的参数(如果有的法)在实际运行期之前传递,这里有一些例子:
var fn = dojo.hitch(scope, func1)
fn(a, b, c); // => scope.func1(a, b, c);
var fn = dojo.hitch(scope, func1, arg1, arg2)
fn(a, b, c); // => scope.func1(arg1, arg2, a, b, c);
Base2
Dean Edwards 华丽的Base2库扮演的好似所有JavaScript库拥有的共同点的角色,在JavaScript运行期间,它忽略了所有烦人的分歧。它承认绑定是需要的,并提供了一个简单的绑定函数。
base2.bind(method, scope[, arg]);
注意:作用域对象在第二位,并不是第一个。除此之外,其语法与Prototype的bind或者Dojo的hitch严格等同。
var fn = base2.bind(func1, scope)
fn(a, b, c); // => scope.func1(a, b, c);
var fn = base2.bind(func1, scope, arg1, arg2)
fn(a, b, c); // => scope.func1(arg1, arg2, a, b, c);
jQuery
jQuery库不提供如此的绑定机制,该库的哲学是偏袒闭包胜过绑定,当用户需要传递一条称之为“实例成员”的代码时,它会强迫它们去经历一些苦衷(也就是说,手动的方式联合语义上的闭包和Apply或者call,与其它库在内部实现不同)。
你应该适时地绑定
现在我们已经浏览到了绑定的细节,我们的公平的说,有些时候绑定有点矫枉过正了。具体来说,较之于显著的性能回报,代码模式中的绑定可以被语义上的闭包代替(如果你不明白什么是闭包,不要惊慌。)
这里有一种模式:一些代码的方法依赖于一个匿名函数,该函数通过传递参数工作。那些匿名函数需要接触到环境中方法的this关键字。例如,假设一分钟,我们在一个数组里迭代每一项,再次思考下面的代码:
// ...
processItems: function() {
this.items.each(function(item) {
// Process item…
this.markItemAsProcessed(item);
});
},
// ...
这里的问题是:拥有实际处理过程的匿名函数是作为变量传递到每一个迭代对象的。因此,它失去了当前的绑定。当它尝试去调用this.markItemAsProcessed()时,因为window没有此方法,故而失败。
多数开发者非常迅速的用绑定来固定。如用Prototype,他们添加了如下的方法:
// ...
processItems: function() {
this.items.each(function(item) {
// Process item
this.markItemAsProcessed(item);
}.bind(this));
},
// ...
注意:加上去的称之为绑定。但是,此代码看起来不是一个好主意。我们看到,实现这种“限定参数”要求我们将原始的方法封装在一个匿名函数之内。这意味着调用界定方法参数会导致两个方法的调用:我们的匿名包和原始的方法。如果对任何语言有一件事是正确的法,那就是call方法的代价是昂贵的。
在这种情况下,我们就要使用原始的、我们在同一代码位置定义的预期的this关键字,并调用这个有待完善的函数(我们将其作为一个参数传递给每个对象的匿名函数)。我们简单在局部变量中存储这个正常的this参数,然后再迭代函数内部使用它。
// ...
processItems: function() {
var that = this;
this.items.each(function(item) {
// Process item
that.markItemAsProcessed(item);
});
},
// ..
瞧!没有绑定,这些代码使用了一个称之为“语义闭包”的语言特色。简而言之,闭包 能使代码在A处使用环境A中定义的标识符。在这儿,我们的匿名函数使用环境中函数的变量——我的processItems方法。无论如何,这样一个闭包在JavaScript执行期间维持。因此,使用它也无须付出额外的代价。即使有,我也很有自信的认为,其成本远远低于每一个交替循环 调用额外函数的成本。
小心你的闭包:有时候闭包提供更简单、更短小、更好的方法(正因为如此,我认为为什么“jQuery”让用户以手动的方式来处理绑定,这样能使他们对每一种情况能做出最佳选择)。同时,闭包也有自身的一些问题——使用不当,他们会导致某些浏览器内存泄漏,这里我推荐的用法是相当安全的。
外卖点(我实在不知道如何翻译)
摘要:
. 任何使用的成员在相关的对象内必须合格化,即使是this。
. 任何形式的函数引用(作为值分配,作为参数传递)失去原有函数的绑定。
. JavaScript提供了两个等价的方法明确函数调用是的绑定:Apply和call.
. 创建一个“界定方法参数”需要一个匿名封装函数和调用成本。在特定情况下,利用闭包也许使更好的选择。
现在,在这篇文章的帮助下,你将对绑定没有什么疑虑了吧 !
原文地址: http://www.alistapart.com/articles/getoutbindingsituations
译文地址: http://blog.myspace.cn/130773114 ... 8/14/402009066.aspx