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
– Felix Kling, Commented Feb 25, 2015 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
– Egidi, Commented Feb 25, 2015 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
– Anatoliy Arkhipov, Commented Feb 25, 2015 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
– jungy, Commented Feb 25, 2015 at 20:27

Felix Kling · Accepted Answer · 2015-02-25 20:30:54Z

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

Collectives™ on Stack Overflow

Javascript scope issue with objects (this)

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related