立即具有自我执行功能和“ this”

问题描述

| 我想创建一个JavaScript库，因此我认为将其设置为立即可自动执行的功能对于确保范围安全和所有方面都是一件不错的事情。 但是现在我使用我不太了解的\“ this \”关键字遇到了问题。 我如何使这样的代码正常工作？目前，它告诉我\“ image \”未定义。

(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();

如何访问ѭ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);
    });
};

    ,如果我没错，您想从提供给

each

的匿名函数访问

lib

函数内部定义的

this.image

属性。为此，您需要保留

this

以使其在匿​​名函数中可用：

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

    ,您还应该将函数名称

lib

的首字母大写，因为您希望它与

new

关键字一起用作构造函数。看一看Javascript The Good Parts的作者对JavaScript中的构造函数命名约定的看法。