understanding MDN's example of bind

Question

Hey guys i have been trying to learn what the bind() method does in JS and i have found a few helpful resources in SO , MDN and also git that do explain this rather well , but i am still a bit confused with a practical example that i found on MDN. The below code i am talking about :

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!');
};

now bind function just like call() or apply() , thats what i understood so far , but what it does is , it can delay the execution of a function while preserving or rather binding the value of the this to a specific function .

now in the below lines of code :

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

what is the 1st this pointing to ? and what is the secound this pointing to ?

Both `this` point to the same thing, the object before the dot when you call the function. — elclanrs, Apr 25 '15 at 11:49
@elclanrs window ?? i taught bind was being used to avoid pointing to the window ! — Alexander Solonik, Apr 25 '15 at 11:49
Bothe refers to the same object instance on which `bloom` was called — Arun P Johny, Apr 25 '15 at 11:50
@ArunPJohny inside `LateBloomer.prototype.bloom = function() {` does this refer to `function bloom` or `function LateBloomer` , my guess is the latter ! — Alexander Solonik, Apr 25 '15 at 11:52
In both the times both `this` is used in the method `bloom` so both the times it refers to the same value — Arun P Johny, Apr 25 '15 at 11:52
It does not refer to either one... it refers to the object instance of `LateBloomer` — Arun P Johny, Apr 25 '15 at 11:53
@ArunPJohny but does't the value of this change inside setTimeout , to point to the global window ? — Alexander Solonik, Apr 25 '15 at 11:53
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/76238/discussion-between-alexander-solonik-and-arun-p-johny). — Alexander Solonik, Apr 25 '15 at 11:54

score 2 · Accepted Answer · answered Apr 25 '15 at 11:54

2

In this.declare.bind(this), the first this is used to get the current object's declare method. Then we use bind to create a new function that will call that method with a specific this value, and that's the argument to bind(). It just so happens that we're binding it to the current object, so we use this in both place, but we don't have to. We could write:

var another = new LateBloomer;
setTimeout(this.declare.bind(another), 1000);

This gets the current object's declare method, and arranges to call it on another in 1 second.

answered Apr 25 '15 at 11:54

Barmar

741,623
53
500
612

so this in both cases refer to the instance of LateBloomer ? – Alexander Solonik Apr 25 '15 at 12:04
1

Yes, that's right. I was trying to describe it in more generality. – Barmar Apr 25 '15 at 12:05

understanding MDN's example of bind

1 Answers1