[모던자바스크립트-DeepDive] 2. this

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