Question

我正在尝试在事件处理程序中获取原型。

function Post(){
    this.post;
    this.deleteButton;
}
Post.prototype.delete = function(){

    var OBJ = this;//this is not the prototype, instead it is the HTML element (deleteButton)
    $(OBJ.container).remove();
}
Post.prototype.createPost = function(){

    var OBJ = this;
    OBJ.post = document.createElement('div');
    OBJ.post.className = 'post'
    OBJ.deleteButton = document.createElement('div');
    OBJ.deleteButton.addEventListener('click', OBJ.delete, false);
}

请查看上面的评论部分。删除处理程序被声明为Post的原型方法。我将删除处理程序分配给删除按钮。问题是this成为HTML元素而不是对象原型。

编辑：

我也希望有机会删除删除处理程序

Answer 1

像这样：

OBJ.deleteButton.addEventListener('click', function() {
    OBJ.delete();
}, false);

但是OBJ不是原型，而是指实例。

更新：如果您也想删除它，请存储对它的引用：

this.deleteHandler_ = function() {
    OBJ.delete();
};
OBJ.deleteButton.addEventListener('click', this.deleteHandler_, false);

其他地方：

this.deleteButton.removeEventListener('click', this.deleteHandler_);

Answer 2

在jQuery中，您可以使用$.proxy：

var onDelete = $.proxy(OBJ.delete, OBJ);
OBJ.deleteButton.addEventListener('click', onDelete, false);

还有ECMAScript 5 bind方法：

var onDelete = OBJ.delete.bind(OBJ);
OBJ.deleteButton.addEventListener('click', onDelete, false);

删除侦听器：

OBJ.deleteButton.removeEventListener('click', onDelete, false);

Answer 3

Post.prototype.createPost = function(){

    var OBJ = this;
    OBJ.post = document.createElement('div');
    OBJ.post.className = 'post'
    OBJ.deleteButton = document.createElement('div');
    OBJ.deleteButton.addEventListener('click', function(){OBJ.delete();}, false);
}

如果您使用的是jquery，则可以使用代理方法：

  OBJ.deleteButton.addEventListener('click',$.proxy(OBJ.delete,OBJ), false);

在事件处理程序中获取原型

3 个答案: