[Javascript-Core] 전역 공간에서의 this (부제) ::JS에서 말하는 This에 정확한 의미와 다양한 상황에서의 this(1)

오늘 알아볼 것은 this이다.

나는 객체 지향 언어인 java를 먼저 배웠기 때문에 js에서 말하는 this를 단지 class 내부의 프로퍼티에 대한 포인터역할로써 이해를 했었지만, js에서 말하는 this는 훨씬 다양하고 심오한 기능을 수행하고 있었다.

오늘 그 심오한 기능들에 대해서 짚어보자.

 

해당 글은 4부작으로 나뉘어져 있습니다. this에 대한 모든 것을 완벽히 파악하고싶다면 한 번 봐보는 것을 권장합니다.

 

1. 전역 공간에서의 this
2. 메서드 내부에서의 this
3. 함수 내부에서의 this
4. 콜백 함수에서의 this

What is this

w3cschool

 

최대의 docs를 제공한다는 w3c에는 다음과 같이 this의 기능을 분류한다.

 

• 메서드에서 this는 그의 주인 객체(Owner Obj)를 뜻한다.
• this가 단독으로 사용되면 그것은 global 객체를 뜻한다.
• 함수에서 this는 global 객체를 뜻한다.
• strict mode가 적용된 함수에서 this는 undefined이다.
• 이벤트에서 this는 이벤트를 받는 element를 뜻한다.
• call()과 apply() 같은 메서드에서 this는 any object를 뜻한다.

각각의 예를 통해서 조금 쉽게 이해해보자.

 

모든 원리를 파악하는것이 가장 중요하다.

 

단순히 암기를 해서 사용한다는 것은 당장은 효과적일지 모르겠으나 언제 어떤 언어가 어떻게 사라지고 등장할지 모르는 현재에는 언어의 사용법보단 컴퓨팅적 사고가 중요하다.

---

this의 특성과 실행 컨텍스트

js에서의 this는 위에서 봤듯이 상황에 따라서 달라진다.

 

this가 결정되기 위해선 지난 실행 컨텍스트의 포스팅에서 이야기 했듯이 LexicalEnvironment에 thisBinding 되는 시점에 결정된다.

 

그 말은 즉, 자바스크립트 엔진이 실행되고 인터프리팅을 하는 첫 순간부터 this는 정해지게 되는데 그 순간이 바로 전역 공간이다.

전역 공간의 this

전역 공간의 this같은 경우는 바로 전역 공간 자체를 가리킨다.

 

위에서 말 햇듯이 엔진이 돌아가면서 실행되는 첫 번째 Execution 자체가 Global이기 때문이다.

 

실행 환경에 따라 global에 대한 정확한 객체가 달라진다.

 

만약 당신이 브라우저를 이용한다면 전역 객체는 window가 될 것이고, Nodejs 환경에서 엔진을 돌린다면 전역 객체는 global이 된다는 점을 참고하자.

 

나는 브라우저를 이용하므로 브라우저의 this를 출력시켜 보겠다.

우리의 예상대로 window가 현재 가리키고 있는 this가 된다.

 

위에서 말 했던 실행 컨텍스트와 this의 상관 관계를 알고 있으면 다음 소스코드의 결과가 충분히 납득 가능할텐데 한 번 봐보자.

 

결과를 예상해볼 수 있을까?

• 난 할 수 있다.
• 모르겠다.

만약 모르겠다면 실행 컨텍스트에 관해 알아보지를 가볍게 읽고 물 한잔 하고 다시 봐본다면 이해를 할 수 있다.

 

결과는 모두 10 10 10 이 나온다.

이유를 이해해보기 위해 두 가지만 다시 짚고 넘어가자

1. 현재 실행 컨텍스트를 가리키는 것이 this
2. 브라우저에서 global은 window

이제 이해가 됐으리라 믿는다.

var a = 10; // 현재 실행 문맥인 window에 변수 a를 정의하고 10을 할당

console.log(a); // 현재 실행 문맥에 있는 window 변수를 출력

console.log(window.a); // window 변수를 출력

console.log(this.a); // 현재 실행 문맥의 변수를 출력