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