javascript - 为什么我必须为 React 组件类中定义的方法添加 .bind(this) ，而不是在常规 ES6 类中定义方法

Question

令我困惑的是，为什么当我定义一个 React 组件类时，this 中包含的值对象在类中定义的方法中未定义( this 在生命周期方法中可用)，除非我使用 .bind(this)或者使用箭头函数定义方法，例如以下代码 this.state将在 renderElements 中未定义函数，因为我没有用箭头函数定义它，也没有使用 .bind(this)

class MyComponent extends React.Component {
    constructor() {
        super();
        this.state = { elements: 5 }
    }

    renderElements() {
        const output = [];

        // In the following this.state.elements will be undefined
        // because I have not used  .bind(this) on this method in the constructor
        // example: this.renderElements = this.renderElements.bind(this)
        for(let i = 0; i < this.state.elements; i ++){
            output.push(<div key={i} />);
        }

        return output;
    }

    // .this is defined inside of the lifecycle methods and 
    // therefore do not need call .bind(this) on the render method.
    render() {
        return (
            <div onClick={this.renderElements}></div>
        );
    }
}

那么在下面的例子中我不需要使用.bind(this)或箭头函数 this按预期可用 speak功能

class Animal { 
    constructor(name) {
        this.name = name;
    }
    
    speak() {
        console.log(this.name + ' makes a noise.');
    }
}

class Dog extends Animal {
    speak() {
        console.log(this.name + ' barks.');
    }
}

var d = new Dog('Mitzie');
d.speak();

http://jsbin.com/cadoduxuye/edit?js,console

澄清一下，我的问题分为两部分。一)为什么在第二个代码示例中我不需要调用.bind(this)到speak函数，但我在 React 组件中执行 renderElements函数和二)为什么生命周期方法(render、componentDidMount 等)已经可以访问该类'this对象，但是 renderElements没有。

在 React 文档中，它说了以下内容

[React Component Class] Methods follow the same semantics as regular ES6 classes, meaning that they don't automatically bind this to the instance.

但显然他们确实如此，正如我发布的第二个代码示例所示。

更新

前两条评论中的两个链接都显示了不使用 .bind(this) 的 React 类的工作示例。在类方法上，它工作得很好。但文档中仍然明确表示您需要绑定(bind)方法，或使用箭头函数。在使用 gulp 和 babel 的项目中我可以重现。这是否意味着浏览器已经更新了东西？

更新2

我的初始代码示例有 this.renderElements()直接在渲染函数中调用。这将按预期工作，无需绑定(bind)函数或使用箭头函数定义它。当我将该函数设置为 onClick 时，就会出现此问题处理程序。

更新3

The issue occurs when I put the function as an onClick handler.

事实上这根本不是问题。 this的背景当传递给 onClick 处理程序时会发生变化，这就是 JS 的工作原理。

Answer 1

this的值主要取决于函数的调用方式。鉴于d.speak(); , this将引用d因为该函数被称为“对象方法”。

但是在 <div>{this.renderElements}</div>您没有调用该函数。您将函数传递给 React，React 会以某种方式调用它。当它被调用时，React 不知道该函数“属于”哪个对象，因此它无法为 this 设置正确的值。 。绑定(bind)解决了这个问题

我实际上认为你真正想要的是

<div>{this.renderElements()}</div>
//         call function ^^

即调用函数作为对象方法。那么你就不必绑定(bind)它。

<小时/>

看看MDN了解更多 this .