How to call a method inside a javascript object

Question

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?

ChaosPandion · Accepted Answer · 2010-12-08 23:23:07Z

13

You want to store the this binding in a variable.

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

answered Dec 8, 2010 at 23:23

ChaosPandion

78.4k18 gold badges122 silver badges159 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

joeellis Over a year ago

Ahh, that makes a lot of sense, thanks! Would you say that overall this practice is used in more javascript code than Josiah's suggestion below? I like the idea of using "self" better just for my own OO mindset, but I'd rather follow standard practices in the JS world where I can.

ChaosPandion Over a year ago

@japancheese - I don't believe there is a convention so you should use what you like. Just remember to keep the name reasonable.

user113716 · Accepted Answer · 2010-12-08 23:48:55Z

8

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));
}

answered Dec 8, 2010 at 23:48

user113716

323k64 gold badges454 silver badges441 bronze badges

Comments

Josiah Ruddell · Accepted Answer · 2010-12-08 23:25:14Z

2

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);         
});

answered Dec 8, 2010 at 23:25

Josiah Ruddell

29.9k8 gold badges68 silver badges68 bronze badges

Comments

Danilo Souza Morães · Accepted Answer · 2015-12-12 15:49:03Z

0

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.

answered Dec 12, 2015 at 15:49

Danilo Souza Morães

1,59113 silver badges19 bronze badges

Comments

Nick Tsai · Accepted Answer · 2017-05-25 05:50:36Z

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
},

Collectives™ on Stack Overflow

How to call a method inside a javascript object

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related