React 绑定事件为什么会丢失this？ 和如何解决绑定事件this指向问题

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指向