立即自动执行功能和"这个"

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

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

• parts您在函数中引用init而不将其作为 的属性访问this。
• 在块内each，您作为全局变量进行访问image，但它并未全局声明。您无法image从this该块中进行访问，因为在该上下文中，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);
    });
};