어휘적 this와 동적 this, 화살표 함수 다시 보기

큰 그림

동적 this 예제

// 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

화살표 함수 = 어휘적 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"

콜백에서 화살표 함수로 this 유지하기

// 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();

추출 문제를 간단히 해결하기

// 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());

좋은 습관

화살표 함수의 this 퀴즈

복습