Lexical vs dynamic this, arrows revisited

Big picture

Dynamic this demo

// Dynamic this depends on HOW we call the function
const person = {
  name: "Ayla",
  say: function () {
    return "Hi " + this.name;
  }
};

console.log("method call:", person.say()); // "Hi Ayla"

// Extract then call: this is lost
const talk = person.say;
console.log("extracted call:", talk()); // likely "Hi undefined" in strict mode -> this is undefined

Arrow = lexical this

// Arrow functions capture this from where they are created
const box = {
  label: "blue",
  showLater: function () {
    // Arrow keeps this === box
    const fn = () => "box:" + this.label;
    return fn();
  }
};

console.log("arrow captured this:", box.showLater()); // "box:blue"

Callbacks: keep this with arrows

// Using a normal function in a callback can lose this
const widget = {
  id: 7,
  normal: function () {
    setTimeout(function () {
      // here this is not widget in many environments
      console.log("normal cb this.id:", this && this.id);
    }, 0);
  },
  arrow: function () {
    setTimeout(() => {
      // arrow keeps lexical this from arrow()
      console.log("arrow cb this.id:", this.id);
    }, 0);
  }
};

widget.normal();
widget.arrow();

Simple fix for extraction

// If you must extract, wrap with an arrow capturing the object
const account = {
  owner: "Mila",
  label: function () { return "Owner:" + this.owner; }
};

// Lost this:
const lost = account.label;
console.log("lost:", lost()); // "Owner:undefined" (this missing)

// Fixed: create an arrow that closes over account
const safe = () => account.label();
console.log("fixed via arrow wrapper:", safe());

Good habits

Arrow this quiz

Recap