[자바스크립트 궁금한 점] 함수표현식의 this바인딩
addEventListner
addEventListener함수는 콜백함수의 this를 event타겟으로 바인딩한다.
arrow function : 함수표현식
콘솔에 TodoInput
클래스가 찍힌다.
TodoInput {$todoInput: input#new-todo-title.new-todo, onKeyUpListener: ƒ, onKeyUp: ƒ}
addEventListener
함수의 this 바인딩에 영향을 받지 않았다.
함수선언식
콘솔에 $todoInput
요소(element)가 찍힌다.
<input id="new-todo-title" class="new-todo" placeholder="할일을 추가해주세요" autofocus>
addEventListener
함수에 의해 this가 event타겟으로 바인딩 되었다.
왜 이런 차이가 발생할까?
주어진 정보
함수 선언식으로 작성하면 함수의 this는 addEventListener
의 this 바인딩에 영향을 미친다.
함수 표현식으로 작성하면 함수의 this는 addEventListener
의 this 바인딩에 영향에 미치지 않고 본래(?)의 this를 유지한다.
내가 내린 결론
export class Field {
constructor(carrotCount, bugCount) {
...
this.$field.addEventListener('click', this.onClick);
}
// 함수 선언식
onClick(event) {
this.onItemClick(ItemType.carrot);
};
// 함수 표현식
onClick = event => {
this.onItemClick(ItemType.carrot);
};
}
- 함수 실행시에는 전역(window) 객체를 가리킨다.
- 메소드 실행시에는 메소드를 소유하고 있는 객체를 가리킨다.
- 생성자 실행시에는 새롭게 만들어진 객체를 가리킨다.
클래스 안에 서 정의된 this는 객체로 this바인딩이 되어진다. 그래서 this.메서드
혹은 this.프로퍼티
이렇게 정의를 하면 객체.메서드
, 객체.프로퍼티
라고 사용하게 된다.
하지만 addEventListener
메서드는 콜백함수의 this를 자동으로 이벤트가 발생한 타겟으로 this바인딩을 하도록 정의되어있다.
따라서 위에 onclick
함수에서 this가 해당 클래스의 정보가 전달되지 않고 이벤트타겟이 전달되기 때문에 오류가 발생한다.
따라서 this바인딩을 통해서 this에 해당 클래스로 정의를 해야한다.
this바인딩
- bind() 메서드
this.onClick = this.onClick.bind(this)
- 화살표함수
일반 함수는 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다
화살표 함수의 this 언제나 상위 스코프의 this를 가리킨다.
this.$field.addEventListener('click', (event) => this.onClick(event));
// 또는
onClick = event => {
this.onItemClick(ItemType.carrot);
};
Author And Source
이 문제에 관하여([자바스크립트 궁금한 점] 함수표현식의 this바인딩), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@younoah/자바스크립트-궁금한-점-함수표현식의-this바인딩저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)