ES2015 类“不自动绑定”吗？

IT技术 javascript reactjs ecmascript-6
2021-03-30 02:47:22

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

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

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 中清楚地看到这个效果，来自这个类似的问题：如何使用 babelify 在 ES6 中正确绑定当前对象上下文

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

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

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

原因是 javascript 的 ES6 类也没有自动绑定[原文如此]。React 试图不重新发明已经在 javascript 中的东西。ES5 没有很好的类语法，所以 React 不得不发明它自己的类。但是现在有了 ES6 类，我们可以只使用标准的 javascript。
- “科迪”，https://github.com/facebook/react/issues/4065

现在我真的很困惑。这可能是 JSX 转译的伎俩吗？看一下前面示例的 render 方法的输出：

{
    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，它将绝对将添加的函数绑定到它们所附加的对象。

所以，我不知所措。我在这方面找到的大多数回复都比最终的 es2015 规范更旧——因为我在规范本身中找不到任何关于它的信息，是否有任何更改会使 React 团队的方法无效？这是我以某种方式误解的奇怪转译神器吗？react是否在幕后做了一些古怪的事情来导致这种情况？如果是这样，为什么他们会反复声称这样做是为了符合 ES2015 标准？如果不是，是什么导致了在给出的第一个示例中看到的行为？

5个回答

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

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

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

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

是的，他们给出的一些例子让我拔了头发。惊喜，它this和我们所知道和喜爱的一样古老。必须自己解决：jsfiddle.net/zf83ktm1/1
2021-06-13 02:47:22
@MaxPRafferty“老this样子” ——正是这个想法
2021-06-13 02:47:22

React 一直提到自动绑定的原因是因为React.createClass它自动绑定了所有方法。这种方法是创建组件的唯一方法。

人们，尤其是那些不熟悉 JavaScript 的人，习惯于将方法传递给其他组件，并且this会“神奇地”工作。这个特性在使用原生 ES6 类时消失了，所以他们需要强调差异。

但是是的，ES6 类基本上只是构造函数 + 原型的语法糖。方法不绑定到对象：

class Foo {
  bar() {}
}

const foo = new Foo();

console.log(foo.hasOwnProperty('bar')); // false
console.log(typeof Foo === 'function'); // true
console.log(Foo.prototype.hasOwnProperty('bar')); // true

@Bergi：Afaik，是的。
2021-05-27 02:47:22
等等，Python 是基于原型的？
2021-06-09 02:47:22
2021-06-17 02:47:22

您可以在构造函数中使用一个小样板让 ES6 类方法自动绑定：

function autobind() {
  for (let prop of Object.getOwnPropertyNames(Object.getPrototypeOf(this))) {
    if (prop === 'constructor' || typeof this[prop] !== 'function') continue;
    this[prop] = this[prop].bind(this);
  }
}

class Test {
  constructor() {
    autobind.call(this);
    this.message = 'hello all!';
  }
  method1(){ return this.method2(); }
  method2(){ console.log(this.message);}
}
let test = new Test();
let b = test.method1;
b();

更新：

从那以后，我找到了一个Babel 插件，它可以转换向上的 ES 类字段和静态属性，您可以将其用于需要绑定到this

class Bork {
    //Property initializer syntax
    instanceProperty = "bork";
    boundFunction = () => {
      return this.instanceProperty;
    }

    //Static class properties
    static staticProperty = "babelIsCool";
    static staticFunction = function() {
      return Bork.staticProperty;
    }
}

let myBork = new Bork;

//Property initializers are not on the prototype.
console.log(myBork.__proto__.boundFunction); // > undefined

//Bound functions are bound to the class instance.
console.log(myBork.boundFunction.call(undefined)); // > "bork"

//Static function exists on the class.
console.log(Bork.staticFunction()); // > "babelIsCool"

我遇到了不能自动绑定到类的方法的问题。我做了一个库来帮助：https : //www.npmjs.com/package/auto-bind-inheritance

我使用它并感谢任何反馈以改进它。它基于其他几个 npm 包，我相信我对它们进行了改进。

自动绑定。

这个库在 Node.js 中对我来说很好用。但我不确定这是否也适用于 React.js。 

const AUTO_BIND = require("auto-bind");

class Programmer {

  constructor(name, age) {
    this.Name = name;
    this.Age = age;
    AUTO_BIND(this);
    //* For React component
    //* AUTO_BIND.react(this);
  }

  ShowName() {
    console.log(`My name is ${this.Name}`);
  }

  ShowAge() {
    console.log(`My age is ${this.Age}`);
  }

  ShowDetail() {
    this.ShowName();
    this.ShowAge();
  }
}
const programmer = new Programmer("M. Hamza Rajput", 25);

const { ShowDetail } = programmer;

ShowDetail();

console.log(programmer.hasOwnProperty('ShowDetail')); // true
console.log(typeof programmer === 'object'); // true
console.log(Programmer.prototype.hasOwnProperty('ShowDetail')); // true
其它你可能感兴趣的问题
上一篇尝试将 mongoose 与 webpack 一起使用时出现大的神秘错误和警告 下一篇如何在不弹出 create-react-app 的情况下压缩构建。还将压缩文件包含到 index.html 中的脚本标记中