为什么我的 class 方法在没有显式绑定到 'this' 的情况下可以在 React 中运行？

Question

我束手无策，有人能告诉我为什么这有效吗，即使我注释掉了对 'this' 的显式绑定？据我了解，如果未明确绑定到 class，'this' 应该是未定义的，因此这个例子应该给我一个错误，但它确实有效。我错过了什么？

import React, { Component } from 'react';

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 1
    };

    // this.handleAdd = this.handleAdd.bind(this);
    // this.handleAdd = this.handleSub.bind(this);
  }

  handleAdd() {
    this.setState(prevState => ({ count: prevState.count + 1 }));
  }
  
  handleSub() {
    this.setState(prevState => ({ count: prevState.count - 1 }));
  }

  render() {
    return (
      <div>
        <h1>Counter is at {this.state.count}</h1>
        <button onClick={() => this.handleAdd()}>+</button>
        <button onClick={() => this.handleSub()}>-</button>
      </div>
    )
  }
}

export default Counter;

Answer 1

这是因为您正在使用箭头函数来调用您的方法。在箭头函数中 this 绑定到最近的非箭头父函数中的值。

Answer 2

这里有两个this：

1.

<button onClick={() => this.handleAdd()}>

箭头函数从它们的声明的词法范围中获取this。 class 声明的主体在 严格模式 中是运行。 onClick 处理程序是运行没有任何绑定，这在其中是未定义的。但是由于 this.handleAdd 在 内部，一个箭头函数 ，this 仍然属于对象的实例。因为它是在实例化对象的时候声明的。

2.

当handleAdd执行时，里面的this会依赖于它的执行，因为它不是箭头函数。所以：

this.setState(prevState => ({ count: prevState.count + 1 }));

这里的

this会等于x.handleAdd()中.前面的对象实例。因此它将是上面提到的原始 this，因此是对象实例。

为什么我的 class 方法在没有显式绑定到 'this' 的情况下可以在 React 中运行？

Why my class method works in React without explicitly binding it to 'this'?

this

reactjs