Question

我正在尝试创建自定义模块。我使用prototype添加其他方法。该模块将有一个事件，我将不得不使用＆＃39; this＆＃39;来访问模块中的方法。我会使用bind。

来做到这一点

我遇到了一个小问题。我创建了一个方法，然后使用prototype，我使用variable方法将方法分配给bind。问题是，＆＃39; this＆＃39;不是我通过bind的那个人。这是示例代码：

JSFiddle

＆＃13;

function MyPlugin() {
  this.hello = 'hello'
  document.addEventListener('click', this.clickedBinded);
  this.clickedBinded('e');
}

MyPlugin.prototype.clickedBinded = clicked.bind(this);

function clicked(e) {
  console.log(this.hello, e);
}

var plugin1 = new MyPlugin();

＆＃13;

如何clickedBinded this this为this？这意味着，我不希望Window成为MyPlugin，我希望它是MyPlugin.prototype.clickedBinded = clicked.bind(this)。

更新

我之所以这样做：document.addEventListener('click', this.clicked.bind(this));而不是：bind，是因为我必须在某个时候删除该事件。作为this answer sais，如果您在事件处理程序中使用bind，并且想要删除该事件，则必须将方法variable分配给{{1} }}

Answer 1

.bind()必须在您希望它被绑定的对象之后被调用，并且当您在正确的上下文中获得对所需对象的引用时。首次加载代码时，您正在调用.bind()。这对this没有意义的价值。相反，将代码更改为：

＆＃13;

function MyPlugin() {
  this.hello = 'hello';
  // save bound function so you can use it to remove the listener later
  this.fn = this.clicked.bind(this);
  document.addEventListener('click', this.fn);
  this.clicked('e');
}

MyPlugin.prototype.clicked = function(e) {
  console.log(this.hello, e);
}

// method that will remove the event listener
MyPlugin.prototype.stopClick = function() {
    document.removeEventListener('click', this.fn);
}

var plugin1 = new MyPlugin();

＆＃13;

请注意，在此固定版本中，当我们已经拥有与我们当前对象相对应的.bind(this)时，才会调用this。

在您的版本中，您在首次加载代码时调用clicked.bind(this)并且this将具有全局值，该值在严格模式下为undefined，在非严格模式下为浏览器为window。当您致电new MyPlugin()时，您将使用clicked.bind(this)创建的对象甚至不存在，因此this显然无法包含适当的值。

如果您希望以后能够删除事件侦听器，那么只需存储绑定的侦听器，以便以后可以使用它。

Answer 2

正如jfriend00所解释的那样，你应该在构造函数中绑定事件监听器。每个实例都有不同的监听器。

如果您希望能够删除侦听器，请将其存储在实例中：

＆＃13;

size - 1

＆＃13;

var click = document.getElementById('click'),
    remove = document.getElementById('remove');
function MyPlugin() {
  this.hello = 'hello';
  var listener = clicked.bind(this);
  click.addEventListener('click', listener);
  remove.addEventListener('click', function self() {
    click.removeEventListener('click', listener);
    remove.removeEventListener('click', self);
  });
}
function clicked(event) {
  console.log(this.hello);
}
var plugin1 = new MyPlugin();

＆＃13;

＆＃39;这＆＃39;分配和绑定到变量时不起作用

JSFiddle

2 个答案: