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

【问题标题】：ES6 in Chrome - Babel Sourcemaps and Arrow Functions lexical scopeChrome 中的 ES6 - Babel Sourcemaps 和 Arrow Functions 词法范围
【发布时间】：2015-08-31 17:20:35
【问题描述】：

我在 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 代码，而是 @ 987654327@ 指向外部函数作用域，如果我想访问箭头函数词法作用域，我需要使用_this，这完全没有意义。如果我使用源地图，我希望 Chrome 开发人员。在我的 ES6 代码中保留 this 的词法范围的工具。

有没有办法让 Chrome 开发者工具使用源映射和箭头函数按预期工作？

【问题讨论】：

"this 指向外部函数" - 我不清楚你的意思。 this 的值是函数吗？ “如果我想访问箭头函数范围，我需要使用 _this” - _this 和 this 与函数的范围有什么关系？

标签： javascript google-chrome ecmascript-6 babeljs source-maps

【解决方案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));
```

【讨论】：

所以你说像 Chrome 这样的浏览器内调试器将无法在不同的工具（例如 Watch 窗口或控制台）中拦截对 this 的调用并将其重新映射到别的东西？我知道this是一个特殊的值，而实际的this当然不是可以修改的，但我更多的是在谈论一些高级调试器功能。
可能在技术上可以，但它是如何工作的？你必须能够检查this 的真实价值。我不知道做任何事情来掩盖像这样的特殊绑定的值是个好主意。
是的，也许。但是，如果您无法在原始 ES6 状态下调试代码，那么 SourceMaps 又有什么意义呢？这非常令人困惑，在我的书中绝对是一个相当大的问题。如果我在箭头函数中放置断点，我需要检查转译代码中实际的 _self/_this 变量是什么，然后我才能正确调试，这似乎是一个繁琐的调试工作流程。
源映射的重点是它可以帮助的所有其他情况。转译并不完美。如果这对您来说问题太大，您可以在需要转换它们时不使用箭头函数，或者像您可能做的那样在外部范围中设置像 self 这样的变量，或者考虑创建或调试产生输出的箭头函数转换器，就像我在bind() 中建议的那样（我不知道这可能会带来什么并发症）。

【解决方案2】：

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

我在我的 chrome 开发者工具中对其进行了测试。

【讨论】：