Understanding "this" in Javascript

Question

I have 2 blocks of code, one that does not work, and one that works because I assign that = this and use that in my function instead of this. Can someone help me understand why this is so. It would help to know how one should think of accessing variables in functions in objects in JavaScript, and the nature of "this", if I am saying that right (if not, please enlighten me). Thank you!

var add = function (x, y) {
 return x + y;
 }
var myObject = {
 value: 0,
 increment: function (inc) {
 this.value += typeof inc === 'number' ? inc : 1;
 }
};
myObject.double2 = function () {
 // var that = this; 
 var helper = function () {
 this.value = add(this.value, this.value)
 };
 helper();
};
myObject.increment(100);
document.writeln(myObject.value); // Prints 100
myObject.double2();
document.writeln('<BR/>'); // Prints <BR/>
document.writeln(myObject.value); // Prints 100, **FAILS**

And the modified code:

var add = function (x, y) {
 return x + y;
 }
var myObject = {
 value: 0,
 increment: function (inc) {
 this.value += typeof inc === 'number' ? inc : 1;
 }
};
myObject.double2 = function () {
 var that = this; 
 var helper = function () {
 that.value = add(that.value, that.value)
 };
 helper();
};
myObject.increment(100);
document.writeln(myObject.value); // Prints 100
myObject.double2();
document.writeln('<BR/>'); // Prints <BR/>
document.writeln(myObject.value); // Prints 200 - **NOW IT WORKS**

• asawyer: this refers to the local execution context. (I am 100% sure someone else can word that better then me.) Your that variable is a closure, that captures the value of the this so that you can reference it from inside the function call, whenever it happens, at some point in the future.

Answer 1

The first one doesn't work because when each function's this depends on how it was called.

First you do myObject.double2() and so this = myObject. But inside double2, you call helper() by itself and there is no object you're calling it under (it's not myObject.helper()). So this defaults to the global object (or window object in a browser).

In the second example, you "capture" a reference to myObject (that=this=myObject) and so that.value=myObject.value.

• zallarak: thanks! That is a very clear description and makes sense to me.

Answer 2

I think this link would greatly help you in understanding the differences of object and private members in Javascript to tackle your problem, please take a look at the Private section. Hope it helps!

• Ayush: I suppose you forgot the link
• zallarak: Thanks for your comment, I don't see your link though

Answer 3

Mozilla has some good reading on this. If you want this to work without assigning this to that, you can always use call.

Example: jsfiddle.net/5azde/

Answer 4

And you can always remember this:

When a function of an object is called, the object will be passed as this value(as the case 'add' and 'increment' function which belong to 'window' and 'myObject' separately). And if the function doesn't belong to any objects, window(or global) will be passed as this value.(as the case with function helper in your sample code).

And I'm glad to see a pure js question. No jQuery, No css, No dom selector. haha.

May it helps. :-)

• trinity: and please note that, every function's this value is defined and unchangeable when the function is formed. But you can modify 'this' value with 'call' or 'apply' function.