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没有＆＃34;重新映射＆＃34; this匹配原始ES6代码，但this指向外部函数范围，如果我想访问箭头函数词法范围，我需要使用_this，这是完全没有意义的。如果我使用的是源代码，我会期待Chrome开发者。用于保存{ES}代码中this的词法范围的工具。

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

Answer 1

好吧，

Chromium目前不使用names的映射。 https://code.google.com/p/chromium/issues/detail?id=327092
this是一种特殊的绑定，所以它的转换方式是不可能的。我能想到的唯一一件事就是像这样发现它，但我不知道它是否可行：
```
$.get('/api/v1/events', function (data) {
  this.actions.setEvents(data);
}.bind(this));
```

Answer 2

查看Babel arrow function transformer，它似乎已经实现了bind（this）解决方案，这使得调试器显示正确的结果。

我在我的chrome开发者工具中测试过它。

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

2 个答案: