Я пытаюсь использовать наследование прототипов в 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 или что я мог бы использовать литерал объекта или шаблон модуля, но на самом деле меня просто интересует изучение наследования прототипа, а не реализация конкретной функции в настоящее время .

1
aw crud 22 Июл 2010 в 19:07

2 ответа

Лучший ответ

Есть различные способы сохранить значение 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
  });
};
5
CMS 22 Июл 2010 в 15:10

Если у вас есть доступ * к 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.

0
Sean McMillan 5 Апр 2011 в 02:24