javascript - ES2015 类是 "not autobind"吗？

Question

我已经使用 React 一段时间了，我已经习惯了必须手动将我的组件方法绑定(bind)到我的组件实例的概念，因为 React 决定“惯用”而不是自动绑定(bind):

Therefore we decided not to have this built-in into React's class model. You can still explicitly prebind methods in your constructor if you want.

class Counter extends React.Component {
  constructor() {
    super();
    this.tick = this.tick.bind(this);
  }
  tick() {
    ...
  }
  ...
}

- https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html

在这个例子http://jsbin.com/citafaradu/2/edit?js,console,output中我们可以清楚地看到它的效果，来自这个类似的问题:How to properly bind current object context in ES6 using babelify

然而，最近有人问我基于原型(prototype)的类和新的 ES2015 类之间是否有任何区别。直觉上，这个答案应该是强调的“不!”，因为生成的实例对象自然会有正常的原型(prototype)和行为……好吧，就像 JS 对象一样!此外，未绑定(bind)到实例的实例方法有什么用？

我试图寻找任何迹象表明这对 es6 类来说是“idomatically”正确的，但我发现的只是来自 React 开发人员的其他问题，答案如下:

React's ES6 classes have no autobinding. This is documented here: https://facebook.github.io/react/docs/reusable-components.html#no-autobinding

The reason is that javascript's ES6 classes have no autobinding neither[sic]. React tries to not reinvent stuff that is already in javascript. ES5 has no nice syntax for classes, so React had to invent it's own classes. But now with ES6 classes we can just use standard javascript.
- "cody", https://github.com/facebook/react/issues/4065

现在我真的很困惑。这可能是 JSX 转译的一个技巧吗？查看前面示例的渲染方法的输出:

{
    key: "render",
    value: function render() {
      return React.createElement("div",null,
        React.createElement("input", { 
          type: "text", onChange: this.handleBindedChange 
        }),
        React.createElement("br", null),
        React.createElement("input", { 
          type: "text", onChange: this.handleUnbindedChange 
        }),
        React.createElement("br", null),
        React.createElement("p",null,"Result: ",this.state.demo)
     );
    }
 }

这里也没有骰子 - babel 输出使用 Object.defineProperty，它会将随它添加的函数绝对绑定(bind)到它们所附加的对象。

所以，我很茫然。我发现的大部分响应都比最终的 es2015 规范更早——因为我在规范本身找不到任何关于它的信息，是否有改变会使 React 团队的方法无效？这是我以某种方式误解的奇怪的转译产物吗？ react 是否在幕后做了一些古怪的事情导致了这个？如果是这样，为什么他们会反复声称这样做是为了符合 ES2015 标准？如果不是，是什么导致了第一个示例中出现的行为？

Answer 1

我也有类似的问题。您的类中的方法将能够引用同一类中的其他方法，因为它们属于同一上下文 (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this)。

此示例表明类中的方法可以访问 this 上的属性，而无需在构造函数中绑定(bind):http://jsbin.com/tapokotahi/1/edit?js,console,output . renderElements 方法未绑定(bind)，但正在访问 this.state。

类方法在传递给事件处理程序时需要绑定(bind)(或定义为箭头函数)，因为执行上下文从类的执行上下文更改为事件处理程序的执行上下文。

我同意当我们阅读 React 文档时看起来很困惑，他们告诉我们需要在构造函数中绑定(bind)方法，但这只有在将方法传递给 React 的事件处理程序(例如 onClick)时才有必要>.