Javascript получает ссылку на родительский объект/класс из обработчика событий

У меня есть класс (или объект, содержащий функцию; я слышал, что такого понятия, как класс Javascript, не существует) под названием Foo с обработчиком событий, привязанным к событию щелчка. Когда вызывается обработчик события, я хочу изменить свойство моего класса Foo. Обычно я бы использовал ключевое слово this, но в обработчике событий ссылка this устанавливается на ссылку на элемент html. Вот мой код:

function Foo() {

    this.num=0;
    $('element').click(this.eventHandler);// jQuery to attach an onclick event to my element.

    this.eventHandler=function() {
        this.num++;// This doesn't work.
        // Normally, "this" would refer to my instance of Foo,
        // but as an event handler, "this" refers to the html element.
    }
}

Итак, мой вопрос: как мне получить ссылку на мой экземпляр Foo в мой обработчик событий, чтобы я мог изменить его свойства (например, num)?


javascript class oop jquery jquery-events
person Joel    schedule 18.05.2012    source источник

Ответы (4)


arrow_upward
15
arrow_downward 

function Foo() {
    var _self = this;
    this.num=0;

    $('element').click(this.eventHandler);// jQuery to attach an onclick event to my element.

    this.eventHandler=function() {
        _self.num++;
    }
}

используйте ссылку _self = this, определенную во внешней области

person Fabrizio Calderan    schedule 18.05.2012
comment
Не может ли это решение вызвать утечку памяти, если объект когда-либо потребуется освободить? - person Chris Ellingsworth; 01.07.2014

arrow_upward
15
arrow_downward

Вам нужно связать контекст функции; в противном случае this будет глобальным объектом:

$('element').click($.proxy(this.eventHandler, this));

В современном браузере вы также можете использовать Function.prototype.bind:

$('element').click(this.eventHandler.bind(this))
person ThiefMaster    schedule 18.05.2012
comment
Это действительно должен быть принятый ответ. Это более надежно, поскольку закрытие не всегда возможно. - person Josh Werts; 28.05.2015

arrow_upward
2
arrow_downward 

function Foo() {
   this.num=0;
   $(document).on('click', 'element', this, this.eventHandler);
   this.eventHandler=function(e) {
      var _this = e.data; 
      _this.num++;
   }
}

1) Используйте метод JQuery on() для подключения прослушивателей событий. 2) Используйте ссылку _this для доступа к родительскому классу.

person Swapnil Bhamat    schedule 16.02.2015

arrow_upward
1
arrow_downward

Вы можете сохранить ссылку на this в конструкторе, к которому вы можете получить доступ в своем обработчике событий.

function Foo() {

    this.num=0;
    $('element').click(this.eventHandler);// jQuery to attach an onclick event to my element.

    var that = this;
    this.eventHandler=function() {
        that.num++;// This doesn't work.
    }
}
person alex    schedule 18.05.2012