Javascript 闭包在类方法上的工作方式相同吗？

我刚刚开始学习React.js和Javascript，我有一个非常基本的问题要问你们

这是一个小组件的工作示例，它创建了3个按钮，每次单击按钮时，其值都会递增

class Button extends React.Component {

handleClick = () => {
    this.props.onClickFunction(this.props.incrementValue);
}
render(){
    return(
    <button onClick={this.handleClick}>
        {this.props.incrementValue}
    </button>
    );
    }
}

const Result = (props) => {
    return(
    <div>{props.counter}</div>
  );
};

class App extends React.Component {
    state = {counter: 0};
  incrementCounter = (incrementValue) => {
    this.setState((prevState) => ({
            counter: prevState.counter + incrementValue
    }));
    };

    render() {
    return (
        <div>
        <Button incrementValue={2} onClickFunction={this.incrementCounter}/>
      <Button incrementValue={10} onClickFunction={this.incrementCounter}/>
      <Button incrementValue={99} onClickFunction={this.incrementCounter}/>
      <Result counter={this.state.counter}/>
    </div>
    );  
  }
}

ReactDOM.render(<App />, mountNode);

在体验代码时，我尝试更改handleClick函数

class Button extends React.Component {

handleClick(){
    this.props.onClickFunction(this.props.incrementValue);
}
render(){
    return(
    <button onClick={this.handleClick}>
        {this.props.incrementValue}
    </button>
    );
    }
}

const Result = (props) => {
    return(
    <div>{props.counter}</div>
  );
};

class App extends React.Component {
    state = {counter: 0};
  incrementCounter = (incrementValue) => {
    this.setState((prevState) => ({
            counter: prevState.counter + incrementValue
    }));
    };

    render() {
    return (
        <div>
        <Button incrementValue={2} onClickFunction={this.incrementCounter}/>
      <Button incrementValue={10} onClickFunction={this.incrementCounter}/>
      <Button incrementValue={99} onClickFunction={this.incrementCounter}/>
      <Result counter={this.state.counter}/>
    </div>
    );  
  }
}

ReactDOM.render(<App />, mountNode);

我现在得到：uncaughttypeerror:无法读取未定义的属性“props” 在handleClick评估在

---

据我所知，匿名函数handleClick==>。。。由于闭包，您可以从父级访问道具，但当我用类方法替换它时，为什么魔术会停止？

您的问题似乎不是闭包，而是闭包在JS中的工作方式。在你的工作示例中

handleClick = () => {
    this.props.onClickFunction(this.props.incrementValue);
}

handleClick(){
    this.props.onClickFunction(this.props.incrementValue);
}

您有一个箭头函数，因此，您的this始终指向您的实例，这就是您可以访问this.props的原因

在您的非工作示例中

handleClick = () => {
    this.props.onClickFunction(this.props.incrementValue);
}

handleClick(){
    this.props.onClickFunction(this.props.incrementValue);
}

您不再有arrow函数，因此现在this不再在调用该函数时引用您的实例。这就是您无法访问此.props的原因

---

您可以使用类似于工作案例中的箭头函数来修复此问题，也可以将函数绑定到此当前实例，以确保它始终指向您的实例。

handleClick不是匿名函数。这是一个命名函数，名为handleClick。这与闭包无关，但与闭包的工作方式有关。看一看，然后。handleClick==>。。。是带有箭头函数的类属性。这两个部分使得函数中的这一部分引用组件实例。使用正确的术语将允许您更快地解决问题。这不仅仅是一个问题，而是一个问题。区别不在于一个是匿名的，另一个不是。一个是箭头函数和实例方法，另一个是正则函数和原型方法。一般来说，是的：但是，类属性是一个主要用于反应的实验特征。你使用的东西是，它甚至没有标准化。