Chrome中的ES6 - Babel Sourcemaps和Arrow Functions词法范围

Question

我在ES6中有一个功能class:

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

Babel将其转换为另一种形式,并生成一个_this变量来控制箭头函数的词法范围.

var _this = this;

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

当我使用Chrome中的源映射调试ES6类并在我调用的行上放置一个断点时this.actions.setEvents(data);我注意到Chrome没有"重新映射" this以匹配原始的ES6代码,而是this指向外部函数范围,我需要使用_this如果我想要访问的箭头功能词汇范围,这是完全没有意义的.如果我使用的是源代码,我会期待Chrome开发者.用于保存this我的ES6代码中的词法范围的工具.

有没有办法让Chrome开发者工具按预期使用源图和箭头功能？

Answer 1

好,

1. Chromium不使用names当前的映射.https://code.google.com/p/chromium/issues/detail?id=327092

2. this是一种特殊的绑定,所以它的转换方式是不可能的.我能想到的唯一一件事就是像这样发现它,但我不知道它是否可行:

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