자바스크립트 this 활용

<this>

일반적으로 메서드를 호출한 객체가 저장되어 있는 속성.

메서드를 호출할 때 뿐만 아니라 이벤트 리스너가 호출될 때에도 this 속성이 만들어진다.

하지만 this 속성에 저장되는 값은 항상 동일한 값이 아니라 상황에 따라 다르다.

다양한 경우에 this에 어떠한 값이 들어가는지 잘 판단해서 활용할 수 있어야한다.

 

<this가 만들어지는 경우>

1. 일반 함수에서 this

2. 중첩 함수에서 this

3. 이벤트에서 this

4. 메서드에서 this

5. 메서드 내부의 중첩 함수에서 this

 

<일반 함수에서 this>

일반 함수 내부에서 this는 전역 객체인 window가 저장된다.

 

<일반 중첩 함수에서 this>

중첩 함수에서 this는 전역 객체인 window가 저장된다.

 

<이벤트 리스너에서 this>

이벤트 리스너에서 this는 이벤트를 발생시킨 객체가 된다.

이에 따라 this는 id가 testBtn인 대상이 되고 이 객체에 testData라는 프로퍼티를 동적으로 추가하는 구문이

되기 때문에 다음과 같이 값이 출력된다.

 

<메서드에서 this>

this는 메서드를 호출한 인스턴스가 된다.

인스턴스의 프로퍼티 값으로 저장되기 때문에 this.testData는 2가 된다.

 

<메서드 내부의 중첩 함수에서 this>

메서드 내부에 만들어지는 중첩 함수에서 this는 객체가 아닌 window가 된다.