javascript - arrow function and this

Question

I'm browsing twitter and found this tweet:

https://twitter.com/_ericelliott/status/855598297939144704

Here is the code from the tweet:

const double = () => this.x * 2;
const numDouble = double.bind({ x: 5 });
numDouble();

When you run this snippet in console it'll produce NaN. How? Author is explicitly binding the value of x, but still it's showing NaN.

Author is also specifying that arrow function can't bind this. As i know that arrow function lexically bind the value of this form surrounding scope. Then why author is claiming so?

Please clarify my doubts and Thanks in advance for the help.

Answer 1

Arrow functions don't bind this. As per MDN:

No binding of this

Until arrow functions, every new function defined its own this value (a new object in the case of a constructor, undefined in strict mode function calls, the context object if the function is called as an "object method", etc.). This proved to be annoying with an object-oriented style of programming.

So this in your example will be the global object window which apparently don't have a property called x.

Example:

function foo() {
  let arrow = () => {
    console.log(this);     // will use foo's this as arrow will never have its own this
  }
  
  arrow.call({"x": "x"});  // ... even if we specify it using bind, call, or apply
}

foo.call({"y": "y"});      // specifying the this for foo (this value will eventually be used by arrow because it will be availbale in its scope)