`当使用箭头函数时，“开发工具”中未定义“this”

`this` is undefined in Dev Tools when using arrow function

本文关键字：开发工具 this 未定义 函数      更新时间：2023-09-26

我使用箭头函数，并使用Chrome和Firefox开发工具进行调试。我得到，this是未定义的，尽管代码仍然有效。

例如：当在以下断点上暂停时，我在控制台中键入this，它显示为undefined，即使console.log显示正确的this:

class A {
    f = () => {
        debugger;
        console.log(this);
    };
}
new A().f();

我的假设是，这与源地图有关。

以下是我用来构建代码的工具：

  • webpack（devtool:eval）
  • babel装载机（es5预设）
  • 打字脚本加载程序

问题是chrome调试器认为源代码中的this指的是运行时this，但typescript源代码中箭头函数内的this实际上被转换为_this，因此它向您显示了错误的对象。

这就是为什么它只是调试器中的一个问题，并且代码仍然可以正常工作。当我需要调试有问题的东西时，我只需将它复制到控制台，并在它前面加一个下划线。

这可能是一个问题，因为JS箭头函数没有this，this的值可能引用了包含箭头函数的对象，每个箭头函数都被重新访问，MDN关于箭头函数表达式的文章

相关文章：