Question

考虑这个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"); }

这不应该也会失败吗？

P.S。我让我的对象工作，而不需要通过移动函数的位置来包装函数：

(function(){
    var self = this;

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

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

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

Answer 1

在此：

(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中的许多空白。

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

Answer 2

我认为你已经找到了问题所在。在您附加处理程序的那一刻，self.myFunction没有被定义，所以甚至没有连接处理程序。

但是当你像function(){ self.myFunction(); }那样打包电话时，self.myFunction被称为，此时会调用处理程序，而不是在它被附加时。

功能范围与Javascript对象中的代码顺序

2 个答案: