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?

Works perfectly [here](https://jsfiddle.net/tusharj/8190p98m/) — Tushar, Sep 08 '15 at 05:01
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, Sep 08 '15 at 05:03
This also works. Check [here](https://jsfiddle.net/tusharj/8190p98m/1/), if you're not able to reproduce the problem, try below answer, that will solve your problem — Tushar, Sep 08 '15 at 05:12
@Tushar, Yes it works, but in my situation where I am using `this` in a similar manner, it doesn't work, since it says that `this` is pointing to `Sys.UI.DomEvent`. — Sunil, Sep 08 '15 at 05:16
A demo will be helpful, I still think you can use context caching — Tushar, Sep 08 '15 at 05:16
see: http://stackoverflow.com/questions/13441307/how-does-the-this-keyword-in-javascript-act-within-an-object-literal/13441628#13441628 — slebetman, Sep 08 '15 at 05:45
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, Sep 08 '15 at 05:47
I cannot use `"use strict";`, since I just found that I am making use of code that checks to see if `this` is `Window` as in `if (this === window) {...}` — Sunil, Sep 08 '15 at 05:55
I think the safest is to use the object name that contains these methods. I found that if I use `AutoSizedStandardDialogs.applyAutoSizeLogic()` instead of `this.ApplyAutoSizeLogic()` then it works. — Sunil, Sep 08 '15 at 05:57
@slebetman, That post was very helpful. But its so complex, I am still trying to understand it. But thanks for pointing me to that post. — Sunil, Sep 08 '15 at 05:59
@Sunil: Unfortunately, `this` in javascript is quite complex — slebetman, Sep 08 '15 at 06:01

score 1 · Answer 1 · answered Sep 08 '15 at 05:02

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 08 '15 at 05:02

Tushar

85,780
21
159
179

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. – Sunil Sep 08 '15 at 05:11
@Sunil Then you can use the second approach of context caching – Tushar Sep 08 '15 at 05:13
@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 – Tushar Sep 08 '15 at 05:18
I tried what you advised, but now `this` points to `Window` and still not to containing object. – Sunil Sep 08 '15 at 05:23
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? – Sunil Sep 08 '15 at 05:35
I added part of my code in original post. It looks like the code that works whose demo you posted, but yet it doesn't work like it. – Sunil Sep 08 '15 at 05:41
@Sunil _Demo_ is needed so that the problem can be solved quickly – Tushar Sep 08 '15 at 05:42
let me try to get that from my complex code. Could you please take a look at some new info in bold that I added just above my actual sample code? The thing is that a button is being clicked when those object functions are called, and so `this` means the element or the `Window`? – Sunil Sep 08 '15 at 05:45

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

1 Answers1