Как вызвать метод внутри объекта javascript

Я только что узнал о том, как лучше всего организовать свой код 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);         
    });
}

не работает, так как "это" теперь будет ссылаться на функцию обратного вызова вызова getJSON.

мое решение состояло в том, чтобы просто разместить reportsControllerIndex перед всеми методами, которые я хочу вызвать, но мне было любопытно: есть ли более относительный способ вызова функций в общем объекте, как это (так же, как вы сделали бы с классом на стандартном языке OO)? Или я вынужден делать это так, как я сейчас, просто вызывая методы через имя объекта?

5 ответов


вы хотите сохранить this привязка в переменной.

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

поздний ответ, но jQuery есть метод под названием jQuery.proxy() это сделано для этой цели. Вы передаете ему функцию вместе со значением this вы хотите сохранить, и он вернет функцию, которая гарантирует this является правильным.

таким образом, вам не нужно определить переменную.

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

вам нужно использовать ссылку на переменную this за пределами


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

при определении функции вы можете просто добавить .bind (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();
    }
};

этот класс будет работать так же, как и вы, и вы все равно можете вызвать метод класса по:

reportsControllerIndex.run()

в этой парадигме, я определил self указывает на сам класс, так что вы можете называть self везде, где вы хотите в классе.


далее, эта парадигма может решить this проблема в функции, которую вы приносите в качестве обратного вызова другому funciton:

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