[자바스크립트] this의 동작 방식

콘텍스트 객체는 this가 바라보고 있는 어떤 객체이다.

예컨데 const a = {name: gihong} 이고 this.name으로 기홍을 소환할 때

a가 바로 콘텍스트 객체가 되는 것이다.

여기에는 네가지 동작 방식이 존재한다

 

1) 기본 바인딩

 

기본적으로 this는 global객체인 window에 바인딩된다.

그러니까 아무생각없이, 아무 조건없이 this를 적용하면 이는 window에 바인딩된다는 뜻

(참고로 NodeJS에서는 전역객체가 window를 가리키지 않는다.

 

2) 암시적 바인딩

 

어떤 객체를 통해 함수가 호출되면, 그 객체가 this의 콘텍스트 객체가 된다.

위의 그림으로 예를 들어보자.

이 경우 global하겐 a를 3으로, obj 객체 안에서는 a를 5로 선언했다.

이 시점에서 func()을 실행하면 this는 obj에 바인딩이 되고, a는 5가 된다.

그러나..? 

이 함수를 새로운 객체 obj_g에 담아보자.

obj_g는 전역컨텍스트에 정의됐으므로 global 객체를 참조하게 되고,

이로 인해 앞서 정의한 3에 매칭이 된다.

전역과 비교하지 않고 다른 객체이 담아도 결과는 같다.

해당 함수가 무엇이냐에 따라 바인딩되는 this의 대상이 달라지는 것이다.

 

3) 명시적 바인딩

 

명시적 바인딩은 call, apply, bind 세가지 메소드를 사용할 수 있다.

객체를 직접묶어도 되고, 그 안에 써도 된다.

다만 call, apply와 다르게 bind의 경우에는 this를 묶어주기만 하고 함수로 리턴한다.

요런식으로.

 

4) Arrow Function

 

ES6에서 새롭게 등장한 Arrow Function의 경우 this에 대한 쓰임새가 남다르다

얘는 기존의 함수와 다르게 상위 컴포넌트 요소를 바인딩 해주기 때문이다.

예시를 보자.

Arrow Function으 경우 바인딩된 context를 계속 지니고 있는 반면

기존 함수는 context의 b를 바인딩하지 못하고 전역의 b에 바인딩한다

(콘솔의 경우는 그렇고, 노드의 경우엔 undefined)