this is undefined inside your arrow functions, keep reading.
I’ve been using es6 through babel.js in a side project, mainly because after a short affaire with haskell, I wanted arrow functions.
One of the big features of arrow functions is that they are lexically scoped, which in short means that
this is tied to the scope in which they were created, which means no more explicit binding of the scope for events or fugly
var self = this’s.
I won’t pretend I can explain lexical binding, but there are a lot of good references:
Except if you are using babel.js you might think they are wrong.
Consider this piece of code from the second reference:
1 2 3 4 5 6
According to the lexical binding explanations that is correct. The function is created in the top scope, so in a browser
this should be
But my browser console stubbornly says
false, and tells me that
this is undefined. Why is that?
As it turns out, there’s an explanation in the babel.js FAQ:
Babel assumes that all input code is an ES6 module. ES6 modules are implicitly strict mode so this means that top-level this is not window in the browser nor is it exports in node.