Chrome中的ES6 - Babel源地图和箭头函数的词法范围

ES6 in Chrome - Babel Sourcemaps and Arrow Functions lexical scope

本文关键字：函数 范围 词法 地图 ES6 中的 Babel Chrome      更新时间：2023-09-26

我在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中使用sourcemaps调试ES6类并在我调用this.actions.setEvents(data);的行上放置一个断点时，我注意到Chrome没有"重新映射"this以匹配原始的ES6代码，而是this指向外部函数范围，如果我想访问箭头函数词法范围，我需要使用_this，这是完全没有意义的。如果我使用源地图，我希望Chrome开发工具保留this的词法范围，就像我的ES6代码一样。

是否有一种方法，使Chrome开发人员的工具工作与预期的源地图和箭头功能?

嗯，

  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));

看看Babel箭头函数转换器，它似乎已经实现了bind(this)解决方案，这使得调试器显示正确的this。

我在我的chrome开发工具中测试了它

相关文章：