Cominciamo!
this는 여러방면으로 헷갈리는 개념. 스프린트나 예제를 볼 때는 this가 뭘 의미하는지 알겠지만, 막상 설명하기 어려운 개념 중 하나고. 이번 HA때도 좀 헷갈렸다. 그래서 한다. 정리!!
1. this란?
한마디로 정의하자면, 이렇게 되는거 같다.
“this”는 현재 실행문맥이다
“this”는 생성자라는 문맥에서 생성되는 인스턴스를 나타낸다.
마지막으로 MDN을 보자.
In most cases, the value of this is determined by how a function is called (runtime binding). It can't be set by assignment during execution, and it may be different each time the function is called.
대충 초벌구이를 해보자면,
"대부분의 경우, this의 밸류는 함수가 어떻게 호출되었느냐에 따라 결정된다. 실행 중에는 할당될 수 없고, 함수가 호출될 때마다 달라진다."
그러니까,
어떤 문맥에서 어떻게 호출되냐에 따라서 달라진다.
그 문맥은 크게 5가지 정도로 나눠진다.
2-1. Global
- 런타임이 브라우저일 때, 일반적으로 this는 전역객체인 window 객체를 의미한다.
2-2. Function 호출
코드스테이츠 자료를 참고하면,
Function 호출시 this를 사용할 이유는 없습니다. 흔히 사용하지 않는 방법입니다.
- 함수호출일 때는 함수 내부에서 this의 값은 함수를 호출한 방법에 의해 좌우되나, 보통은 전역일때와 마찬가지로 기본값인 전역객체(window)에 바인딩 되고, 1,2번 모두가 strtict 모드일 때는 this의 결과(undefined)가 달라짐.
2-3. Method 호출
- 메소드 호출은 객체.메소드() 과 같이 객체 내에 메소드를 호출하는 방법을 의미한다. 그러므로, this는 부모객체, 그러니까 메소드 앞에 오는 객체에 바인딩 된다. 실행문맥이 해당 객체가 됨.
아래 예제를 참고.
위 예제에서 this는 부모객체인 counter1이 됨.
2-4. new 키워드를 이용한 생성자 호출
- 생성자 호출은 객체.메소드() 과 같이 객체 내에 메소드를 호출하는 방법과 비슷하지만, 객체가 new 키워드를 이용해서 만들어졌다는 것이 다름. 이 때의 객체는 우리가 인스턴스라고 부르고, 즉 인스턴스.메소드() 의 형태의 호출임
이건 OOP를 이해한 사람이라면 다들 이해 가능!!
2-5. .call 또는 .apply 호출
- 이 두 개의 메소드는 this의 값을 한 문맥에서 다른 문맥으로 넘기기 위해 사용된다. 즉, this의 범위를 지정해 줄 수 있음. (이건 다음에 후술하게씀)
아래 그림에서처럼, 첫번째는 윈도우 객체를 리턴하나,
아래와 같이 .call로 This의 범위를 obj 객체로 지정해줄 수 있음.
Finiamo
this는 그러니까 실행하고 있는 문맥이 무엇이냐에 따라서 달라진다. 뭔가 좀 이해가 여전히 덜 된 것 같긴 한데, 어디서 덜 된 건지는 확실하지가 않다...ㅠㅠ
