자바스크립트의 this 란?

브라우저 콘솔을 켜고, this를 치면 window가 나옵니다.

 

 

함수 내에 넣어서 사용해도 this는 window 입니다.

 

this는 기본적으로 window라는 사실을 알 수 있습니다.

 

객체 메서드 a 안의 this는 객체를 가리키고 있습니다.

 

이것은 객체의 메서드를 호출할때 this를 내부적으로 바꿔주기 때문입니다.

 

호출하는 함수가 객체의 메서드인지 그냥 함수인지가 중요한데,

a2는 object.a를 꺼내온 것이기 때문에 더이상 object의 메서드가 아닙니다.

 

그래서 window가 출력됩니다.

 

또한 this를 내부적으로 바꿔주기 위해 생성자 함수(=함수)를 만들어 this를 바꾸어 주어

사용할 수 있습니다.

 

생성자 함수를 만들때 new로 호출을 해야하는데 그렇지 않으면 기본값인 window를 가르키기

때문에 꼭 new 함수명() 을 해주어야 합니다.

 

 

이렇게 new를 붙이면 this가 생성자를 통해 생선된 인스턴스가 됩니다.

 

실수로 new를 안 붙이는 문제를 막는 장치는 class가 ES5에서 추가 되었습니다.

 

 

다양한 상황에서 this가 어떤 객체를 가리키는지?

1. 최상위 레벨 코드의 this

최상위 레벨 코드의 this는 전역 객체를 가리킵니다.

실행 문맥이 초기화될 때 그 안의 디스 바인딩 컴포넌트가 전역 환경을 가리키도록 초기화되기 때문입니다.

console.log(this); // Window

 

2. 이벤트 처리기 안에 있는 this

이벤트 처리기 안에 있는 this는 이벤트가 발생한 요소 객체를 가리킵니다.

 

3. 생성자 함수 안에 있는 this

사용자가 정의한 생선자 함수 안에 있는 this는 그 생선자로 생성한 객체를 가리킵니다.

 

4. 생성자의 prototype 메서드 안에 있는 this

생성자의 prototype 메서드 안에 있는 this는 그 생성자로 생성한 객체를 가리킵니다.

 

5. 직접 호출한 함수 안에 있는 this

함수를 최상위 레벨의 코드에서 호출하면 함수 안에 있는 this가 전역 객체를 가리킵니다.