Значение this в функции-прототипе Javascript, используемой в качестве обработчика события

Question

Я пытаюсь использовать наследование прототипов в Javascript. Проблема с моим кодом ниже состоит в том, что когда кнопка нажата и вызывается MyNamespace.MyObj.myEventHandler, значение this не является экземпляром MyNamespace.MyObj, а является кнопкой, которая была нажата.

Я неправильно структурирую вещи (есть ли лучший способ)? Могу ли я как-то убедиться, что this является экземпляром объекта, а не кнопкой вызова?

var MyNamespace.MyObj = function(myform) {
  this.myform = myform;
  jQuery('.mybutton', this.myform).click(this.myEventHandler);
};

MyNamespace.MyObj.prototype = {
  myEventHandler: function() {
    this.myform.get(0).submit();
  }
};

jQuery(document).ready(function() {
  new MyNamespace.MyObj(jQuery('#myform'));
});

Это просто очень тупой пример, который я использую для изучения наследования прототипов. Я понимаю, что реальная функция приведенного выше кода может быть выполнена просто в jQuery или что я могу использовать литерал объекта или шаблон Module - но на самом деле я просто заинтересован в изучении наследования прототипа, а не в реализации конкретной функции в данный момент .

Answer 1

Есть несколько способов сохранить значение this, самый простой IMO:

var MyNamespace.MyObj = function(myform) {
  var instance = this; // store `this`
  this.myform = myform;
  jQuery('.mybutton', this.myform).click(function () {
    instance.myEventHandler(); // use the stored value
  });
};

Answer 2

Если у вас есть доступ * к es5 Function.prototype.bind, вы можете сделать это:

jQuery('.mybutton', this.myform).click(this.myEventHandler.bind(this));

jQuery предоставляет jQuery.proxy, что делает то же самое, но с другим синтаксисом:

jQuery('.mybutton', this.myform).click(jQuery.proxy(this.myEventHandler, this));

Оба они работают с методом и объектом и возвращают функцию, которая вызовет этот метод для этого объекта.

Когда вы передаете (или назначаете) метод в javascript, он отсекается от исходного объекта. Это только одна из тех вещей, которые вы должны знать. (Это то же самое, что делает наследование работающим, на самом деле. Методы отсекаются от родителя и вызываются в контексте дочернего элемента.)

* Скажем, через es5 шим .