How does this work? How are arrow functions different?

Understand the concept

this is the receiver used when a regular function runs, and its value usually depends on how the function is called. Arrow functions do not create their own this; they use the surrounding one. This matters when a method is passed as a callback and loses its original receiver.

Important ideas

• A regular function gets this from how it is called.

• An arrow function uses this from the surrounding scope.

• call and apply call a function with a chosen this; bind returns a bound function.

• Calling user.sayName() uses user as the receiver; extracting const fn = user.sayName can lose that receiver.

• Arrow functions cannot be called with new, and call or bind cannot replace their lexical this.

Work through the example

'use strict';
const user = {
  name: 'Asha',
  getName() { return this.name; }
};
const callback = user.getName.bind(user);
console.log(callback()); // Asha

• Passing the unbound method as a plain callback would lose user as the receiver.