Why is instance variable undefined?

Question

I dont understand one thing:

 var comein = document.getElementById("comein");

 var enter = new Expand({ elem : comein });

function Expand (options) {
    this._elem = options.elem;
    console.log(this._elem); // i have a div element    
}

Expand.prototype = {        
    check : function () {

        var comInClassName = this._elem.className; // i have an error: this._elem is undefined

        if (comInClassName == "open"){
          this.close();
        }
        if (comInClassName == "close"){
          this.open();
        }
    }
}
log_in.addEventListener("click",  enter.check, false);

Why I have an error in prototype method if in Expand i have a normal element? Thanks

How exactly are you calling the "check" function?

Pointy
– Pointy

2013-02-11 16:30:40 +00:00
Commented Feb 11, 2013 at 16:30 — Pointy
– Pointy, Commented Feb 11, 2013 at 16:30
log_in.addEventListener("click", enter.check, false);

socm_
– socm_

2013-02-11 16:36:34 +00:00
Commented Feb 11, 2013 at 16:36 — socm_
– socm_, Commented Feb 11, 2013 at 16:36

T.J. Crowder · Accepted Answer · 2013-02-11 16:37:19Z

6

It depends entirely on how you call check. If you call it like this:

enter.check();

....then within the call, this will refer to the enter object and it will have an _elem property. If, on the other hand, you set it up to be called like this:

enter._elem.addEventListener('click', enter.check, false);

...then within the call (when the event occurs), this will not refer to enter, but rather to this._elem, and so it has no _elem property.

This happens because in JavaScript (for now), this within a function call is defined entirely by how the function is called, not where the function is defined. If you call it as part of an expression retrieving the function reference from an object:

enter.check();

...then this refers to the object you got the function reference from. But if you call it separately, as with the addEventListener call above, it doesn't.

If you're on an ECMAScript5-enabled environment (or if you have a decent ES5 shim in place), you can fix that by using Function#bind:

enter._elem.addEventListener('click', enter.check.bind(enter), false);

bind returns a function that, when called, will turn around and call the underlying function using the given this value (enter, in our case).

More to explore (on my blog):

edited Feb 11, 2013 at 16:37

answered Feb 11, 2013 at 16:32

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

socm_ Over a year ago

yes, you right, if i call enter.check() - there is no problem, but how then i can add Event Listener for this check ?

T.J. Crowder Over a year ago

@user1506183: Just as you were entering that comment, I was adding a note about Function#bind. The linked articles also go into how to deal with this in some detail.

Collectives™ on Stack Overflow

Why is instance variable undefined?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related