Question

var name = 'The Window';
var object = {　　
  name: 'My Object',
  getNameFunc: function(){　　　　
    return function() {　　　　　
      return this.name;　　　
    };　
  }
};

console.log( object.getNameFunc()() );

when i tested the code. the result is The Window. but i think this.name; should be My Object. what’s wrong with my thinking.

when i add var before the name : "My Object", it show’s an error.? why?

Answer 1

this inside a function is the “receiver” it was invoked upon.

That is,

1. for the construct x.f(), this inside the function (f) will evaluate to the value of x.

2. for all other cases, this will evaluate to window inside the invoked function. (The functions call, apply, and bind can also alter this… but that’s another story.)

In the posted example the second function (the one with this.name) is not invoked using the x.f() form and so this is the window object.

The “simple fix” is to use a closure: (The first function is invoked in the x.f() form and thus this is the same as object, which is as expected. We capture the value of this in the current scope via a closure created with self and the returned function.)

getNameFunc : function () {
    var self = this
    return function () {
        return self.name
    }
}

However, I may consider another design, depending 🙂

Happy coding.

---

Additional clarification, for comment:

…that is because you are using circle.getArea() which is of the form x.f(). Thus this inside the getArea function evaluates to circle.

In the code posted you are invoking two different functions in a row. Imagine writing the code like this:

var nameFunc = object.getNameFunc()
nameFunc()

The first function call is in the form of x.f() and thus this inside getNameFunc is the evaluation of object. However, in the second line, the function (nameFunc) is not invoked in the form x.f(). Therefore, the this inside nameFunc (the function returned from getNameFunc) will evaluate to window, as discussed above.