Question

I want to create a javascript library, so I thought making it an immediately self executing function would be a nice thing to do to ensure scope safety and everything.

But now I’m running into a problem with using the “this” keyword that I don’t quite understand.

How can I make a code like this work correctly? Currently, it tells me that “image” is undefined.

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

How can I access the image property?

Answer 1

I think you have a few issues here:

• you are referencing parts in your init function without accessing it as a property of this.
• within the each block, you are accessing image as a global variable but it is not declared globally. You can’t access image from this in that block because in that context, this is actually set to the item you are iterating on. (That is why you can access this.num.)

I sugggest you include var that = this; before your init function and use it when accessing properties like 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);
    });
};