Question

我有一个类，我在构造函数中绑定了一些函数。这很好，并且符合预期

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绑定？

另外，如果我这样做

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)})

也许我错过了一些非常明显的东西，现在是时候去睡觉了吗？

Answer 1

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

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

但是在后一个示例中，您跳过了重新分配阶段。要解决此问题，您可以迭代方法名称，将其绑定到this实例并重新分配：

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

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

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

这个绑定在forEach箭头函数中没有按预期工作

1 个答案: