Объекты функции Javascript, это ключевое слово указывает на неправильный объект

Question

У меня проблема с ключевым словом javascript "this" при использовании в функциональном объекте javascript. Я хочу иметь возможность создать объект для обработки модального всплывающего окна (JQuery UI Dialog).

Объект называется CreateItemModal. Который я хочу иметь возможность создать экземпляр и передать некоторые настройки конфигурации. Одна из настроек конфига. Когда вызывается метод show, отображается диалоговое окно, но кнопка отмены не работает, поскольку this ссылается на объект DOM, а не на объект CreateItemModal.

Как я могу это исправить, или есть лучший подход, чтобы поместить отдельное поведение в отдельные "классы" или "объекты". Я пробовал несколько подходов, включая передачу объекта this в события, но это не похоже на чистое решение.

См. (Упрощенный) код ниже:

function CreateItemModal(config) {
    // initialize some variables including $wrapper
};

CreateItemModal.prototype.show = function() {
    this.$wrapper.dialog({
        buttons: {
            // this crashes because this is not the current object here
            Cancel: this.close
        }
    });
};

CreateItemModal.prototype.close = function() {
    this.config.$wrapper.dialog('close');
};

Answer 1

Вам нужно создать замыкание, чтобы перехватить контекст this, я склонен использовать анонимную функцию, чтобы сделать это следующим образом: -

CreateItemModal.prototype.show = function() {
    this.$wrapper.dialog({
        buttons: {
            // this crashes because this is not the current object here
            Cancel: (function(self) {
              return function() { self.close.apply(self, arguments ); }
            })(this);
        }
    });
};

Answer 2

Каждый, кто сталкивается с проблемами «this» в JavaScript, должен прочитать и переварить этот пост в блоге: http://howtonode.org/what-is-this

Вы также преуспели бы в Google «Дуглас Крокфорд» и посмотрели некоторые из его (бесплатных) видеопо теме.

Answer 3

попробуйте это:

CreateItemModal.prototype.show = function() {
    var me = this;
    this.$wrapper.dialog({
        buttons: {
            // this crashes because this is not the current object here
            Cancel: me.close
        }
    });
};

Причина, по которой это не работает, потому что «это» относится к диалогу, а не к этому классу.

Answer 4

Попробуйте добавить переменную, равную глобальной, например,

function CreateItemModal(config) {
    // initialize some variables including $wrapper
};

CreateItemModal.prototype.show = function() {
    var $this = this;
    this.$wrapper.dialog({
    buttons: {
        // this crashes because this is not the current object here
        Cancel: $this.close
    }
});

Как по мне, в большинстве случаев работает