React中的this

最新推荐文章于 2022-11-10 16:30:21 发布

昏黄烛火轻摇晃

最新推荐文章于 2022-11-10 16:30:21 发布

阅读量71

点赞数

分类专栏： React 文章标签： React

本文链接：https://blog.csdn.net/qq_21532293/article/details/87929317

版权

1 篇文章 0 订阅

订阅专栏

const obj = {
    name:'jack',
    sayHi:function(){
        console.log(this)
    }
}
const func = obj.sayHi;
obj.sayHi();
func();

obj.sayHi()输出的是obj对象，而将obj.sayHi()赋值给中间变量func，在通过func去调用该方法将输出window对象。得出结论：中间变量会导致this指向丢失。

在React中render下的jsx：

 <button onClick={this.handleClick}>点击</button>

handleClick:

function handleClick(){
    console.log(this)
}

其实onClick就是上文的中间变量，会导致丢失this，所以this.handleClick中直接调用实例上的方法是会报错，而且handleClick函数的本身this也不是当前实例的。

所以可以通过将handleClick改写成箭头函数，声明式绑定this，或者使用bind绑定this，看个人

关注