javascript - ES6 in Chrome - Babel Sourcemaps and Arrow Functions lexical scope - Stack Overflow

admin2025-04-26 10

I have a function inside a ES6 class:

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

Babel transpiles this to a different form and it generates a _this variable to control the lexical scope of the arrow function.

var _this = this;

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

When i debug the ES6 class using sourcemaps in Chrome and put a breakpoint on the line where i call this.actions.setEvents(data); i noticed that Chrome does not "re-map" this to match the original ES6 code, but instead this points to the outer function scope and i need to use _this if i want to access the arrow function lexical scope, which is pletely pointless. If i am using sourcemaps i would expect Chrome dev. tools to preserve the lexical scope of this as in my ES6 code.

Is there a way to make Chrome developer tools work as expected with sourcemaps and arrow functions?

I have a function inside a ES6 class:

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

Babel transpiles this to a different form and it generates a _this variable to control the lexical scope of the arrow function.

var _this = this;

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

Is there a way to make Chrome developer tools work as expected with sourcemaps and arrow functions?

Share Improve this question edited Nov 13, 2015 at 15:32 Leonid Beschastny 51.5k10 gold badges121 silver badges124 bronze badges asked Aug 31, 2015 at 17:20 Faris Zacina 14.3k8 gold badges64 silver badges76 bronze badges

"this points to the outer function" - It's not clear to me what you mean by that. Is the value of this a function? "i need to use _this if i want to access the arrow function scope" - What do _this and this have to do with the scope of a function? – a better oliver Commented Aug 31, 2015 at 17:39

Add a ment |

2 Answers 2

Sorted by: Reset to default 6

Well,

Chromium doesn't utilize the mappings from names currently. https://code.google./p/chromium/issues/detail?id=327092
this is a special binding, so the way it's transpiled it wouldn't be possible to do that. The only thing I can think of would be transpiling it like this, but I don't know if it's viable:
```
$.get('/api/v1/events', function (data) {
  this.actions.setEvents(data);
}.bind(this));
```

Looking at Babel arrow function transformer, it seems it already implements the bind(this) solution, which makes the debugger display the correct this.

I tested it in my chrome developer tools.

转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1745656806a312497.html

javascriptES6 in ChromeBabel Sourcemaps and Arrow Functions lexical scopeStack Overflow

最新回复(0)