为什么 chrome-dev-tools 不能在承诺中正确反映“this”？

Question

我使用webpack编译我的项目，然后我发现this如果有promise会编译成_this2。

问题是，当我在 promise 中设置断点时，this 在 chrome-dev-tools 中将始终为 undefined。

这是一个错误吗？ Chromium 开发团队很难解决这个问题吗？

现在，源代码：

webpack编译的代码：

因为有source-map，chrome会为我显示源代码，并且promise之外的this会被正确检查。

但是，promise 中的this 将是undefined

Answer 1

正如您在将代码编译为 es5 时指出的那样，生成的代码使用 _this 技巧从声明的上下文中捕获它。问题在于源映射本质上只是文本映射，将一段编译后的代码映射回源代码。这意味着 Chrome（或任何其他当前调试器）将无法猜测光标下的 this 在源代码中具有不同的含义。

解决此问题的一种简单方法是为_this（或在您的情况下为this_2）添加一个手表，它将向您显示捕获的内容。