立即自我执行功能和“this”答案

【问题标题】：Immediately self executing function and "this"立即自我执行功能和“this”
【发布时间】：2011-05-26 13:03:51
【问题描述】：

我想创建一个 javascript 库，所以我认为让它成为一个立即自我执行的函数将是一件好事，以确保范围安全和一切。

但是现在我在使用“this”关键字时遇到了一个问题，我不太明白。

我怎样才能使这样的代码正常工作？目前，它告诉我“图像”未定义。

(function() {

    function lib() {
        this.image = document.getElementById("image");
        this.parts = [
            {name: "part1", num: "1"}
        ];

        this.init = function() {
            $(parts).each(function() {
                var partNum = this.num;
                image.getElementById(partNum).addEventListener("click", function() {
                    toggleHighlight(partNum);
                }, true);
            });
        };
    }

    window.lib = new lib();
})();

window.lib.init();

如何访问image 属性？

【问题讨论】：

您是否尝试过在 FireBug 或 Opera DragonFly 等工具中进行调试？大多数情况下，您可以看到当前范围是什么以及定义了哪些变量。

标签： javascript scope execute-immediate

【解决方案1】：

我认为您在这里有一些问题：

您在 init 函数中引用了 parts，而没有将其作为 this 的属性进行访问。
在each 块中，您将image 作为一个全局变量访问，但它没有被全局声明。您无法在该块中从this 访问image，因为在该上下文中，this 实际上设置为您正在迭代的项目。（这就是为什么您可以访问this.num。）

我建议你包含 var that = this;在您的 init 函数之前并在访问 that.image 之类的属性时使用它。

var that = this;
this.init = function() {
    $(this.parts).each(function() {
        var partNum = this.num;
        that.image.getElementById(partNum).addEventListener("click", function() {
            toggleHighlight(partNum);
        }, true);
    });
};

【讨论】：

【解决方案2】：

如果我理解正确，您希望从您提供给each 的匿名函数访问lib 函数内部定义的this.image 属性。为此，您需要保留 this 以使其在匿名函数中可用：

this.init = function() {
    var self = this;
    $(parts).each(function() {
        //do something with self.image
        self.image;
    });
};

【讨论】：

【解决方案3】：

您还应该将函数名称lib 的第一个字母大写，因为您希望它用作带有new 关键字的构造函数。看看 Javascript The Good Parts 的作者对constructor naming conventions in JavaScript 的看法。

【讨论】：