this keyword within a JavaScript object is not pointing to that object

Question

I have some code in which I reference methods within the same object by using this. I have verified that this refers to current object by using the code sample below.

In my situation I have similar code, but its with a lot of other third-party ASP.Net controls, which emit their own JavaScript. But in my situation, when I use the same approach if using this, it never works since this is pointing to 'Sys.UI.DomEvent`.

<!DOCTYPE html>
<html>
<body>

<p>Creating and using an object method.</p>

<p>An object method is a function definition, stored as a property value.</p>

<p id="demo"></p>

<script>
var person = {
    firstName: "Sunil",
    lastName : "Kumar",
    id       : 5566,
    fullName : function fullName() {
       return this.newName(this.firstName + " " + this.lastName);
    },
   newName : function newName( nm) {
        return 'new ' + nm;
    }
};

document.getElementById("demo").innerHTML = person.fullName();
</script>
</body>
</html>

The page in my situation results in an error and the error is as below.

I have similar code as above code snippet. My code looks like below. Also, the functions in object below are called when a button is clicked, and may be that's why this is not refering to the object AutoSizedStandardDialogs object. May be there is another way to refer to the object AutoSizedStandardDialogs when a button is clicked!

var AutoSizedStandardDialogs = {
    applyAutoSizeLogic: function applyAutoSizeLogic() {
    //code omitted
  },
radalert: function radalert() {
   this.applyAutoSizeLogic();
   //code omitted
  }
}

Question: Why in my situation using this is not working and how can I force this to point to the object that is containing these functions?

Sorry, I need to change the code. In my situation, code is different, but I thought its like this. I will make a correction soon. — Sunil
– Sunil, Commented Sep 8, 2015 at 5:03
Since the code is not in strict mode, the value of this must always be an object so it defaults to the global object. mention "use strict"; before initializing 'person' — Nagesh Sanika
– Nagesh Sanika, Commented Sep 8, 2015 at 5:47
@Sunil: Unfortunately, this in javascript is quite complex — slebetman
– slebetman, Commented Sep 8, 2015 at 6:01

Tushar · Accepted Answer · 2015-09-08 05:02:41Z

1

In the code you've shown, it works normally. You can check the demo.

However, if you're facing the problem as stated in question:

You can use bind() to bind the context as follow:

fullName : function fullName() {
   return this.newName(this.firstName + " " + this.lastName);
}.bind(this),
//^^^^^^^^^^

OR, cache the context and use it inside the function

self: this, // Cache context
fullName : function fullName() {
   return self.newName(self.firstName + " " + self.lastName); // Use cached variable here
},

answered Sep 8, 2015 at 5:02

Tushar

87.4k21 gold badges164 silver badges182 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Sunil Over a year ago

So in my situation this is pointing to Sys.UI.DomEvent since its bound to it? If yes, then I could cause issues if I change the meaning of this since I am using a lot of third-party libraries.

Tushar Over a year ago

@Sunil Then you can use the second approach of context caching

Tushar Over a year ago

@Sunil Yes, that's what I'm trying to say, this is just a variable, it won't change depending on how the function is called

Sunil Over a year ago

I tried what you advised, but now this points to Window and still not to containing object.

Sunil Over a year ago

Yes, I did use self after adding this self:this inside that object. It did not work. What worked is if I used the object name to access methods. I had to use AutoSizedStandardDialogs.applySizeLogic() rather than self.applySizeLogic() or this.applySizeLogic. Why, I don't understand?

|

Collectives™ on Stack Overflow

this keyword within a JavaScript object is not pointing to that object

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related