Can You Bind 'This' in an Arrow Function

Can you bind 'this' in an arrow function?

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.

JavaScript binding - arrow functions and bind

But does it also prevent bind() from working?

Partially, because bind returns a new function that calls the original function with a specific this — but arrow functions don't use the this they're called with, they completely ignore it. Instead, they close over the this where they're defined.

bind on an arrow function can't change the arrow's concept of this. All it can do is its secondary feature, pre-supplying arguments:

"use strict";

function run() {

  const f = (a, b, c) => {

    console.log("this", this);

    console.log("a", a);

    console.log("b", b);

    console.log("c", c);

  };

  const fbound = f.bind({}, 1, 2, 3);

  f();

  fbound();

}

run();

.as-console-wrapper {

  max-height: 100% !important;£

}

Arrow functions with call/apply/bind

The context argument does nothing (because it sets this and you can't do that to an arrow function).

The arguments array does get applied though.

If you were writing code specifically for the arrow function then the idiomatic way would be to spread the arguments instead:

getData(...arguments);

---

In this particular context the debounce function can handle any kind of function passed into fn (and you should be using fn not getData inside the timeout).

If you pass in a non-arrow function then the returned function will have this work as normal.

If you pass in an arrow function then the returned function will have this not be changed (but also as normal!).

Why we don't need to bind the arrow function in React?

Simply because arrow function does not have the following in its context:

• this
• arguments
• super
• new.target

So when you reference this inside an arrow function it treat this as any other variable and look for its declaration in its scope first and it can not find it so it search the upper scope which is the this referring to the react component class which what is required so we do not need to bind the this to the class.

Bind vs Arrow Function when passing onChange props (React)

Since it is only using a reference to the function, we are not causing a re-render each time

You're wrong.

The bind method returns a new function (so will trigger a re-render).

---

To avoid re-renders, make use of the useCallback hook.

Or, since you don't appear to be making use of this inside myFunction (otherwise () => myFunction() would break it), just pass myFunction itself without creating a new function.

onClick={myFunction}

Is there any meaningful difference bind() vs arrow function + call()?

let a = function(){};
let b = function(){};

a.m = 1
b.m = 2
a.someMethod = function(x, y, z){ return this.m + x + y + z }

let x = a.someMethod.bind(b, 1, 2, 3);
let y = () => a.someMethod.call(b, 1, 2, 3)

console.log( x(1,2,3) )
console.log( y(1,2,3) )

function goBind() {
    for (var i = 0; i < 1000000; i++) {
        x(1,2,3)
    }
}

function goArrow() {
    for (var i = 0; i < 1000000; i++) {
        y(1,2,3)
    }

}

function race() {
  var start = performance.now();
  goBind();
  console.log('bind: ' + (performance.now() - start));
  start = performance.now();
  goArrow()
  console.log('arrow: ' + (performance.now() - start));
  start = performance.now();
  goBind();
  console.log('bind: ' + (performance.now() - start));
  start = performance.now();
  goArrow()
  console.log('arrow: ' + (performance.now() - start));
  console.log('------');
}

<button onclick="race()">RACE!</button>

---

Related Topics