Binding different this scope to ES6 => function operator

Question

After experimenting with inheriting contexts with the => feature that ES6 gives us I noticed that the this context can never be changed. Example:

var otherConte         


        

Answer 1

It is effectively just new syntax for bind, so this doesn't introduce anything new in the way of gotchas.

var otherContext = {
  a: 2
};
function foo() {
  this.a = 1;
  this.bar = function () { return this.a }.bind(this);
}

var instance = new foo;
log(instance.bar()); // returns 1
log(instance.bar.bind(otherContext)()); // returns 1

function log(value) { 
  document.body.appendChild(
    document.createTextNode(value)
  );
}

Therefore, if we receive a function from an external call or just have a function in a variable, how can we be sure if we are going to be able to bind a different this to it or if it will just inherit it from somewhere?

Because either:

1. You'll have written that function in the first place or
2. You'll have written a specification for how to call your function so that people know to pass in a function which makes use of this from a context you choose.

Answer 2

When using the function keyword, the rules binding this are fairly straight forward.

Either the invoking call sets this (be it through .call, .apply or JavaScript setting this when the function is called as a method) or this gets a well-known value:

• In normal mode, this will be the window object.
• In strict mode, this will be undefined.

With arrow functions, the rule is even simpler.

• There is no this keyword. (nor arguments, or a few others)

Which means that, inside an arrow function, this is always bound to the outside context, because that is where this comes from.

So, in summary:

When using arrow functions, the value of this always comes from the outside context.