Question

做得更好，

asset.addEventListener("load", function () {
  this.emit({
    type: "load",
    asset: asset
  });
}.bind(this), false);

或者

var scope = this;

asset.addEventListener("load", function () {
  scope.emit({
    type: "load",
    asset: asset
  });
}, false);

绑定函数或仅将this的引用存储在变量中是否更好？

Answer 1

这实际上取决于许多因素。以下是一些注意事项：

从历史上看，从.bind()创建的函数速度较慢。
绑定this无法更改其值，而变量可以。（猜猜你希望它不会在这里改变。）
您将丢失元素引用，但您仍然可以通过event.currentTarget获取它。

另一个需要考虑的选择是让您的对象实现事件监听器接口。这将允许您将对象本身作为处理程序传递，并将调用您提供的handleEvent()方法的实现。

然后this值将自动成为您的对象。

因此，如果您的this是来自构造函数的对象，则可以执行此操作：

function MyCtor() {
    // your constructor
}

// This implements the `Event Listener` interface
MyCtor.prototype.handleEvent = function(event) {
          // ------v----should be "load"
    return this[event.type](event)
};

// This is the `load` handler
MyCtor.prototype.load = function(event) {
    this.emit({
      type: "load",
      asset: event.currentTarget
    });
};

然后像这样绑定处理程序：

asset.addEventListener("load", this, false);

现在，handle事件中this的值将成为您的对象，因此您可以调用其他方法，并且不需要.bind或闭包变量。

Answer 2

我觉得第二种选择更好，只是为了防止任何混淆。 this的使用一直是许多JavaScript问题的问题，所以当你可以避免它时，你应该在我看来。顺便说一下，这也是在像Knockout这样的库中完成的。

如果您想了解有关this关键字的更多信息，可以很好地解释this在不同背景下可能存在的各种不同值：http://javascriptweblog.wordpress.com/2010/08/30/understanding-javascripts-this/

Answer 3

第二个选项与更多浏览器兼容。 IE 8及以下版本不支持bind（）函数，如果这对你很重要。

关于绑定的Mozilla页面有一个pollyfill for the bind function。根据我的经验，添加到内置对象的原型通常是一个坏主意。所以第二种选择是＆＃34;更好＆＃34; - 只需确保使用描述性变量名称而不是＆＃34;＆＃34;或＆＃34;范围＆＃34;。使用通用名称会让人感到困惑，尤其是在添加更多功能时。

Answer 4

它们都没有，因为它们都创建了以后永远无法删除的匿名函数。

var scope = this;
var handler = function () {
  scope.emit({
    type: "load",
    asset: asset
  });
};

asset.addEventListener("load", handler, false);

绑定它或使用变量更好吗？

4 个答案: