Question

Heres a bit of cleaned up code from a picture gallery im writing to learn js.
I create the gallery as an object but at some point i lose track of what “this” points to.
It doesnt make sense to me what happens at the bottom (look at the comments).
Can someone please explain?

function Gallery(parentID)
{
        // ...
    this.showDiv = document.createElement("div");
        // ...
    this.show = function ()
        {
        document.body.appendChild(this.showDiv); //will be given css absolute position to "pop up"
        this.showDiv.innerHTML = '<img class="displayImage" src="' + this.picList[this.showIndex] + '">'; //fill with image
        this.showDiv.focus();
        this.showDiv.onclick = this.hide;
        }   

    this.hide = function ()
        {
        alert(this.innerHTML); // <= WHY DOES THIS SHOW THE INNERHTML CONTENTS OF this.showDiv??????
            //alert(this.showDiv.innerHTML); // <= shouldnt this be correct?
        this.parentNode.removeChild(this); //doesnt work
        }
}

Let me know if i cleaned up some code that might have affected the results and ill fill it in.

Thanks.

Answer 1

    this.showDiv.onclick = this.hide;

This line is the problem. It doesn’t work like in Python; this.hide is not a bound method. It’s just the hide function, not bound to any particular this.

One way to fix it is:

    this.showDiv.onclick = this.hide.bind(this);

But the .bind() method of functions is a rather new standard; it isn’t in all old browsers. So you might want to roll your own instead:

function bindMethod(object, func) {
    return function () { return func.apply(object, arguments); };
}

this.showDiv.onclick = bindMethod(this, this.hide);

(Generally this is kind of strangely behaved in JavaScript; the main thing to remember is that this always refers to the innermost function’s this, which could be whatever the caller wants it to be. Sometimes you see JS code do things like var self = this; to give a particular function’s this a name that can be used in nested functions; in Python, of course, that is just sort of the way things work automatically.)