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

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


javascript object jquery prototypal-inheritance
person aw crud    schedule 22.07.2010    source источник

Ответы (2)


arrow_upward
5
arrow_downward

Существуют различные способы сохранить значение 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
  });
};
person Christian C. Salvadó    schedule 22.07.2010
comment
Отлично - это работает. Является ли это общим шаблоном для подражания или мой код может/должен быть структурирован таким образом, что в этом нет необходимости, при достижении тех же результатов? - person aw crud; 22.07.2010
comment
@RenderIn: Да, я думаю, что это широко используемый шаблон, хотя есть другие способы... - person Christian C. Salvadó; 22.07.2010

arrow_upward
0
arrow_downward

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

person Sean McMillan    schedule 05.04.2011