this指向的规定
看两个点：
- this定义在哪个函数中
- 该函数被谁调用
最终this就指向谁
JSX中的this指向
class Demo extends Component{ state = { count: 0 } handleClick = () => { this.setState({count: this.state.count+1}) } render(){ return( <> {this.state.count} <button onClick={this.handleClick}>按钮</button> </> ) }}onClick={this.handleClick}中的this：
定义在哪个函数中
- 定义在render函数中
函数被谁调用：
- render函数被React调用，所以this指向React，又因为React做了一些设置，将this指向Demo类的实例，所以这里的this指向Demo类实例，所以this.handleClick就是 Demo实例.handleClick
Function函数中的this指向
class Demo extends Component{ state = { count: 0 } handleClick = function(){ this.setState({count: this.state.count+1}) } render(){ return( <> {this.state.count} <button onClick={this.handleClick}>按钮</button> </> ) }}// 点击按钮报错// Cannot read properties of undefined (reading 'setState')handleClick=function(){ this.setState...)中的this：
定义在哪个函数中：
- 定义在Demo类的handleClick函数中
函数被谁调用：
onClick={this.handleClick}是将Demo.handleClick这个函数作为onclick事件的回调函数应用，回调函数执行时没有被调用者
js中，函数如果找不到调用者，最初就会在顶层对象中调用，也就是this会指向window对象，但因为应用了ES6语法，ES6语法默认采纳严格模式，严格模式下，this不会指向window，而是undefined，所以才会报错。
箭头函数中的this指向
class Demo extends Component{ state = { count: 0 } handleClick = () => { this.setState({count: this.state.count+1}) } render(){ return( <> {this.state.count} <button onClick={this.handleClick}>按钮</button> </> ) }}// 点击按钮失常箭头函数中的this:
定义在哪个函数中：
- 定义在Demo类的handleClick函数中
函数被谁调用：
onClick={this.handleClick}是将Demo.handleClick这个函数作为onclick事件的回调函数应用，回调函数执行时没有被调用者
尽管没有调用者，但因为应用了箭头函数，箭头函数外部的this就是定义时下层作用域的this，handleClick下层作用域是类的构造函数，那么handleClick的this就是构造函数的this，也就是指向Demo类的实例，所以可能失常执行
{()=>this.handleClick()}的this指向：
class Demo extends Component{ state = { count: 0 } handleClick = function (){ this.setState({count: this.state.count+1}) } render(){ return( <> {this.state.count} <button onClick={() => this.handleClick()}>按钮</button> </> ) }}// 点击按钮失常{()=>this.handleClick()}的this:
定义在哪个函数中：
- 定义在() => 箭头函数中，
该函数被谁调用：
{() => this.handleClick()}整体作为onclick事件触发时的回调函数被调用
{()=> this.handleClick()}是定义在render函数中的，所以这个箭头函数内的this是指向Demo实例的，当onclick触发执行回调时，执行()=> this.handleClick()，外部又执行this.handleClick()，因为箭头函数内的this指向Demo实例，所以理论执行的就是Demo.handleClick()，此时handleClick办法是被Demo实例调用，所以handleClick内的this指向Demo实例，所以失常
.bind()办法的this指向
class Demo extends Component{ state = { count: 0 } handleClick = function (){ this.setState({count: this.state.count+1}) } render(){ return( <> {this.state.count} <button onClick={this.handleClick.bind(this)}>按钮</button> </> ) }}// 点击按钮失常this.handleClick.bind(this)的this：
两个this都指向Demo实例，handleClick办法通过bind(this)，其外部的this也被指向了Demo实例，所以可能失常执行