[JS Flow] this

 

this 호출하는 방식

---

✔ 전역공간에서 : window / global

✔ 함수 내부에서 : window / global

✔ 메소드 호출시 : 메소드 호출 주체 (메소드명 앞)

✔ callback에서 : 기본적으로는 함수내부에서와 동일

✔ 생성자 함수에서 : 인스턴스

 

요약하자면 이렇다. 세부적인 내용을 살펴보자.

 

 

 

전역공간에서, 함수 내부에서

---

전역공간에서, 함수 내부에서 호출되는 this는 같다.

자바스크립트의 버그?라고 볼 수 있다구함..

함수는 전역객체의 메소드다! 라고 생각하자.

 

 

 

메소드 호출시

---

 

메소드명 b앞에 있는 a가 this이다.

다음과 같은 로그가 출력된다.

 

 

메소드명은 c니까 a.b가 this이다.

다음과 같은 로그가 출력된다.

 

 

메소드 안에 내부함수가 있을때, 그 안에서 this가 문제될 수가 있다.

이 코드에서 this.a는 각각 20, 10을 출력한다.

b는 메소드이지만, c는 함수이기 때문이다.

 

여기서도 this를 쓸 수는 없을까?

내부함수에서 우회할 수 있는 방법이 있다.

메소드에서 변수에 this를 담고 내부함수에서 변수를 활용하면

메소드와 동일한 this를 사용할 수 있다.

 

 

 

callback에서

---

일단 call, apply, bind 메소드에 대해 알아보자.

위 코드에 대한 출력은 다음과 같다.

모두 같은 출력을 하도록 구현했다.

 

call, apply, bind 메소드의 정의

✔ func.call( thisArg [, arg1[, arg2[, ...]]] )

✔ func.apply( thisArg [, argsArray] )

call과 apply는 즉시호출을 하는 명령이다.

call은 매개변수를 하나하나 받아오고, apply는 배열 통째로 매개변수를 받아오는 차이다.

✔ func.bind( thisArg [, arg1[, arg2[, ...]]] )

bind는 새로운 함수를 생성한다.

'인자 this값은 내가 지정할게 나머지값을 지정해서 호출하면 그때 실행되게해'

'인자this값, 첫번째, 두번째값은 내가 지정할게 나머지 세번째값을 지정해서 호출하면 그때 실행되게해'

이런 동작을 한다..

 

 

이제 콜백함수에서 this를 보자.

여기서 callback은 함수이기 때문에 전역객체를 바라보게 되고, window를 출력한다.

 

그러나 callback의 제어권을 넘겨받은 메소드가 this를 다른곳으로 명시하면, obj객체를 출력한다.

 

 

 

callback호출에 대해 정리하자면,

✔ 기본적으로는 함수의 this와 같다.

✔ 제어권을 가진 함수가 callback의 this를 명시한 경우 그에 따른다.

✔ 개발자가 this를 바인딩 한 채로 callback을 넘기면 그에 따른다.