如何调用 javascript 对象内部的方法

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 函数的代码：

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

它运行得很好。然而，我很快发现对drawMap函数这样做是

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

行不通的，因为“this”现在指的是getJSON调用的回调函数。

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

Answer 1

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

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

Answer 2

迟到的答案，但 jQuery 有一个方法 称为 jQuery.proxy() ，它是为这个目的。您将函数以及要保留的 this 值传递给它，它将返回一个确保 this 正确的函数。

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

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

Answer 3

您需要在 getJSON 函数外部使用对 this 的变量引用。 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
},