вызова прототипа определенная функция из конструктора объекта

Question

У меня есть следующий код:

var FormCollection = function(collectionHolder, options) { 

     // defines the collection holder object (the container where each element of the collection will 
     // be added 
     this.collectionHolder = collectionHolder; 

     this.options = options; 

     // count the current form inputs we have (e.g. 2), use that as the new 
     // index when inserting a new item (e.g. 2) 
     this.collectionHolder.data('index', this.collectionHolder.find(':input').length); 

     this.addItem = collectionHolder.find('[data-collection-item-add]'); 
     this.addItem.on('click',function(e){ 
      e.preventDefault(); 

      // add a new tag form (see next code block) 
      this.add(); 
     });   
    } 

Теперь я хочу, чтобы определить метод добавления называемый внутри события щелчка, в прототипе, так как

FormCollection.prototype.add = function(){ 
    console.log(this.collectionHolder);  
    }; 

Но это дает ошибку, говоря, что this.add не является функцией. Каков наилучший способ решить эту проблему?

Answer 1

Внутри функции обработчика событий this не будет ссылаться на экземпляр (в вашем случае это будет ссылка на элемент с щелчком). Вы можете привязать обработчик событий к экземпляру, чтобы выполнить его в контексте экземпляра:

this.addItem.on('click',function(e){ 
    e.preventDefault(); 

    // add a new tag form (see next code block) 
    this.add(); 
}.bind(this));  

Или вы можете хранить ссылку на this в конструкторе и использовать вместо:

var _this = this; 
this.addItem.on('click',function(e){ 
    e.preventDefault(); 

    // add a new tag form (see next code block) 
    _this.add(); 
});