this

this 

 

• JS 에서 this 는 일반적으로 해당 함수를 호출하는 방식에 따라 동적으로 결정됩니다.
• 하지만 화살표 함수의 경우 해당 함수를 호출하면 선언 단계에서 정적으로 상위 컨텍스트를 참조하여 this 가 결정됩니다. (lexical this)

 

동작원리

 

this는 현재 실행 중인 함수의 객체를 참조합니다.

this의 값은 함수가 어떻게 호출되었는지에 따라 달라집니다.

 

1. 일반 함수 호출에서 this는 전역 객체를 가리킨다.
2. 객체의 메소드로 호출된 함수에서 this는 해당 객체를 가리킨다.
3. 생성자 함수에서 this는 생성된 객체를 가리킨다.
4. call() 또는 apply() 메소드를 사용하여 명시적으로 this를 지정할 수 있다.

따라서 this의 값은 실행 컨텍스트에 따라 동적으로 결정되며, 함수를 호출하는 방법에 따라 달라집니다.

 

용법

 

1) 그냥 쓰거나 함수 안에서 쓰면 this는 window를 뜻합니다.

 

ex) 

console.log(this); // window{...}

 

2) 메소드 안에서 this를 쓰면 this는 메소드를 가지고 있는 오브젝트를 뜻합니다.

    (오브젝트에 들어가는 함수 : 메소드(method) )

 

3) constructor 안에서 쓰면 constructor로 새로 생성되는 오브젝트를 뜻합니다.

    (constructor : 오브젝트를 복사해서 생성해주는 기계)

 

4) eventlistener 안에서 쓰면 this는 e.currentTarget이라는 의미입니다.

 

case 1. 이벤트리스너 안에서 콜백함수를 쓸 때 this -> window (1,2 번 경우에 해당)

 

case 2. 오브젝트 안에서 콜백함수를 쓸 때 this -> this랑 가장 가까이 있는 함수를 보고 판단

 

 

** this 값은 function을 만날 때마다 바뀔 수 있기 때문에 내가 원하는 this를 쓰기 힘든 경우가 있습니다.

그럴 땐 함수를 arrow function으로 바꾸는 방법이 있습니다.

 

* 신 문법 Arrow function 특징 : this 값을 함수 밖에 있던거 그대로 씀