javascript - 立即自执行函数和 "this"

Question

我想创建一个 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 属性？

Answer 1

我认为你这里有几个问题:

• 您在 init 函数中引用了 parts，但没有将其作为 this 的属性进行访问。
• 在 each block 中，您正在访问 image 作为全局变量，但它不是全局声明的。您无法从该 block 中的 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);
    });
};