Метод объекта события триггера теряет объект

Question

Я не очень привык к синтаксису прототипирования javascript, так что это может быть очень просто.

function MyClass(){
   this.init = function(input){
      this.input.onkeyup = function(){
         this.change();
      }
   }
}

Очевидно, что я кое-что здесь упустил, но this.input ссылается на элемент HTML input. Проблема здесь в том, что this в this.change() больше не будет ссылаться на экземпляр MyClass, а на HTML-элемент. Как я могу получить объект вместо элемента?

Answer 1

Обработчики событий автоматически указывают ключевое слово this на элемент, на котором запускается событие. ECMA-262, 5-е издание, пытается бороться с подобными ситуациями путем реализации старой техники «привязки» функции к определенному объекту:

// From Prototype.js
if (!Function.prototype.bind) { // check if native implementation available
  Function.prototype.bind = function(){ 
    var fn = this, args = Array.prototype.slice.call(arguments),
        object = args.shift(); 
    return function(){ 
      return fn.apply(object, 
        args.concat(Array.prototype.slice.call(arguments))); 
    }; 
  };
}

Использование:

function MyClass(){
   this.init = function(input){
      this.input.onkeyup = (function(){
         this.change();
      }).bind(this);
   }
}

Реализация ECMAScript аналогична реализации PrototypeJS (для которой приведен код выше).

Вы также можете реализовать его для каждого класса:

function MyClass(){
   this.bind = function(){ 
       var args = Array.prototype.slice.call(arguments),
           self = this,
           fn = args.shift();
       return function(){ 
         return fn.apply(self, 
           args.concat(Array.prototype.slice.call(arguments))); 
       }; 
   };
   this.init = function(input){
      this.input.onkeyup = this.bind(function(){
         this.change();
      });
   }
}

Архаическая опция ;-) - просто сохранить ссылку на this вне функции:

function MyClass(){
   var self = this;
   this.init = function(input){
      this.input.onkeyup = function(){
         self.change();
      }
   }
}