Can you bind 'this' in an arrow function?

Question

I\'ve been experimenting with ES6 for a while now, and I\'ve just come to a slight problem.

I really like using arrow functions, and whenever I can, I use them.

Answer 1

For years, js developers struggled with context binding, asked why this changed in javascript, so much confusion over the years due to context binding and the difference between the meaning of this in javascript and this in most of the other OOP languages.

All this leads me to ask, why, why! why would you wan't to rebind an arrow function! Those where created specially to solve all this issues and confusions and avoid having to use bind or call or whatever other way to preserve the scope of the function.

TL;DR

No, you cannot rebind arrow functions.

Answer 2

To be complete, you can re-bind arrow functions, you just can't change the meaning of this.

bind still has value for function arguments:

((a, b, c) => {
  console.info(a, b, c) // 1, 2, 3
}).bind(undefined, 1, 2, 3)()

Try it here: http://jsbin.com/motihanopi/edit?js,console

Answer 3

You cannot rebind this in an arrow function. It will always be defined as the context in which it was defined. If you require this to be meaningful you should use a normal function.

From the ECMAScript 2015 Spec:

Any reference to arguments, super, this, or new.target within an ArrowFunction must resolve to a binding in a lexically enclosing environment. Typically this will be the Function Environment of an immediately enclosing function.

Answer 4

Do ES6 Arrow Functions Really Solve “this” In JavaScript

The above link explains that arrow functions this doesn't change with bind, call, apply functions.

It is explained with a very nice example.

run this in node v4 to see the "expected" behavior,

this.test = "attached to the module";
var foo = { test: "attached to an object" };
foo.method = function(name, cb){ 
    // bind the value of "this" on the method 
    // to try and force it to be what you want 
    this[name] = cb.bind(this); };
foo.method("bar", () => { console.log(this.test); });
foo.bar(); 

Answer 5

Short, You CANNOT bind arrow functions, but read on:

Imagine you have this arrow function below which prints this on the console:

const myFunc = ()=> console.log(this);

So the quick fix for this would be using normal function, so just change it to:

function myFunc() {console.log(this)};

Then you can bind it to any lexical environment using bind or call or apply:

const bindedFunc = myFunc.bind(this);

and call it in case of bind.

bindedFunc();

There are also ways to using eval() to do it, which strongly not recommended.

Answer 6

I think this is better solution

var f = (vm=this) => console.log(vm);