this binding

malza_0408·2022년 1월 14일
0

Java Script

목록 보기
2/5
<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 고놈 참...

profile
그냥 개인적으로 공부한 글들에 불과

0개의 댓글