this，caller和react中的this丢失

this和caller的区别

this代表的，是函数的调用者，函数被谁调用，this就是谁
caller代表的，是函数的执行环境，函数在哪个作用域中执行，caller就是谁

注意区分：调用者和执行环境，不是一回事

    const obj = {
      a: function(){
        console.log(this);
        console.log(obj.a.caller)
      }
    }
    function b(){
      obj.a()
    }
    
    b()

方法a是在 函数B 中执行的，所以caller返回的就是函数B
但方法a，是通过obj去调用的，所以this返回obj

---

换成回调的方式调用方法a：

    const obj = {
      a: function(){
        console.log(this);
        console.log(obj.a.caller)
      }
    }
    function b(cb){
      cb()
    }
    
    b(obj.a)

方法a，仍然是在 函数B 中执行的，所以caller仍然返回函数B
但此时方法a，不是通过obj直接调用，而是通过obj.a找到a函数，将a函数赋值给函数b的参数cb，然后执行cb()，也就是所说的回调函数。
此时的方法a作为回调直接执行，没有被调用者，js中就会将顶层对象作为它的调用者，所以this指向window

---

所以，函数只要固定在某个作用域中执行，那么它的执行环境就永不会变，但不同的调用方式，它的调用者却会随时变化。

this丢失

前面说了，不同的调用方式，函数的调用者，也就是this会随时变化，这是造成js中this会丢失的原因

    const obj = {
      name: 'hh',
      a: function(){
        console.log(this)
      }
    }
    obj.a()

通过obj对象调用了a方法，a方法的调用者是obj对象，所以a方法内的this就是obj对象

    const obj = {
      name: 'hh',
      a: function(){
        console.log(this)
      }
    }
    const b = obj.a
    b()

const b = obj.a是把obj中的a函数，赋值给了变量b
此时变量b的值就是obj.a中的函数，此时直接执行了b()，没有任何调用者，函数内的this按照JS的规则，就会指向顶层对象window
按照JS的规则，如果使用【严格模式】的话，this就不再指向window，而是undefined

    "use strict";

    const obj = {
      name: 'hh',
      a: function(){
        console.log(this)
      }
    }
    const b = obj.a
    b()

---

react中的this丢失

class App extends Component{
    handle = function(){
      console.log(this);
    }
    render(){
        return(
            <>
            <button onClick={this.handle}>按钮</button>
            </>
        )
    }
}

react中的事件绑定，并不是像原生JS中那样简单的把事件处理函数绑定给onclick事件。

onClick={this.handle}实际上是一个赋值操作，把App类中的handle函数，赋值给了onClick变量，当点击事件触发时，实际执行的是onClick()。

react中的onClick()，也不是JS中的原生点击事件，因为原生的事件函数中的this，应该是指向事件源dom对象的；而react中的onClick，是一个合成事件，在全局作用域中执行，没有调用者，所以内部的this是指向window的

又因为使用了class语法，默认采用了严格模式，所以this指向了undefined

---

参考：
版权声明：本文为CSDN博主「知迷鸟」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_...

为什么React中事件绑定的函数内部this默认指向undefined? - 胖脸猫的回答 - 知乎
https://www.zhihu.com/questio...