关于javascript:thiscaller和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…