모던자바스크립트-DeepDive
2. this
Daejlee
2024. 10. 1. 22:48
1. this 키워드
this는 자신이 속한 객체 혹은 자신이 생성할 인스턴스를 가리키는 자기 참조 변수이다. this를 통해 자신이 속한 객체 혹은 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다.
단 this가 가리키는 값, 즉 this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다.
- 전역에서의 this - 전역 객체 window
- 일반 함수 내부의 this - 전역 객체 window
- 메서드 내부의 this - 메서드 호출 객체
- 생성자 함수 내부 this - 생성할 인스턴스
2. 함수 호출 방식과 this 바인딩
중첩 함수, 콜백 함수의 this가 전역 객체를 바인딩하는 것은 문제가 있다. 외부 함수인 메서드와 중첩, 콜백 함수의 this가 일치하지 않게 되지 않겠는가? 이 문제의 해결을 위해 직접 this 바인딩을 시키거나 화살표 함수를 이용할 수 있다.
var val = 1;
const obj = {
val: 100,
foo() {
setTimeout(() => console.log(this.val), 100);
}
};
obj.foo();