Settimeout, bind and this

Question

Here I have copied code snippet from MDN : https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind

function LateBloomer() {
  this.petalCount = Math.ceil(Math.random() * 12) + 1;
}

// Declare bloom after a delay of 1 second
LateBloomer.prototype.bloom = function() {
  window.setTimeout(this.declare.bind(this), 1000);
};

LateBloomer.prototype.declare = function() {
  console.log('I am a beautiful flower with ' +
    this.petalCount + ' petals!');
};

var flower = new LateBloomer();
flower.bloom();  
// after 1 second, triggers the 'declare' method

The most confusing part is : window.setTimeout(this.declare.bind(this), 1000);

I understand how this works and this inside settimeout is always bound to global object.I know there can be var self or var that inside bloom function.

There are two this in that line but which this refers to what and how that works is totally confusing.

How works?

Answer 1

First of all read this article, which offers a very nice explanation about how this works.

.bind(this, args) just helps you to pass your this context inside your function (because inside it in your example by default this is undefined or refers to window).

Also bind is a nice alternative to this:

// Declare bloom after a delay of 1 second
LateBloomer.prototype.bloom = function() {
  var self = this;
  window.setTimeout(self.declare, 1000);
};

And as the last point in es6 you can do it in this way:

window.setTimeout(() => {
  //do some stuff
}, 1000);

instead of

window.setTimeout(function () {
  //do some stuff
}.bind(this), 1000);

this allow you to not think about this.

Answer 2

MSDN defines Function.prototype.bind() as,

The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.

By using .bind(this) we are passing this to the function declare

See this snippet.

function LateBloomer() {
  console.log(this.constructor);
  this.petalCount = Math.ceil(Math.random() * 12) + 1;
}

// Declare bloom after a delay of 1 second
LateBloomer.prototype.bloom = function() {
  window.setTimeout(this.declare.bind(this), 1000);
};

LateBloomer.prototype.undefinedbloom = function() {
  window.setTimeout(this.declare, 1000);
};

LateBloomer.prototype.declare = function() {
  console.log(this.constructor);
  console.log('I am a beautiful flower with ' +
this.petalCount + ' petals!');
};

var flower = new LateBloomer();
flower.bloom();
flower.undefinedbloom();

In the function undefinedbloom we are just calling the declare function. So the object will be the window object. It doesn't have property petalCount so its undefined.

In the function bloom we are binding the this of LateBloomer to the declare function by which we will have access to the LateBloomer's object petalCount.

this in JavaScript is a very difficult to fathom at first.

MDN Link: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/this