First: Arrow functions don't bind this . They don't even have their own this context. In arrow functions, this is always delegated to the lexical context.
When we use the arrow function it works because of the of following reasons: It does not re-scope this, so we don't need to bind this in the class constructor.
By using arrow functions, we avoid having to type the function keyword, return keyword (it's implicit in arrow functions), and curly brackets.
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.
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
From the MDN:
An arrow function expression has a shorter syntax compared to function expressions and lexically binds the this value (does not bind its own this, arguments, super, or new.target). Arrow functions are always anonymous.
This means you cannot bind a value to this
like you want.
You cannot use bind
to change the value of this
inside an arrow function. However, you can create a new regular function that does the same thing as the old arrow function and then use call
or bind
to re-bind this
as usual.
We use an eval
call here to recreate the arrow function you pass in as a normal function and then use call
to invoke it with a different this
:
var obj = {value: 10};
function arrowBind(context, fn) {
let arrowFn;
(function() {
arrowFn = eval(fn.toString());
arrowFn();
}).call(context);
}
arrowBind(obj, () => {console.log(this)});
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.
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();
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With