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

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 ?


@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.

@Agata 2017-01-18 11:27:17

ok, thank You :)

@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.

@Agata 2017-01-18 11:04:49

hmmm...., ok, Your answer is very helpful, thank You :)

@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

46 Answered Questions

69 Answered Questions

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

4 Answered Questions

[SOLVED] ECMAScript 6 arrow function that returns an object

29 Answered Questions

40 Answered Questions

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

  • 2008-08-27 19:49:41
  • Jake McGraw
  • 718152 View
  • 2611 Score
  • 40 Answer
  • Tags:   javascript jquery

38 Answered Questions

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

41 Answered Questions

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

38 Answered Questions

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

16 Answered Questions

[SOLVED] How to check for "undefined" in JavaScript?

  • 2010-08-02 17:53:29
  • technology_is_overrated
  • 2125504 View
  • 2207 Score
  • 16 Answer
  • Tags:   javascript undefined

41 Answered Questions

[SOLVED] Detecting an undefined object property

Sponsored Content