js函数不同写法的区别

Question

 class App extends React.Component {
        state = {
            counter: 0,
        };

        handleClick=()=> {
            const counter = this.state.counter;            this.setState({counter: counter + 1});
        };        
        //如果写成下面的形式，则点击无效，这两者区别是什么
        handleClick(){
            const counter = this.state.counter;            this.setState({counter: counter + 1});
        };

        render() {            return (
                <div>
                    counter is: {this.state.counter}
                    <button onClick={this.handleClick}>点我</button>
                </div>
            )
        }
    }

Answer 1

我没用过React，但是大概能猜到原因，应该就是函数执行上下文的问题，第一种写法是箭头函数，App实例化时handleClick的this已经被绑定到当前实例了，而第二种写法则会在执行的时候确定上下文，如果你的button中的onclick会被编译成 onclick="someInstance.handleClick"，那么执行时的this就会是window。为了确认，你可以把第一种写法改成普通的function的写法，或者把onclick里的东西改成this.handleClick.bind(this)`（不是很确定React能不能这么写），然后使用第二种写法。