ES2015类是否“不自动绑定"? [英] Do ES2015 Classes "not autobind"?

问题描述

我已经使用React一段时间了，我对必须手动将组件方法绑定到组件实例这一概念感到满意，因为React决定不自动绑定是惯用的":

I have been using React for a while now, and I have become comfortable with the concept that I must manually bind my component methods to my component instance, as React made the decision to be "idiomatic" in not autobinding:

因此，我们决定不将此内置到React的类中 模型.您仍然可以在构造函数中显式预绑定方法，如果 你想要的.

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 ，来自以下类似问题:

We can clearly see the effects of this in this example http://jsbin.com/citafaradu/2/edit?js,console,output , from this similar question: How to properly bind current object context in ES6 using babelify

但是，最近有人问我基于原型的类与新的ES2015类之间是否有区别.直观上，这个答案应该是明确的不！" ，因为生成的实例对象自然会具有正常的原型并表现出良好的行为，就像JS对象一样！而且，没有绑定到实例的实例方法的用途是什么?

However, someone asked me recently whether there was any difference between prototype based classes and new, ES2015 classes. Intuitively, this answer should be an emphatic "no!", as the resulting instance objects will naturally have normal prototypes and behave... well, like JS objects! And furthermore, what would be the use of instance methods not bound to the instance?

我试图寻找任何迹象表明这对es6类是偶发"的，但是我发现的只是React开发人员提出的其他问题，答案如下:

I tried to search for any indication that this would be "idomatically" true of es6 classes, but all I turned up were other questions from React devs, with answers like this:

React的ES6类没有自动绑定.在此处记录: https://facebook.github.io/react/docs/reusable -components.html#no-autobinding

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

原因是javascript的ES6类没有自动绑定 都不[原文如此]. React试图不重新发明已经存在的东西 javascript. ES5没有很好的类语法，因此React必须发明 这是自己的课程.但是现在有了ES6类，我们就可以使用标准 javascript.
-"cody"， https://github.com/facebook/react/issues/4065

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移植的技巧吗?看一下先前示例的render方法的输出:

Now I was really confused. Was this perhaps a trick of the JSX transpilation? Taking a look at the output of the render method of the prior example:

{
    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，它将绝对将与其一起添加的函数绑定到它们所附加的对象上.

No dice here either - The babel output uses Object.defineProperty, which will absolutely bind functions added with it to the object they are attached to.

所以，我很茫然.我在此问题上发现的大多数回复都比es2015最终规范要早-因为我在规范本身中找不到任何相关信息，是否有任何变更会使React团队的方法无效?这是我以某种方式曲解的奇怪的人工翻译产物吗?反应是在幕后做些古怪的事引起的吗?如果是这样，为什么他们会反复声称这样做是为了符合ES2015标准?如果不是，那么是什么导致了给出的第一个示例中所示的行为?

And so, I am at a loss. Most of the responses I found around this are older than the final es2015 spec - as I cannot find anything about it in the spec itself, was there a change that would have invalidated the React team's approach? Is this a strange artifact of transpilation that I have somehow misinterpreted? Is react doing something wacky behind the scenes to cause this? If so, why would they repeatedly claim that this was done to match the ES2015 standard? And if not, what is causing the behavior seen in the first example given?

推荐答案

我有类似的问题.您的类中的方法将能够引用同一类中的其他方法，因为它们是同一上下文的一部分(

I had similar questions. Methods within your class will be able to reference other methods in the same class, because they are part of the same context (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this).

此示例显示类中的方法可以访问this上的属性，而无需绑定在构造函数中: http://jsbin.com/tapokotahi/1/edit?js，控制台，输出. renderElements方法未绑定，但正在访问this.state.

This example shows that methods in a class can access properties on this without being bound in the constructor: http://jsbin.com/tapokotahi/1/edit?js,console,output. The renderElements method is not bound, but is accessing this.state.

将类方法传递到事件处理程序时，需要对其进行绑定(或定义为箭头函数)，因为执行上下文从类的上下文更改为事件处理程序的上下文.

The class methods need to be bound (or defined as arrow functions) when they are passed into event handlers, because the execution context changes from that of the class to that of the event handler.

我同意，当我们阅读React文档时，这似乎令人困惑，他们告诉我们需要在构造函数中绑定方法，但这仅在将方法传递给React的事件处理程序(例如onClick)时是必需的.

I agree it seems confusing when we read the React docs and they tell us we need to bind the methods in the constructor, but that is only necessary when passing the methods to React's event handlers such as onClick.

这篇关于ES2015类是否“不自动绑定"?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！