"this" Keyword In Object Method Points To Window

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

Solution 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 () {
    varself = this
    returnfunction () {
        returnself.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.

Solution 2:

var myObject = {
    name:'My Object'
};

console.log(myObject.name);
console.log(myObject['name']);

There are various other ways to make objects in javascript.

this is a hidden argument that is automatically passed from the calling function to the callee. The traditional way is to do:

functionMyObject() {
    this.name = 'My Object';
}
myObject = newMyObject();

console.log(myObject.name);

Nowadays you might just use closures:

[**edit**: redacted because not a good method]

Nowadays you might just use closures, correctly:

functionmakeObject() {
    varTHIS = {};

    THIS.name = 'My Object';
    THIS.sayMyName = function () {
        returnTHIS.name+" is my name";
    }

    returnTHIS;
}

There are many libraries that support "smarter" ways to make objects as well.

Solution 3:

You need to use .bind() to set the right context for the method, so the this keyword will be what you want it to actually be. The default is in such a scenario for the this keyword is to point to the window object, because...this is how the JS engine works.

var name = "The Window";
var object = {
  name : "My Object",
  getNameFunc : function(){
    returnfunction(){
      returnthis.name;
    }.bind(this); // <-- sets the context of "this" to "object"
  }
};
console.log( object.getNameFunc()() );

Solution 4:

As the others have written, you need to target this. I believe this piece of code will help you to understand how this in javascript works

var name = "The Window";
varobject = {
  name : "My Object",
  getNameFunc : function(){
    that = this; // targeting thisreturn function() {
      return that.name;
    };
  }
};
alert(object.getNameFunc()()); // it is My Object now

Solution 5:

varobject = {
　　name : "My Object",
　　getNameFunc : function(){
　　　　return (function(){
　　　　　 returnthis.name;
　　　  }).bind(this);
 　}
};

.bind, use the ES5-shim for browser support