React 绑定事件为什么会丢失this?
先来看一个小案例
我们先来定义一个类 Test
class Test{
fun(){
console.log("test")
}
demo(){
console.log(this)
console.log("demo")
}
}
console.log(Test.prototype)
var t = new Test()
然后我们在fun当中调用demo方法并且赋值给变量sum然后我们再调用sum
class Test{
fun(){
console.log("test")
var sum = this.demo
sum()//打印结果为undefind
}
demo(){
console.log(this)
console.log("demo")
}
}
console.log(Test.prototype)
var t = new Test()
t.fun()
打印结果如下
此时我们发现在fun()当中调用的demo的this打印出来的为undefind
然后我们试一试直接调用demo看看打印出来的结果是什么
打印结果如下
而当我们直接调用demo方法的时候此时的demo的this却是指向了实例对象
说明我们是在将demo方法赋值给sum的时候this丢失了得出结论
正常情况下tihs都指向window而class里面只能指向class不能指向window当this向发生改变不指向class时指向就会丢失就成了未定义解决方法
和在react里一样在constructor里使用bind()来改变demo的this指向
此时就有人会问了 这些个和react的事件函数为什么要改变this指向有什么关系嘛?
我们知道jsx的原理本质上是React.createElement()
而React.createElement()有三个参数
第一个参数html标签的名字
第二个参数是传入的标签属性 传入的属性是以键值对的格式传入
第三个属性是节点要显示的内容
所以在第二个参数传入标签属性的时候 就相当于上面案例里的赋值 所以就这这时this就丢失了
解决方法
1.使用箭头函数:由于箭头函数的特性在箭头函数内的this即是指向当前对象的上下问 所以使用箭头函数可以解决
2. 使用在绑定事件时使用bind(this)改变this指向
3.在constructor里使用bind()来改变事件对象的this指向