Вызов метода по ширине события JS OOP (прототип)

Question

Я надеюсь, что кто-нибудь может мне помочь =)

Я стараюсь сделать пример простым:

function myClass(){
//some Code
}

myClass.prototype.func1 = function(){
//some Code
}

myClass.prototype.func2 = function(){
   document.getElementById("myEl").onclick = function(){
      this.func1 //does not work, this is only the Element...
   }
}

Как работает вызов func1? Я хочу связать событие onclick в func2.

Answer 1

Во-первых, вы должны сохранить ссылку на текущий объект.Как вы уже заметили, внутри обработчика событий this ссылается на элемент DOM.Вы можете сделать это с помощью

var self = this;

Во-вторых, вам нужно вызвать функцию:

self.func1();

Полный пример:

myClass.prototype.func2 = function(){
   var self = this;
   document.getElementById("myEl").onclick = function(){
      self.func1();
   };
}

---

В более новых браузерах вы также можете использовать .bind() ^[MDN] , чтобы явно определить, на что должен ссылаться this (см. MDNдокументы для прокладки для других браузеров):

document.getElementById("myEl").onclick = this.func1.bind(this);

Answer 2

Внутри функции onclick значение this привязывается к элементу, по которому выполняется щелчок. Вам нужно сохранить копию (ссылку) на this внутри func2:

myClass.prototype.func2 = function(){
    var self = this; //keep a reference to the this value
    document.getElementById("myEl").onclick = function(){
        self.func1();
    }
}