3

考虑这个 HTML：

<p>Click me</p>

我想为每个对象编写一个带有点击处理程序的对象p，但遇到了找不到我的点击处理程序函数的问题。

此代码不起作用：

(function(){
    var self = this;

    $("p").each(function(){
        $(this).click(self.myFunction);
    });

    self.myFunction = function(){ alert("myFunction"); }
})();​

当我将点击处理程序分配包装在一个函数中时，它确实有效：

(function(){
    var self = this;

    $("p").each(function(){
        $(this).click(function(){ self.myFunction(); });
    });

    self.myFunction = function(){ alert("myFunction"); }
})();

问题：为什么不起作用$(this).click(self.myFunction)，但起作用$(this).click(function(){ self.myFunction(); })？

编辑：以下代码确实有效：

$("p").click(myFunction);
function myFunction(){ alert("myFunction"); }

这也不应该失败吗？

PS我让我的对象工作而无需通过移动函数的位置来包装函数：

(function(){
    var self = this;

    self.myFunction = function(){ alert("myFunction"); }

    $("p").each(function(){
        $(this).click(self.myFunction);
    });
})();

我猜这个问题与解析器有关。

4

2 回答 2

3

在这：

(function(){
    var self = this;

    $("p").each(function(){
        $(this).click(self.myFunction);
    });

    self.myFunction = function(){ alert("myFunction"); }
})();?

立即评估引用，并且由于尚未放置任何内容self，因此失败。

这里：

(function(){
    var self = this;

    $("p").each(function(){
        $(this).click(function(){ self.myFunction(); });
    });

    self.myFunction = function(){ alert("myFunction"); }
})();

在实际发生点击时评估引用，在 self.myfunction 被分配到之后。

这实际上不是问题，而是有意的设计功能。

在这个例子中：

$("p").click(myFunction);
function myFunction(){ alert("myFunction"); }

函数名称被提升到范围的顶部。由于这个函数定义没有什么动态的（意味着它没有被动态分配给一个对象），它在整个范围内都可用，从上到下。

函数填补了 JavaScript 中的许多空白。

它们充当 lambdas、模块、方法、函数，可能还有更多我现在想不到的东西。

于 2012-09-07T08:46:05.630 回答
0

我想你已经弄清楚了你的问题。在您附加处理程序的那一刻，self.myFunction未定义，因此没有附加处理程序。

但是当您像 一样包装调用时，function(){ self.myFunction(); } thenself.myFunction在调用处理程序时被调用，而不是在附加时调用。

于 2012-09-07T08:44:14.590 回答