一直理解不了React中这里的this绑定是指什么

Question

在学习React框架的时候，遇到个问题。一直不理解这里的.bind(this)中的this指代什么，我先上代码import React from 'react';class Contacts extends React.Component {  constructor(props) {    super(props);  }  handleClick() {    console.log(this); // React Component instance  }  render() {    return (      <div onClick={this.handleClick.bind(this)}></div>    );  }}export default Contacts;这里的 this.handleClick.bind(this) 最后这个this知道的就是 Contacts这个类吗？但是我看别的例子中的this介绍，比如下面这个var foo={x:3}var bar=function(){console.log(this.x)}bar()   //undefinedvar boundFunc=bar.bind(foo);boundFunc();    //3这里的this是换了一个scope，那么我问题中问的this指代的就是 Contacts这个类吗？class A extends React.Component{    constructor(props) {    super(props);  }  handleClick() {    console.log(this);   }    render() {    return (      <div onClick={this.handleClick.bind(this)}></div>    );  }}class B extends React.Component{    handleClick() {    console.log("XXXX");   }    render() {    return (      <div onClick={this.handleClick.bind(A)}></div>   //我这里这么写是不是就可以把这里的socpe绑定到 class A环境里去了？可能语法有问题，或是实现不了，但是我就是借这个例子问一下bind()的用法    );  }}谢谢大神~~~

Answer 1

类的实例啊 实例话后的组件

Answer 2

class中默认是没有this这个对象的，如果要在class中使用this，必须从父class中继承。

让class中有this,通过constructor实现:

constructor() {

    super(...arguments);

}

继承后的this，要在function中实现呢，必须绑定到function中，有两种办法：

1、通过bind方法

constructor() {

    super(...arguments);

    this.handleClick= this.handleClick.bind(this);

}

//call

<div onClick={this.handleClick}></div>

2、通过箭头函数

<div onClick={() => this.handleClick()} />

不建议你在事件引用的时候再绑定，而是在constructor方法中绑定。也是官方推荐方法。更方便的可以使用arrow function.