Using parent object's properties inside jQuery function and other methods

Question

First of all: I don't know exactly how to call everyting since I am quite new to the more OOP way of writing javascript, so I'll try to explain everything as good as possible.

My problem is that I want to access properties inside an object ( so I can use the this-keyword. This works fine as long as I am in the scope of the object. When I go outside the scope, I would like to access those properties while I can't use the this-keyword anymore.
My code:

var Octa = Octa || function () {
     this._initialize();
};

Octa.prototype = {
      string: 'Foo',

      _initialize: function () {
           console.log(this.string); //Output: "Foo"
           this.othermethod();
      }
}

var Octa = new Octa();

But when I have a method within an Octa method, so outside the scope where I can't use this anymore to get Octa's properties, I can't reach the properties within Octa.
For example:

othermethod: function () {
     $.ajax({
        url: this.globalUrl + 'content/language/lang.' + l + '.php',
        data: {
            ajax: true
        },
        dataType: 'json',
        success: function (response) {
           Octa.lang = response;
        }
    });
    console.log(JSON.stringify(this.lang)); //Output: null, which means Octa.lang wasn't reachable in the ajax success event (the ajax request was successful). 
 }

Is there a way to reach the scope of Octa within other objects? Or within jQuery callbacks since the same problem occurs there.
I hope my problem is understandable and if not, I'll try to give more clarification.

Possible duplicate of [How do I return the response from an asynchronous call?](http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Grundy, Dec 18 '15 at 12:28
$.ajax was just an example. It doesn't matter what I use, when I go outside the scop of `Octa`, I can't reach it. But I'll read the other post anyway. Thanks! — Eran Machiels, Dec 18 '15 at 12:30
_$.ajax was just an example_ I would recommend you remove `$.ajax` as on first look question is fit to close as dupe. — Satpal, Dec 18 '15 at 12:36
i not understand your problem, in sample that you provide - same issue as in duplicated question. Can you explain where you see problem and provide [mcve](http://stackoverflow.com/help/mcve) — Grundy, Dec 18 '15 at 12:37
This seems very dangerous: `var Octa = new Octa();` Aren't you overwriting your own class here? Concerning the scope, you could try binding the success callback to the Octa instance. Or just save all your Octa instance objects somewhere and have a way to reference them. But euh, as written, your console.log will always return null, since it isn't inside the success callback, so it gets run before the ajax call finishes. — Shilly, Dec 18 '15 at 12:54
Thank you all for your suggestions! Turned out that there weren't any problem. I have to idea why I encountered them in the past... — Eran Machiels, Dec 19 '15 at 05:56

Tim Vermaelen · Accepted Answer · 2015-12-18T13:00:39.097

Simply refer back to this inside the function scope:

...,
someMethod: function () {
    var self = this,
        ajaxOptions = this.settings.ajaxOptions;

    // note we can still refer to 'this' at this level
    $.ajax(ajaxOptions).done(this.ajaxDone).fail(this.ajaxFail);

    // the function scope changes for the deffered handlers so you can access by reference of 'this' => self
    $.ajax(ajaxOptions).done(function(data, status, xhr){
        self.ajaxDone(data, status, xhr)
    }).fail(function(xhr, status, error){
        self.ajaxFail(xhr, status, error);
    });
},
ajaxDone: function(data, status, xhr) {},
ajaxFail: function(xhr, status, error) {},
...

Hope this makes sense.

Now there's also a .bind() function that can be used to bind function scope to a parameter:

$.ajax(ajaxOptions).done(function(){
    this.ajaxDone();
}.bind(this));

You'll have to use a polyfill to support older browsers. It's much more easier to use var self imho.

Since I didn't know about the bind() method and it could be very usefull in the future, I giving you the credits of answering my question. — Eran Machiels, Dec 19 '15 at 05:57

Using parent object's properties inside jQuery function and other methods

1 Answers1