Settimeout, bind and this
<p>Here I have copied code snippet from MDN : <a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind" rel="noreferrer">https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind</a></p>

<pre><code>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
</code></pre>

<p>The most confusing part is : <code>window.setTimeout(this.declare.bind(this), 1000);</code></p>

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

<p>There are two <code>this</code> in that line but which <code>this</code> refers to what and how that works is totally confusing.</p>

<p>How works?</p>