Question

Here is a working example from “Javascript – The Good Parts”.

function add(x, y){ return x + y};

var myObject = {
    value: 0,
    increment: function (inc) {
        this.value += typeof inc === 'number' ? inc : 1;
    }
};

myObject.increment(2);
document.writeln(myObject.value); 

myObject.double = function (  ) {
    var that = this;    // Workaround.

    var helper = function (  ) {
        that.value = add(that.value, that.value)
    };

    helper(  );    // Invoke helper as a function.
};

myObject.double(  );
document.writeln(myObject.value);    // 4

For function invocation pattern, ‘this’ object will have global reference. But I cannot fully understand under-the-hood of mentioned workaround:-

var that = this;    // Workaround.

if we do this, aren’t we just copying the reference to ‘this’ to ‘that’ ? i.e ‘that’ will hold to global scope same as ‘this’ ? how does this work internally ?

Answer 1

There are two functions being involved here: one is myObject.double and the other is helper. When you call myObject.double() this refers to myObject. So that === myObject. Later, inside that function, you also call helper(), and inside that scope you have this === the global object.