Javascript 对象中的函数范围与代码顺序答案

【问题标题】：Scope of functions vs. code order in Javascript objectsJavascript 对象中的函数范围与代码顺序
【发布时间】：2012-09-01 03:10:16
【问题描述】：

考虑一下这个 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);
    });
})();

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

【问题讨论】：

您需要了解javascript代码解析和评估顺序。看到这个：stackoverflow.com/questions/3887408/…
@slebetman +1 为您回答另一个问题。谢谢。

标签： javascript function object scope javascript-engine

【解决方案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 中的许多空白。

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

【讨论】：

很好的解释，明天会投票，因为我已经用完了当天所有的选票 :) 这是理解这些事情的额外资源，（由 John Resig 提供！）：ejohn.org/apps/learn
感谢您的解释。在设计对象时，我需要牢记这一点。

【解决方案2】：

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

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

【讨论】：