How to change what an ES6 arrow function's 'this' points to?

Question

In the traverse npm package there\'s this example

var obj = [ 5, 6, -3, [ 7, 8, -2, 1 ], { f : 10, g : -13 } ];

traverse(obj).forEach(function          


        

Answer 1

Arrow functions in ES6 have lexical this. This means you can always tell their this-value by asking the question "What was the value of this when the function was defined?" They are immune to the this-altering effects of call, apply, bind, and method invocation.

Let's take a look at the intended effect by compiling ES6 to ES5 with Babel.

ES6:

let foo = {
  bar() {
    return [
      () => this,
      function() { 
        return this 
      }
    ]
  },
  baz: () => this
}

let fns = foo.bar()
fns.push(...fns.map((fn, i) => fn.bind({i})))
fns.map(fn => fn()).forEach(thisVal => {
  console.log(thisVal)
  console.log('-------')
})
console.log(foo.baz())

Compiled to ES5:

'use strict';

function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }

var foo = {
  bar: function bar() {
    var _this = this;

    return [function () {
      return _this;
    }, function () {
      return this;
    }];
  },

  baz: function baz() {
    return undefined;
  }
};

var fns = foo.bar();
fns.push.apply(fns, _toConsumableArray(fns.map(function (fn, i) {
  return fn.bind({ i: i });
})));
fns.map(function (fn) {
  return fn();
}).forEach(function (thisVal) {
  console.log(thisVal);
  console.log('-------');
});
console.log(foo.baz());

Check out what happened inside foo.bar. There was an inserted line:

var _this = this;

The arrow function's body was changed so that it returned _this from its lexical outer scope. Therefore, binding the value of this is not supposed to have any effect. By "freezing" the value of "this" just before the function definition, we have prevented the ability to change the function's behavior through binding, using call/apply, or calling the function as a method.

Notice how baz's this value was simply replaced with undefined. That's because if we ask the question "What was the value of this when the function was defined?", we obviously must answer either undefined or some global object context, like Node's global or the browser's window. By asking this question, you can easily deduce the value of this inside arrow functions, and that is a big part of their inherent value.

The output is therefore:

{ bar: [Function: bar], baz: [Function: baz] }
-------
undefined
-------
{ bar: [Function: bar], baz: [Function: baz] }
-------
{ i: 1 }
-------
undefined

The first and third outputs correspond to the arrow function defined within bar(). Notice how they automatically have a this-value that points to the object referred to by foo because they were created with the foo.bar() call. Useful right? Only the behavior of the non-arrow function could be changed by binding. Before binding, it's this-value was undefined, a common cause of many JS bugs and redundant bindings when passing around functions. Arrow functions take away a lot of that hassle.