this binding

<div class="tagClass" style="background-color: red">Click here</div>

class Malza {
  constructor(name) {
    this.someDomTag = document.querySelector(".tagClass");
    this.name = name;

    this.someDomTag.addEventListener("click", this.printName);
  }

  printName() {
    // 여기서 this를 사용해보자
    console.log("말자의 이름은 : ", this.name);
  }

  doEat(menu) {
    console.log("내가 먹은건 : ", menu);
  }
}

const me = new Malza("Malza");
me.printName();
me.doEat("치킨");

내가 먹은건 : undefined
말자의 이름은 : undefined

this.printName 의 내부에서 this 는 길을 잃어버린다. 함수를 인자로 넘겨 줄 때는 class 정보가 함께 전달되지 않기 때문이다. 이를 해결하기 위한 방법을 살펴봤다.

this binding

this.someDomTag.addEventListener("click", this.printName.bind(this));

arrow function

  printName = () => {
    console.log("말자의 이름은 : ", this.name);
  };

this.someDomTag.addEventListener("click", (e) => this.printName(e));

화살표 함수와 일반 함수

화살표 함수

1. 화살표 함수의 this는 호출된 함수를 둘러싼 실행 컨텍스트를 가리킨다. 그러니까 화살표 함수가 선언 될 때의 this!
2. 화살표 함수의 this는 정해지면 바꿀 수 없다. call, bind, apply를 사용해도 바뀌지 않는다.

일반 함수

일반 함수의 this는 새롭게 생성된 실행 컨텍스트를 가리킨다.

모두 정상 출력 되는 것을 확인했다. JS 고놈 참...