javascript - 函数范围与 Javascript 对象中的代码顺序

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"); }

这不应该也失败吗？

---

附言我通过移动函数的位置使我的对象工作而无需包装函数:

(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、模块、方法、函数，可能还有更多我现在想不到的东西。