By Agata


2017-01-18 10:38:56 8 Comments

I have a problem to understand this in Arrow functions.

I read a lot of answers for example: Methods in ES6 objects: using arrow functions and explantation in this description Link github and everyone say that this should bind to Window , but when I check these examples I see undefined, If any of you, know why?

 var foo = {
     bar: () => console.log(this)  // lexical this is window or something else
 }
 foo.bar()

I am using babel to transpile the code:

var foo = {
        bar: function bar() {
            return console.log(undefined);
        }
}

babel versions are:

  • "babel-core": "^6.21.0",
  • "babel-loader": "^6.2.10",
  • "babel-preset-es2015": "^6.18.0",
  • "babel-preset-stage-2": "^6.18.0",

but lexical this is not Window only undefined, Why ?

2 comments

@Forivin 2017-01-18 10:56:44

Well, window is not part of the javascript standard. And since babel doesn't know the context in which your script is running it will just use undefined.

In nodejs for instance the global scope would be global.
While window is typically global scope when you are executing your code in a browser.

@loganfsmyth 2017-01-18 17:44:57

Not quite accurate. Babel is explicitly setting this to undefined because this is specified to be undefined in ES6 modules.

@Forivin 2017-01-18 18:59:46

So babels default behavior is to assume that input files are modules?

@Stefan Dragnev 2017-01-18 20:00:51

Not default, but with preset-es2015 - yes.

@Stefan Dragnev 2017-01-18 10:59:23

It appears that you're using webpack with ES-style modules. Code inside modules does not have implicit access to the global scope. That is, this inside a module is not bound to anything. Webpack apparently replaces global this references with undefined so that any global context does not leak in even if it's defined by the environment.

If you try to execute console.log("this: " + (() => this)()) in the browser console, you will see that this is, indeed, window.

@loganfsmyth 2017-01-18 17:44:09

You can pass {modules: false} as your options to babel-preset-es2015 to stop module processing, if you want.

@Forivin 2017-01-18 19:02:38

I wonder what that would result in. I mean babel can't really know if it will be executed in a browser or another environment, right?

Related Questions

Sponsored Content

44 Answered Questions

[SOLVED] How to check empty/undefined/null string in JavaScript?

41 Answered Questions

[SOLVED] How do I remove a property from a JavaScript object?

69 Answered Questions

[SOLVED] What is the most efficient way to deep clone an object in JavaScript?

48 Answered Questions

[SOLVED] How do I test for an empty JavaScript object?

  • 2009-03-25 01:39:45
  • falmp
  • 1958528 View
  • 2740 Score
  • 48 Answer
  • Tags:   javascript

42 Answered Questions

[SOLVED] Is there an "exists" function for jQuery?

  • 2008-08-27 19:49:41
  • Jake McGraw
  • 729460 View
  • 2671 Score
  • 42 Answer
  • Tags:   javascript jquery

31 Answered Questions

6 Answered Questions

[SOLVED] ECMAScript 6 arrow function that returns an object

42 Answered Questions

[SOLVED] Detecting an undefined object property

38 Answered Questions

[SOLVED] var functionName = function() {} vs function functionName() {}

Sponsored Content