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 = this;在你的init函数之前，在访问像.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);
    });
};

Answer 2

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

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

Answer 3

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

立即自动执行功能和“这个”

3 个答案: