[JavaScript] This (공식화)

This 태그

 

 - this 키워드는 자기 자신을 가리키고자 할 때 쓰이는 키워드

- 자기 자신이라 함은 현재 위치에서 바인딩 즉 연결되는 바로 위 상위 객체를 의미한다.

- 하지만 this의 위치가 어디냐에 따라 바인딩 되는 곳이 달라지므로 this의 원리를 이해하고 쓰기보단

  그냥 어디에 this가 쓰였을 때 여기를 가리킨다 라는 공식처럼 외우는 것이 편하다.

  (고 하여 다른 게시글이나 자료를 통해 이해해보려고도 하였으나 역시 쉽지 않아 수학에서도 종종 이런 경우가 있었기    에 그 방법으로 한번 해보려합니다.)

 대표적인 this 위치에 대한 바인딩되는 객체는 다음 아래와 같다.

 

 

1. 아무것도 없는 단순 로직 상에서의 this는 최상위 객체인 window를 가르킨다.

 

---

 

2. 함수(function)

 

2-1. 일반 함수(function)의 경우 해당 함수(function)를 가르키는 것이 아닌 최상위 객체인 window를 가리킨다.

 

2-2. 내장 함수(function) 내에서의 this의 경우 또한 무조건 최상위 객체인 window를 가리킨다.

     (함수안의 함수)

 

---

 

3. 메서드(method)

 

3-1. 일반적으로 오브젝트 내에 메서드에서는 해당 오브젝트를 가르킨다. 즉 여기서 this는 window를 가르기는 것이 아니라 해당 오브젝트인 objA를 가르키는 것이 된다.

 

3-2 객체 안에서 객체를 선언한 다음 그 안의 메서드에서 this를 출력할 경우 해당 this는 최상위 객체(objA-> X)를 가르키는 것이 아닌 자신이 속한 바로 위의 객체(objA.b)를 가리킨다.

 

3-3 객체 내의 메서드의 내장 함수안에 this를 실행시킬 경우 자신이 속한 객체가 this가 바인딩되지 않고, window가 바인딩 된다. (**** 중요 ****)

 

3-4 위의 this를 아래의 내장 함수까지 끌고가는 방법

 

아래와 같이 self(상수)를 선언해 this를 안에 담아준 뒤 실행해주면 3-3과 달리 window가 아닌 오브젝트 objC를 가르기는 것을 볼 수 있다. 

 

 

---

4. DOM( Document Object Model )

 

 DOM에서 addEventListener 내에서의 function의 경우 해당 콜백 함수 내에서의 this는 내가 현재 이벤트를 적용시키려는 객체를 가르킨다. 여기서는 document.getElementById("btn")가 this 가 가르키는 주체가된다.

 

5. Arrow Function( 화살표 함수 )

 

- 화살표 함수를 사용하는 경우에는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정된다.  화살표 함수는 this에 대한 binding이 없으며 화살표 함수가 정의되어있는 객체의 스코프를 그대로 가지고 있다. 따라서 화살표 함수 내의 this는 상위 스코프의 this를 의미한다.

- arrow 함수에서의 this는 자신을 둘러싼 객체와 바인딩된다.(lexical this)