Binding of this when constructor is not called in javascript

Question

This code is a part of a constructor function body in javascript:

window.addEventListener("load", function(){
    this._updateFilter();
}.bind(this));

_updateFilter method belongs to prototype object of that constructor:

Constructor.prototype._updateFilter = function(){
    //  some code
};

I am confused with the thing that _updateFilter is called before new instance of Constructor is created. So there is no:

var obj = new Constructor();

But _updateFilter is invoked onload? Can someone explain this please ?

Thanks

The code you did provide does indeed not call _updateFilter before instances are created. Please show us the whole code or provide an example that demonstrates this odd behaviour. — Bergi
– Bergi, Commented May 29, 2013 at 22:38
You should reduce the snippet to window.addEventListener("load", this._updateFilter.bind(this)) — Bergi
– Bergi, Commented May 29, 2013 at 22:39
You are right, sorry. This method is called after instance is created. This snippet is a part of vanillsjs example, from todomvc project.github.com/tastejs/todomvc/blob/gh-pages/vanilla-examples/… — Miroslav Trninic
– Miroslav Trninic, Commented May 31, 2013 at 8:12

Dan · Accepted Answer · 2013-05-29 22:03:48Z

Simply because the listener callback or even the constructor itself is defined does not mean that it is invoked at the time it is defined. In fact, the constructor is just a function. Like any function declaration, it defines what will happen when invoked. If we don't invoke it, nothing happens. In the case of a constructor, it is invoked when we create a new instance of it. Eventually, your app will invoke the constructor and here is what will happen at that time:

Using the special new keyword, we tell the JavaScript interpreter to invoke the constructor function and provide it with a new object inside of it.
The interpreter sets this inside the constructor to be a reference in memory to that new object.
Next, an event listener is created on the window. We pass a callback function to that listener which is a closure over the this object, making our current this reference available. But that callback does not execute yet and will not until the window's load event fires.
Imagine that it did fire immediately, (i.e. was not actually a callback) we would have a problem. Even though this exists at that time and actually already inherits from Constructor.prototype, it has no such method _updateFilter. The interpreter would then check up the prototype chain and see that there is no such function on Constructor.prototype either. It would continue up the chain, not find the function, and would throw an error. But remember, the callback does not fire yet.
Back to what actually does happen: Next we extend Constructor's prototype with the new method _updateFilter.
So eventually the window's load event does fire and the callback really is called. The interpreter checks to see if _updateFilter exists on this, sees that it does not, and then checks up its prototype chain. Now it finds that function does exist on Constructor.prototype, and runs that code.

Collectives™ on Stack Overflow

Binding of this when constructor is not called in javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related