在 ES6(7?) 中使用 Babel 避免 .bind答案

【问题标题】：Avoid .bind in ES6(7?) with Babel在 ES6(7?) 中使用 Babel 避免 .bind
【发布时间】：2016-03-07 02:52:18
【问题描述】：

我的 JSX 中有这个：

<Options options={options} onOptionSelect={this.onOptionSelect.bind(this)} />

但是，我发誓，在将回调方法传递给子 React 组件时，我已经看到了一些否定 .bind 的需要，对吗？

【问题讨论】：

can i use ES6 fat arrow in class methods?的可能重复
@Bergi 是重复的吗？我不是在问如何在类方法中使用胖箭头，而是我可以用什么来实现 X。原来胖箭头就是答案...
是的，问题的标题并不完全相同，但箭头函数似乎正是您要寻找的。你认为“React.js ES6 avoid binding 'this' to every method”是一个更好的副本吗？
在 react.js 博客中提到了自动绑定 facebook.github.io/react/blog/2015/01/27/…

标签： reactjs ecmascript-6 babeljs ecmascript-2016

【解决方案1】：

您可以将arrow function 与属性初始化结合使用。

class Component extends React.Component {
  handleClick = () => {
    console.log(this.props);
  }

  render() {
    return <div onClick={this.handleClick} />
  }
}

因为箭头函数是在构造函数的范围内声明的，并且因为箭头函数在其声明范围内维护this，所以一切正常。这里的缺点是这些不会是原型上的功能，它们都将随着每个组件重新创建。不过，这并不是什么坏事，因为bind 的结果是一样的。

【讨论】：

如果你明确地将它放在构造函数中会更好，而不是使用那个实验类属性thingy :-)
@Bergi 为什么这样更好？ Op 特别提到了 ES7 和 babel，这是可以使用的。
a) 更少的混淆 - 你不需要提到它在构造函数的范围内 b) 所有“ES7”目前都只是提议，babel 插件是实验性的
例如，不能保证类属性中的箭头函数会像提案当前支持的那样继续自动绑定。
这可能是真的，但 OP 专门要求没有bind 的解决方案。这是我所知道的唯一一个。此外，您可以配置 Babel 以使用这些运行，即使它已从规范中删除。

【解决方案2】：

您可以使用 ES2015 类语法将组件的所有功能与此 autoBind 辅助函数绑定：

class Component extends React.Component {
  constructor(props) {
    super(props);
    autoBind(this);
  }

  onOptionSelect() {
    // do stuff
  }

  render() {
    return <Options options={options} onOptionSelect={this.onOptionSelect} />;
  }
}

function autoBind(obj) {
    getAllMethods(obj.constructor.prototype)
        .forEach(mtd => {
            obj[mtd] = obj[mtd].bind(obj);
        });
}

function getAllMethods(obj) {
    return Object.getOwnPropertyNames(obj).filter(key => typeof obj[key] == "function");
}

请注意，Component 不必使用用箭头函数定义的方法。

【讨论】：

这并不否定对bind 的需要，因为OP 要求