Javascript Chrome中的ES6-Babel Sourcemaps和Arrow函数词法范围

我在ES6

类中有一个函数：

class Test {
   // Omitted code for brevity
   loadEvents() {
      $.get('/api/v1/events', (data) => {
         this.actions.setEvents(data);
      });
   }
}

Babel将其转换为另一种形式，并生成一个
\u this
变量来控制arrow函数的词法范围

var _this = this;

$.get('/api/v1/events', function (data) {
   _this.actions.setEvents(data);
});

当我在Chrome中使用sourcemaps调试ES6类并在调用
this.actions.setEvents（数据）的行上放置断点时
我注意到Chrome没有“重新映射”
此
以匹配原始ES6代码，而是
此
指向外部函数范围，如果我想访问箭头函数词法范围，我需要使用此

，这完全没有意义。如果我使用的是sourcemaps，我希望Chrome开发工具能够像在ES6代码中一样保留

这个
的词法范围

有没有办法让Chrome开发者工具与sourcemaps和arrow函数一起按预期工作？

Chromium目前不使用
名称
中的映射

此
是一种特殊的绑定，因此它的传输方式不可能做到这一点。我能想到的唯一一件事就是像这样传输它，但我不知道它是否可行：


现在来看，它似乎已经实现了bind（this）解决方案，这使得调试器显示正确的this

我在我的chrome开发者工具中测试了它。
“这指向外部功能”-我不清楚你的意思。
此
的值是函数吗？“如果我想访问arrow函数作用域，我需要使用它”-this
和this

与函数作用域有什么关系？所以你是说像Chrome这样的浏览器内调试器将无法在不同的工具（例如手表窗口或控制台）中截获对this的调用然后把它重新映射到别的地方？我知道

这个

是一个特殊的值，而实际的

这个

当然不是可以修改的，但我更多的是谈论一些高级调试器功能。从技术上讲，它可能是可以的，但它是如何工作的？您必须能够检查此的实际值。我不知道这样做来模糊特殊绑定的值是个好主意。是的，也许吧。但是，如果不能在原始ES6状态下调试代码，那么SourceMaps又有什么意义呢？这是一个非常令人困惑的问题，在我的书中肯定是一个相当大的问题。如果我在Arrow函数中设置断点，我需要检查传输代码中该变量的实际值，然后才能正确调试，这似乎是一个冗长的调试工作流程。源映射点是它可以帮助解决的所有其他情况。传输不是完美的。如果这对您来说是一个太大的问题，那么您就不能在需要传输箭头函数时使用箭头函数，或者在外部范围中设置类似于

self

的变量，就像您可能会做的那样，或者考虑创建或调试一个箭头函数转换器，以产生我建议的

bind（）

（我不知道这会有什么复杂情况）。

$.get('/api/v1/events', function (data) {
  this.actions.setEvents(data);
}.bind(this));