使用箭头函数时,在开发工具中未定义 `this`

IT技术 javascript typescript webpack arrow-functions
2021-02-16 21:05:21

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

例如:当在以下断点处暂停时,我this在控制台中键入undefined,即使console.log显示正确,它也会出现this

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

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

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

  • webpack(开发工具:评估)
  • babel-loader(es5 预设)
  • typescript加载器
2个回答

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

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

哇,这个记录在哪里,我不知道
2021-04-22 21:05:21
我想不仅在 typescritp 中:与 babel 相同的问题和相同的解决方案
2021-05-10 21:05:21

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