Question

I was making a test case to show how ‘bind’ is necessary for a method to refer to its function in a callback.

But just when I thought I knew JS – the following code works fine – without requiring bind!

pretendThingConstructor = function (greeting) {
    this.greeting = greeting;
    this.sayHello = function() {
        console.log(this.greeting);
    };
}

var pretend_thing = new pretendThingConstructor('hello world');

pretend_thing.sayHello();

setTimeout(function() {  
    pretend_thing.sayHello()
}, 3000);

When I run it – via node, phantomjs, or another JS environment – it works. ‘hello world’ is printed twice.

I expected the second ‘hello world’ – the one ran after the timout – to fail, as ‘this’ would refer to the event, rather than the object. But it works. Why is this?

Answer 1

The this changes depending on how your call the function. If you specify a base object, it will refer to that instead:

pretend_thing.sayHello()

Here pretend_thing is that base object and therefore this still refers to that object. On the other hand, if you had:

var f = pretend_thing.sayHello;
f();

Here this should refer to window object instead.

You can confirm it by putting:

console.log (this instanceof pretendThingConstructor);

Inside your sayHello function. It will print true in both cases.

---

pretendThingConstructor = function (greeting) {
    this.greeting = greeting;
    this.sayHello = function() {
        console.log(this.greeting);
        console.log(this instanceof pretendThingConstructor);
    };
}

var pretend_thing = new pretendThingConstructor('hello world');
////////////////////////////

pretend_thing.sayHello();

setTimeout(function() {  
    pretend_thing.sayHello();
}, 3000);

will output:

true
true

whereas:

var f = pretend_thing.sayHello;
f();

outputs:

false