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

Question

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

例如：当在以下断点处暂停时，我在控制台中键入 this，结果显示 undefined，即使 console.log 显示正确的 [=11] =]:

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

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

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

• webpack（开发工具：eval）
• babel-loader（es5 预设）
• 打字稿加载器

Answer 1

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

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

Answer 2

这可能是个问题，因为 JS 箭头函数没有 this，根据 Arrow functions revisited and MDN's article on Arrow function expressions[=，this 的值可能引用包含您的箭头函数的对象13=]