react中类组件this的指向问题

1.铺垫知识

a.普通函数的this指向

若是一个普通函数直接被调用，那this默认是指向全局的，若是非严格模式下，则是指向window的

function display(){
 console.log(this); // window全局
}

display();

若是普通函数为一个对象的属性

1.当此对象直接调用该函数时，则该函数里的this则是指向该对象的

const obj = {
    display: function(){
         console.log(this); 
    }
}

obj.display(); // 打印出来为obj对象

2.若是通过一个其他变量去接收该对象函数，然后再进行调用时，这时因为没有具体的对象去调用了，则函数this则是指向全局 window(非严格模式下)，看普通函数里面的this指向，其实就是看哪个对象调用的函数，若是没有此对象，则默认是window全局对象

const obj = {
    display: function(){
         console.log(this); 
    }
}
const fun = obj.display;
fun(); // 打印出来为window

3.若是使用bind改变函数的this指向，则this则是指向bind传进来的对象，不会再改变

const obj = {
    display: function(){
         console.log(this); 
    }
}
const fun = obj.display.bind({a:1});
fun(); // this指向为{a:1},并不会因为直接调用fun()  就把this修改为window
       // bind修改的this指向，就只会指向传进来的对象 

b.箭头函数的this指向

箭头函数的this总是跟外层普通函数的this一样，若是外层没有普通函数，则指向window全局

const obj = {
    f: () => {
        console.log(this)
    }
}

obj.f(); // this指向window

若是外层有普通函数，则跟外层普通函数的this指向一样

const obj = {
    a: 1,
    fun: function(){
        return () => {
            console.log(this.a) // 1
        }
    }
};
obj.fun()(); // this指向obj对象

 

const obj = {
    a: 1,
    fun: function(){
        return () => {
            console.log(this.a) // undefined
        }
    }
};
const func = obj.fun; 
func()(); // fun函数的this指向为window,故箭头函数的this也为window

运行结果如下: 

 

 

2.react类组件的this指向

在react的类组件中，render中的this默认是指向类组件实例对象的，则当点击事件上绑定的this是指向实例对象的

<button type="button" onClick={this.handleClick}>Click Me</button>

onClick中的this是指向实例对象的，所以可以在实例对象的原型上找到handleClick方法，当点击该按钮后，handleClick方法中的this则会变成undefined，类似于将对象中的方法赋给了其他变量，然后该变量再调用，就丢失了绑定的上下文

// 以下button 的点击事件则类似以下情况
const fun = obj.handle;
fun();  

3.使点击事件中调用方法的this指向实例对象的三种方法

a.因为箭头函数的this跟外层普通函数的this指向是一样的，所以this是指向实例对象的，且是直接指向，故方法内的this指向实例

<button type="button" onClick={() => this.handleClick()}>Click Me</button>

b.定义的方法写成回调函数的形式

因为箭头函数的this只跟外层普通函数this有关

handleClick = () => {
    console.log(this) // this指向类实例对象
}

<button type="button" onClick={this.handleClick}>Click Me</button

c.使用bind去改变this指向，因为bind改变指向后，无论 怎么调用该方法，都是指向bind传入的对象

<button type="button" onClick={this.handleClick.bind(this)}>Click Me</button

以上为react中类组件的this指向问题，有不足之处欢迎指正！！！！！！！