CODEWITHSUNDEEP
javascriptobjectanonymous-function
joeellis
joeellis

Reputation: 2785

How to call a method inside a javascript object

I'm just learning about how to best organize my javascript code, and I had a question regarding this small piece of code I wrote:

var reportsControllerIndex = {
    plotMapPoints: function(data) {
        //plots points
    },

    drawMap: function() {
        $.getJSON('/reports.json', function(data) {
            reportsControllerIndex.plotMapPoints(data);         
        });
    },

    run: function() {
        reportsControllerIndex.drawMap();
    }
};

The question is regarding calling another function of reportsControllerIndex from within the reportsControllerIndex object. I had first tried the following piece of code for the run function:

run: function() {
    this.drawMap();
}

which worked perfectly. However, I then quickly found doing this for the drawMap function:

drawMap: function() {
    $.getJSON('/reports.json', function(data) {
        this.plotMapPoints(data);         
    });
}

does not work, since "this" would now refer to the callback function of the getJSON call.

My solution was to just place reportsControllerIndex in front of all of the methods I want to call, but I was curious: is there a more relative way for calling functions within an overall object like this (much like you'd do with a class in a standard OO language)? Or am I forced to do it as I am currently, just calling the methods through the name of the object?

Upvotes: 10

Views: 15216

Answers (5)

Nick Tsai
Nick Tsai

Reputation: 4129

You can write it likes this:

var reportsControllerIndex = new function () {

    var self = this;

    self.plotMapPoints = function (data) {
        //plots points
    },

    self.drawMap = function () {
        $.getJSON('/reports.json', function (data) {
            self.plotMapPoints(data);         
        });
    },

    self.run = function () {
        self.drawMap();
    }
};

This class will works as same as you did, and you can still call the class method by:

reportsControllerIndex.run()

In this paradigm, I defined self pointing to the class itself, so that you can call self wherever you want in the class.

Farther, this paradigm can solve the this problem in the function that you bring as callback to another funciton: 

plotMapPoints: function(data) {
    console.log(this);
    // Need a this referring to the class itself
    // It's inconvenient to bring this as parameter
},

Upvotes: 0

Danilo Souza Morães
Danilo Souza Morães

Reputation: 1593

plotMapPoints: function(data) {
    //plots points
}.bind(this)

when defining your function you can just add .bind(this) to set the correct context for that function.

Upvotes: 0

user113716
user113716

Reputation: 322492

Late answer, but jQuery has a method called jQuery.proxy() that is made for this purpose. You pass it the function along with the value of this you want to retain, and it will return a function that ensures this is correct.

This way you don't need to define a variable.

drawMap: function() {
    $.getJSON('/reports.json', $.proxy(function(data) {
        this.plotMapPoints(data);         
    }, this));
}

Upvotes: 8

Josiah Ruddell
Josiah Ruddell

Reputation: 29831

You need to use a variable reference to this outside the getJSON function. getJSON sets the context of the callback within jquery.

Like this:

var self = this;
$.getJSON('/reports.json', function(data) {
    self.plotMapPoints(data);         
});

Upvotes: 2

ChaosPandion
ChaosPandion

Reputation: 78262

You want to store the this binding in a variable.

drawMap: function() {
    var _this = this;
    $.getJSON('/reports.json', function(data) {
        _this.plotMapPoints(data);         
    });
}

Upvotes: 13

Related Questions