javascript - 此绑定(bind)在 forEach 箭头函数中未按预期工作

Question

我有一个类，其中我在构造函数中绑定(bind)了一些函数。这工作正常，符合预期

class Row {
  constructor(props) {
    super(props)
    this.onEditRowClick = this.onEditRowClick.bind(this)
    this.onCommitRowClick = this.onCommitRowClick.bind(this)
    this.onDeleteRowClick = this.onDeleteRowClick.bind(this)
    this.onCellChange = this.onCellChange.bind(this)
  }
  ...
}

但是，如果我改成

class Row {
  constructor(props) {
    super(props)

    let handlers = [this.onEditRowClick, this.onCommitRowClick, this.onCellChange, this.onDeleteRowClick]
    handlers.forEach(handler => {handler = handler.bind(this)})
  }
  ...
}

它显然不起作用，因为我收到异常，表明我的函数调用中的 this 是 null。

我认为箭头函数实现了词法 this 绑定(bind)？

另外，如果我这样做

class Row {
  constructor(props) {
    super(props)

    [this.onEditRowClick, this.onCommitRowClick, this.onCellChange, this.onDeleteRowClick].forEach(handler => {handler = handler.bind(this)})
  }
}

我明白了

Uncaught TypeError: Cannot read property 'forEach' of undefined

同时 this完全没问题

[1,2,3].forEach(function(item){console.log(item)})

也许我遗漏了一些非常明显的东西，我该 sleep 了？

Answer 1

Function.prototype.bind()从绑定(bind)到传递的上下文的现有函数创建新函数。因此，您在第一个工作示例中重新分配属性:

this.onEditRowClick = this.onEditRowClick.bind(this);

但是在后一个示例中，您跳过了重新分配阶段。要解决这个问题，您可以遍历方法名称，将其绑定(bind)到 this 实例并重新分配:

class Row {
  constructor(props) {
    super(props);

    let handlers = [
      'onEditRowClick',
      'onCommitRowClick',
      'onCellChange',
      'onDeleteRowClick'
    ];

    handlers.forEach(handler => {
        this[handler] = this[handler].bind(this);
    });
  }
  ...
}