Как вызвать метод внутри объекта 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: 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

Вам необходимо использовать переменную ссылку на this вне функции getJSON. getJSON устанавливает контекст обратного вызова в jquery.

Как это:

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

Answer 4

Вы можете написать это так:

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

Answer 5

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

при определении вашей функции вы можете просто добавить .bind (this), чтобы установить правильный контекст для этой функции.