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();
        });          
  }

现在我想在原型中定义click事件中调用的add方法，因为

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

但它给出了一个错误，说这个.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();
});

从对象构造函数调用prototype原型定义的函数

1 个答案: