Javascript scope issue with objects (this)

Question

I have the following code:

var tradingInterface = function() {

    this.json = '';

    this.init = function() {

        $.get( '/whatever',{}, function(data) {
            this.json = data;
            // Rebuilds Everything
            this.rebuildAll();
        });
    };

    this.rebuildAll = function() {
        //whatever here
    };

};

Why am I getting in init function the following error?

ReferenceError: this.rebuildAll is not defined
this.rebuildAll();

Why can I access to this.json without scoping problems but not to this.rebuildAll?

I wrote a similar previous thread but i was redirected to How to access the correct `this` / context inside a callback? but i am not able to make it work properly.

As thw thread suggets, I tried with:

var tradingInterface = function() {

    this.json = '';
    var self = this;
    this.init = function() {

        $.get( '/whatever',{}, function(data) {
            this.json = data;
            // Rebuilds Everything
            self.rebuildAll();
        });
    };

    this.rebuildAll = function() {
        //whatever here
    };

};

The error disappears but rebuildAll function is not doing what it should...

I need some help...

Regards,

*"Why can I access to this.json without scoping problems but not to this.rebuildAll?"* You are **assigning** to `this.json`. You can always assign a property to an object (almost always). However, you are **reading** `this.rebuildAll` and try to call it as a function. Since `this.rebuildAll` is `undefined`, you cannot call it. *Assigning* to `this.rebuildAll` would work fine as well (although of course it wouldn't what you wanted to do): `this.rebuildAll = 42;`. — Felix Kling, Feb 25 '15 at 20:21
Are you serious man? I wrote in my thread that I already read that thread and that did not help me, read what i wrote first and don't finish in the header... — Egidi, Feb 25 '15 at 20:21
You are getting the error because `this` in the function references to the `window` object and it does not have the `rebuildAll` method. — Anatoliy Arkhipov, Feb 25 '15 at 20:24
Yes, Felix is correct. Your scope for `this` inside of the `$.get....` isn't actually `tradingInterface`. To clear things up, make `this.json = 'test'` and then `console.log(this.json)` inside your `$.get` — jungy, Feb 25 '15 at 20:27
The fact that you only replaced `this.rebuildAll` with `self.rebuildAll`, but not `this.json`, suggests me that you haven't fully understood the explanation and solution in the linked question. I'd suggest you read through it again, but I'm also happy to get feedback how to make the answer easier to understand (I wrote the linked question/answer). — Felix Kling, Feb 25 '15 at 20:28
Working demo. `this.json` does need to be `self.json`: http://jsbin.com/jujelekimo/1/edit?js,output (click "Run with JS") — Joseph Marikle, Feb 25 '15 at 20:34

Felix Kling · Accepted Answer · 2015-02-25T20:30:54.713

The error disappears but rebuildAll function is not doing what it should...

You are not explaining what the rebuildAll is supposed to do, so I can only assume that the issue is that you didn't replace

this.json = data;

with

self.json = data;

Inside the the $.get callback, this refers to a different object than self. This is all explained in the question/answer you linked to.

Why can I access to this.json without scoping problems but not to this.rebuildAll?

You are assigning to this.json. You can (almost) always assign a property to an object. However, you are reading this.rebuildAll and try to call it as a function. Since this.rebuildAll is undefined, you cannot call it.

Simplified example:

var obj = {};
obj.foo = 42; // works, foo didn't exist before
obj.bar = function() {}; // works, bar didn't exist before

obj.bar(); // works because bar exists
obj.baz(); // doesn't work, because baz doesn't exist

Javascript scope issue with objects (this)

1 Answers1