0

let's assume i have this code

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

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

var ud = new UselessDelay();
ud.start();

where start method could be written in different ways using call or bind methods:

UselessDelay.prototype.start = function () {
    var self = this;
    window.setTimeout(function () {
        self.declare.call(self);
    }, 3000);
};

or

UselessDelay.prototype.start = function () {
    window.setTimeout(this.declare.bind(this), 3000);
};

I'm really ok with there examples and do understand them. Let's look at another start method

UselessDelay.prototype.start = function () {
    window.setTimeout(this.declare, 3000);
};

The result of this function fires after 3 secs, it's ok. But why the "petalCount" property of this is undefined, but reference to "declare" function works just fine?

Another weird behaviour happens when this.declare execution is passed to setTimeout function as an argument.

UselessDelay.prototype.start = function () {
    window.setTimeout(this.declare(), 3000);
};

This function won't wait 3 secons. It executes right away, but "petalCount" is not undefined. I assume passing and invoking function kinda breaks setTimeout function while executing and thus this remains unchanged.

tawreon
  • 184
  • 12
  • 2
    Possible duplicate of [Referencing "this" inside setInterval/setTimeout within object prototype methods](https://stackoverflow.com/questions/7890685/referencing-this-inside-setinterval-settimeout-within-object-prototype-methods) – Karlen Kishmiryan Oct 11 '17 at 22:00
  • Well you can not use the this inside of the timeout.... – epascarello Oct 11 '17 at 22:01
  • `console.log(this)` would explain it. The `this`'s context is based on how it is executed. – epascarello Oct 11 '17 at 22:04
  • @epascarello what do you mean by saying i cannot use this inside timeout function. I've provided you with two first examples, where i use this. – tawreon Oct 11 '17 at 22:04
  • You need to learn about closures and how window.setTimeout changes the context to window when it runs. ANd the last one runs right away because it executes it and what ever the method returns is assigned to the timeout, so basically it is `this.declare(); window.setTimeout(undefined, 3000);` – epascarello Oct 11 '17 at 22:12
  • @epascarello I sure do know that setTimeount changes this, but i wonder why in this code `UselessDelay.prototype.start = function () { window.setTimeout(this.declare, 3000); };` this does not refers to window object. – tawreon Oct 11 '17 at 22:26
  • @tawreon extending the `prototype` of an object and using `this` inside of that method works because `this` inside of the `UselessDelay.prototype` refers to the owner of the instance ( aka the `UselessDelay` object). You are not accessing `this` inside of the timeout and instead are accessing `this` from the same scope as you are calling it. – Tim Roberts Oct 11 '17 at 22:29

0 Answers0