코어 this

1) this 앞선 실행컨텍스트를 생성될 때 결정 된다.

 

실행컨텍스트는 어떠한 환경에서 코드를 하나씩 수집하면서 그 스냅샷으로 환경변수를 만들어내고

그 이후에 변하는 것들에 대해서는 어휘적환경에서 반영하게 된다. 이때 this 바인딩도 같이 만들어지게 된다.

 

this는 함수를 호출 할 때 결정 된다. 함수를 어떤 방식으로 호출하느냐에 따라 값이 달라진다.



1. 전역공간에서의 this 

 

전역공간에서의 this는 전역객체를 가르침

브라우저 환경에서는 this 는 window

node 환경에서는 global 임.

 

2. 변수는 어떤 객체의 프로퍼티 처럼 동작한다.

 

(앞전의 포스트 내용 실행컨텍스트 이야기)

여기서 어떤 객체란 어휘적환경을 가르키는 것이고,

 

실행 컨텍스트는 변수를 수집해서(환경레코드)프로퍼티로 저장을 하는데

이후 어떤 변수를 호출하면 어휘적 환경에서 (환경레코드)조회를 해서 일치하는 프로퍼티가 있을 경우 그 값을 반환하는데,

 

전역컨텍스트에서는 최상위 스코프 전역스코프이기 때문에 전역객체를 그대로 참조함.

 

여기서의 전역객체는 브라우저는 window, nodejs 에서는 global 이다.

 

2) 메서로서 호출 할 때 그 메서드 내부에서의 this

 

함수 vs 메서드

 

함수로 호출 하느냐 vs 메서드로 호출하느냐의 차이는 독립성에 있다.

 

함수는 그 자체로 독립적인 기능을 수행하고 메서드는 자신을 호출한 대상 객체에 관한 동작을 수행,

 

fun 이라는 변수 명에 함수를 할당했고 4번줄에서 func(1)을 호출했습니다.

결과는 this는 전역공간을 가르키고 x는 인자 그대로 1이 나옴

 

obj 라는 객체를 만들고 여기서 method 라는 프로퍼티에 func 함수를 value로 가져갔을 때

obj.method 에서의 this는 객체를, x는 인자의 2를 가르칩니다.

 

위 사진에서 window 에는 {...} 이라는 값이 같이 출력 되었다.

이거는 함수로써의 동작을 의미하고 

obj.method 에서는 method:f 로써 메서드의 함수로써 동작을 했다.

 

ㅊ ㅌ

this 는 함수가 어디서 호출됬느냐에 따라 값이 달라진다.

1번에서는 전역공간에서 This를 호출했기 때문에 this는 전역공간 window가 되는것이고,

obj 이라는 프로퍼티안에서의 func를 메서드로 호출했기 때문에 method 가 this가 됨

 

대괄호표기법 또는 점표기법이든 똑같다.

3) this는 호출한 주체에 대한 정보가 담긴다.

 

어떤 함수를 메서드로써 호출하는 경우 호출 주제는 바로 함수명(프로퍼티)앞의 객체,

 

obj.methodA() 를 호출 할경우 this는 obj의 실행컨텍스트에서 환경레코드에 담겨져있는 변수들을 나타낸다.

 

obj 실행컨텍스트 안에서 methoA, inner가 환경레코드로 수집되어 있다.

 

반면 1 뎁스를 더 들어가서 inner.methodB는 inner환경에서 수집 된 methodB 만 존재하게 됨,

그래서 this는 methodB만 프로퍼티로 보여짐.

e\

다른 예제 

 

1번은 obj.outer() 로 메서드로 호출이 됬기 때문에 this는 obj 환경을 가짐 -> outer 함수가 출력,

 

2번은 obj 안에서 그냥 일반 함수로써 innerFunc()을 호출해서 this가 지정되지 않고 window, global 전역객체가 바인딩됨

 

2번의 또 다른 obj2라는 객체안에서 프로퍼티로써 innerFunc 함수를 저장하고 obj2.innerMethod()를 만들고 호출 this는 obj2의 환경을 this 로 출력

 

this 바인딩에서 어느환경에서 실행이 됬는지보다 함수로써 호출됬는지 메서드로써 호출 됬는지가 중요하다

 

4) this 우회

함수로써 호출 된 this 는 전역객체 window, global 을 갖는다.

전역 객체 대신 주변환경에서 this를 그대로 상속받아 사용할수는 없을까?

 

상속을 할 방법은 없지만 우회할 방법은 있다.

변수를 활용하는 것,

 

outer 메서드의 함수의 this는 { outer: f }을 갖는데,

이 this를 self 라는 변수에 담아 함수안에서 this를 저장해 둔 self를 호출하면 { outer : f } 이 출력 됨.

 

화살표 함수)

ES6 에는 함수 내부에서 This가 전역객체를 바라보는 문제를 보완하고자 this에 바인딩당하지 않는 화살표함수를 도입함.

그 밖에도 call, apply 등으로 this를 명시적으로 바인딩 하는 방법도 있다.