是绑定这个更好还是使用一个变量更好

Is it better to bind this or use a variable?

本文关键字：更好 变量 一个 绑定      更新时间：2023-09-26

这样做更好吗，

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的引用存储在变量中更好？

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

  • 从历史上看，从.bind()创建的函数速度较慢。

  • 绑定的this不能更改其值，而变量可以。（猜测你希望它不会在这里改变。）

  • 您将丢失元素引用，尽管您仍然可以通过event.currentTarget获得它。

另一个需要考虑的替代方案是使对象实现EventListener接口。这将允许您将对象本身作为处理程序传递，并调用您提供的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);

现在，句柄事件中this的值将是您的对象，因此您可以调用它的其他方法，并且不需要.bind和闭包变量。

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

如果你想了解更多关于this关键字的信息，这是对this在不同上下文中可能具有的各种不同值的一个很好的解释：http://javascriptweblog.wordpress.com/2010/08/30/understanding-javascripts-this/

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

Mozilla的bind页面有一个用于bind函数的pollyfill。根据我的经验，添加到内置对象的原型中通常是个坏主意。因此，第二个选项是"更好"——只需确保使用描述性变量名，而不是"that"或"scope"。使用通用名称可能会让人感到困惑，尤其是在添加更多函数时。

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

var scope = this;
var handler = function () {
  scope.emit({
    type: "load",
    asset: asset
  });
};
asset.addEventListener("load", handler, false);
相关文章：