这是什么奇怪的JavaScript数组语法?

3

我在搜索谷歌和stackoverflow时遇到了一些问题,想知道这段JavaScript代码是做什么的:

obj['e'+type+fn]( window.event );

对我来说,这看起来像是一个带有参数/参数的数组元素:
array[index](argument);

然而,我只能猜测这是在做什么。这是否等同于:
array[index]=argument

哪个是将参数分配给数组元素的方法?

如果有人能提供一个简单/通用的例子来说明这是在做什么,那就太好了。我正在尝试解密John Resig的addEvent()实现。我不是真的在寻找与此实现相关的解释或例子,而是像MDC为调用所做的那样使用一些想象中的产品的例子。

4个回答

5
obj['e'+type+fn]( window.event );

这只是访问对象属性的一种方式。例如,如果您有一个对象

a = {
 name: 'someName'
 age: 20
};

您可以使用a.name或如上所示的a['name']来访问名称。
他使用[]符号的原因是可以从多个字符串构建键。
因此,如果type=clickfn=foo,则访问的是obj.eclickfoo。或者obj['eclickfoo'] 该对象的此属性必须是一个方法,因为他使用()调用它; 所以他再次说:
obj.eclickfoo( window.event );

或相当于

obj['eclickfoo']( window.event );

2
这就是它的作用:
从数组obj中取出索引为'e'+type+fn 的函数,然后传递window.event作为参数来执行它。
请记住,()调用一个函数,[]从数组中提取值。

1
这与运行类似于 obj.esome_typesome_function(window.event) 的内容相同,只是你所询问的符号允许你动态地组合属性名称。 - Jon Gauthier

0
obj['e'+type+fn]( window.event );

数组确实可以使用"obj[...]"表示法,但在JavaScript中任何对象都可以使用。在这种情况下,Resig正在为任何对象添加属性,特别是DOM对象。

obj['aVar']等同于obj.aVar。前者的优点是它也可以与JavaScript中保留有特殊含义的关键字一起使用(例如,如果您在对象上定义了一个名为“var”的属性,则可以使用obj ['var']),并允许动态访问属性名称,就像您的示例一样。由于type是一个变量,因此您不能执行obj.type,因为那将找到一个名为"type"的属性,而不是找到一个名称等于type变量值的属性。

由于对象(或数组)可以保存函数作为数据,因此您还可以在对象或数组中找到的函数上使用调用运算符(匹配的括号),就像这里所做的一样-访问属性(这是先前存储在对象上的“方法”或函数),然后使用window.event对象作为单个参数调用它。

函数还有一个内置的toString方法在它们的原型上(当你像这样将其连接到字符串时,将调用该方法,并且必须想要一个字符串,只要您没有在函数上设置自己的toString方法,因为函数在JavaScript中也是对象!)。 Resig的代码利用了这一点,有点随意地定义了一个新属性,这通常是一个坏主意,但以一种相当不太可能与其他应用程序添加此类属性发生冲突的方式。
所以如果document.bodyobj,如果type变量设置为"click",并且"fn"设置为function(){alert('boo!');},它实际上会将文档体对象上的一个属性命名为"eloadfunction(){alert('boo!');}"。正如他所解释的那样,创建此属性(然后在自己的匿名函数内部调用它)允许使用任何“this”关键字的函数具有正常行为-在这种情况下,this将引用父对象,即obj,而不是全局对象(除非obj是全局对象-即window对象)。

0

obj['e'+type+fn] 返回一个函数类型。然后使用 window.event 作为参数执行该函数。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接