In the following customized class in javascript, in callback, why does this.obj have nothing but local variable obj has thing I want? Thanks.

function ClassTest(director) {
  this.obj = {"test1": "test1"};
}

function test1(input, callback) {
  callback("success");
}

ClassTest.prototype.test = function() {
  var obj = this.obj;
  test1("niuniu",function(e){
    console.log(this.obj);  // undefined
    console.log(obj);  // this one has stuff
    });
}

// run 
new ClassTest().test()

In the following customized class in javascript, in callback, why does this.obj have nothing but local variable obj has thing I want? Thanks.

function ClassTest(director) {
  this.obj = {"test1": "test1"};
}

function test1(input, callback) {
  callback("success");
}

ClassTest.prototype.test = function() {
  var obj = this.obj;
  test1("niuniu",function(e){
    console.log(this.obj);  // undefined
    console.log(obj);  // this one has stuff
    });
}

// run 
new ClassTest().test()

• javascript
• callback

Share Improve this question Follow asked Feb 3, 2013 at 7:27 Linghua JinLinghua Jin 56922 gold badges66 silver badges2323 bronze badges 1

• 1 Add var that = this; and then inside the callback you use that to refer to this :) – Ja͢ck Commented Feb 3, 2013 at 7:30

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 14

Because the function inside test1 is creating a new scope with different this context. Typical solutions are to bind or to cache this:

Binding:

test1("niuniu",function(e){
  console.log(this.obj);
}.bind(this));

Caching:

var self = this;
test1("niuniu",function(e){
  console.log(self.obj);
});

As for this line of code:

console.log(obj);  // this one has stuff

The reason it works has to do with how JavaScript closure works. The code defined in your anonymous function has access to all variables in its local scope as well as variables defined in enpassing scopes and therefore obj is available. See How do JavaScript closures work? for more on closure.

The keyword this however, is a reference to the current scope. Because you are accessing this.obj from within the anonymous function, this refers to the anonymous function itself - which has no obj property defined. In the enclosing function, which is extending the ClassTest prototype, this refers to the current ClassTest object, which does have a obj property defined.