Question

我正在学习如何最好地整理我的javascript代码，我对我写的这段小代码有疑问：

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

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

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

问题是关于从reportsControllerIndex对象中调用reportsControllerIndex的另一个函数。我首先尝试了以下运行函数代码：

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

完美无缺。但是，我很快就发现了为drawMap函数执行此操作：

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

不起作用，因为“this”现在将引用getJSON调用的回调函数。

我的解决方案是将reportsControllerIndex放在我想要调用的所有方法的前面，但我很好奇：是否有一种更相对的方式来调用像这样的整体对象中的函数（就像你做的那样）一个标准OO语言的课程）？或者我现在被迫这样做，只是通过对象的名称调用方法？

Answer 1

您希望将this绑定存储在变量中。

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

Answer 2

迟到的答案，但是jQuery有一个为此目的而制作的方法called jQuery.proxy()。您将该函数与要保留的this的值一起传递给它，它将返回一个确保this正确的函数。

这样您就不需要定义变量了。

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

Answer 3

您需要在this函数之外使用getJSON的变量引用。 getJSON在jquery中设置回调的上下文。

喜欢这样：

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

Answer 4

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

定义函数时，只需添加.bind（this）即可为该函数设置正确的上下文。

Answer 5

你可以这样写：

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

此类将与您一样工作，您仍然可以通过以下方式调用类方法：

reportsControllerIndex.run()

在这个范例中，我定义了self指向类本身，以便您可以在课程中的任何位置调用self。

进一步说，这个范例可以解决函数中的this问题，作为回调给另一个函数：

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

如何在javascript对象中调用方法

5 个答案: