8

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

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

  this.bar = () => this.a;

}

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

Without the => operator and using the function keyword:

function foo() {
  this.a = 1;

  this.bar = function () {
    return this.a;
  }
}
var instance = new foo;
instance.bar(); // returns 1
instance.bar.bind(otherContext)(); // returns 2

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?

It sounds dangerous that javascript does not tell you anything, one might fall for a VERY subtle and difficult bug.

fos.alex
  • 5,317
  • 4
  • 16
  • 18
  • I can't really see a question in there, is there something you doesn't understand about this behavior? – Karl-Johan Sjögren Oct 22 '15 at 15:23
  • Yeah, this is my question: 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? I added a question mark to clarify – fos.alex Oct 22 '15 at 15:24
  • It's rather unusual that you're going to receinve a fat arrow function from some external source - and if so, it's not designed to be callable in other context. – Kuba Jagoda Oct 22 '15 at 15:30
  • 1
    If you're developing a method that receives a callback where the `this` value needs to be set, it's your job to document the method properly and it's the user's job to read the documentation and use the correct type of function. –  Oct 22 '15 at 15:37
  • An arrow function is [just as good as a bound function in that regard](http://stackoverflow.com/q/32535110/1048572). – Bergi Oct 22 '15 at 22:11

2 Answers2

8

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.

Jeremy J Starcher
  • 23,369
  • 6
  • 54
  • 74
  • No arguments in arrow functions? –  Oct 23 '15 at 18:01
  • Arrow functions can, of course, receive arguments. However, they don't get the auto-created `arguments` object that is auto-created when using the `function` keyword. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments – Jeremy J Starcher Oct 23 '15 at 18:05
8

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.
Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335