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

Posted 2023-03-13

【中文标题】使用箭头函数时，开发工具中未定义“this”

【英文标题】：`this` is undefined in Dev Tools when using arrow function

【发布时间】：2016-09-08 00:37:00

【问题描述】：

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

例如：在以下断点处暂停时，我在控制台中输入this，它会输出undefined，即使console.log 显示正确的this：

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

new A().f();

我的假设是，它与源映射有关。

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

webpack (devtool: eval) babel-loader（es5 预设） 打字稿加载器

【问题讨论】：

重现此问题的简单代码示例将不胜感激。

我也遇到了同样的问题 - 我发誓它使用过可以工作。你有没有深入了解它？我有一些代码可以重现该问题

看起来 2015 年的 TypeScript bug report 仍然开放。

【参考方案1】：

这可能是个问题，因为 JS 箭头函数没有 this，this 的值可能引用了包含您的箭头函数的对象，每个 Arrow functions revisited 和 MDN's article on Arrow function expressions

【参考方案2】：

问题是chrome调试器认为源代码中的this指的是运行时this，但是typescript源代码中箭头函数里面的this实际上转化为_this，所以它向你显示了错误的对象。

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

【讨论】：

哇，这是在哪里记录的，我不知道

我猜不仅在 typescriptp 中：与 babel 相同的问题和相同的解决方案