javascript - 对象没有方法 'apply'

Question

我正在动态地创建一些 DOM 元素，例如，

var anchorElement = jQuery('<a />',{text:property.text});
var liElement = jQuery('<li />',{"class":"navlink_"+i,id:"navlink_"+i});
anchorElement.on('click',property.fnctn);
liElement.append(anchorElement);
parentID.append(liElement);

其中 property 是一个 JSON 对象。 property.text 是我想放入 anchor 元素的文本。 (工作正常)

我想将点击事件处理程序附加到该 anchor 元素。 需要绑定(bind)到该元素的函数在 JSON 中指定，我们可以像这样访问它

property.fnctn

以下行应将事件处理程序绑定(bind)到 anchor 元素。

anchorElement.on('click',property.fnctn);

这行不通，所以我尝试将其转换为字符串，例如

anchorElement.on('click',property.fnctn.toString());

没有成功...

当我点击这个链接时，错误记录在控制台中

该对象没有“应用”方法。 这是什么原因……？？？

我可以通过像

这样的轻微变通来让它工作

anchorElement.attr('onclick',property.fnctn+"()");

上面的语句有效，但我想知道为什么 .on() API 不工作。

谢谢 :) AÐitya.

Answer 1

更新:

你说过 property.actfn 是一个字符串，"paySomeoneClick"。最好不要将字符串用于事件处理程序，而是使用函数。如果您希望调用字符串中定义的函数 paySomeoneClick，并且该函数是全局函数，您可以这样做:

anchorElement.on('click',function(event) {
    return window[property.fnctn](event);
});

这是可行的，因为全局函数是全局对象的属性，可以通过浏览器上的 window 访问，并且因为下面描述的括号符号。

如果函数在您引用的对象上，则:

anchorElement.on('click',function(event) {
    return theObject[property.fnctn](event);
});

之所以可行，是因为在 JavaScript 中，您可以通过两种方式访问​​对象的属性:使用文字属性名称的点符号(foo.bar 访问 bar 属性 foo) 和带字符串属性名称的括号表示法 (foo["bar"])。它们是等效的，当然除了括号中的符号外，字符串可以是表达式的结果，包括来自 property.fnctn 等属性值。

但我建议退后一步并进行一些重构，这样您就不会在字符串中传递函数名称。 有时这是正确的答案，但根据我的经验，这种情况并不常见。 :-)

原始答案:

(假设 property.fnctn 是一个函数，而不是字符串。但可能对某些人有用...)

代码

anchorElement.on('click',property.fnctn);

会将函数附加到事件，但在调用函数期间，this 将引用 DOM 元素，不是您的属性对象。

要解决这个问题，请使用 jQuery 的 $.proxy :

anchorElement.on('click',$.proxy(property.fnctn, property));

...或 ES5 的 Function#bind :

anchorElement.on('click',property.fnctn.bind(property));

...或闭包:

anchorElement.on('click',function(event) {
    return property.fnctn(event);
});

更多阅读(在我的博客上):

• Mythical methods
• You must remember this
• Closures are not complicated