자바스크립트 this 이해하기

자바스크립트의 this

 

레이서 한 분이 질문했는데, 튜터님의 답변이 너무나 이해하기 쉬워 따로 적어놓는다.

 

우선 아래 3가지 규칙이 this와 관련한 규칙 전부입니다.

이 이외에는 없습니다.

1. 객체(object)의 메소드(객체 내의 함수)가 일반 함수인 경우, this는 그 객체가 된다.

2. 객체의 메소드가 화살표 함수인 경우, this 는 lexical context (화살표 함수 밖 컨텍스트) 이다.

 - 2번 규칙은 사실, 화살표 함수가 객체에서 쓰이든, 객체의 함수에서 쓰이든, 함수의 함수에서 쓰이든, 언제든지 적용될 수 있는 규칙입니다. 어느 경우든, lexical context의 this가 화살표 함수의 this가 됩니다

3. 1번도 2번도 아닌 경우의 this는, window (strict 아닐 때), 혹은 undefined(strict일 때)이다.

 

출처 . 엘리스

1. 노란색은 index.js 파일의 기본 컨텍스트입니다. 그리고 기본 컨텍스트에서 this 라는 변수는 기본적으로 window 라는,

인터넷 브라우저(크롬)에서 가장 대표격(대통령처럼 가장 위인 존재)인 객체(object) 가 할당됩니다.

별도로 this = window 처럼 변수 설정을 안 해주어도 알아서, this는 window로 설정되는 것입니다.

그래서 1번 this 는 window 입니다.

 

2. myObject 는 중괄호 { } 를 통해 자체적인 컨텍스트를 만들어냅니다. 따라서 파란색 컨텍스트가 만들어지고, 파란색이 myObject 컨텍스트 입니다. 그런데 아직까지 this 는 2번에서 보면 window 입니다. 이는, 이 때의 this 가 만약 myObject 라는 자기 자신이 되어버린다면, 아래와 같은 경우에서 큰 오류가 발생하기 때문입니다.

myObject{ 
    myVar_1 : this.myVar_1
}

위 코드에서 this 가 myObject가 된다면, 무한 루프?가 되어버립니다. 따라서 2번 this 가 바로 myObject가 되지는 않고, 그대로 window 입니다.

 

3. 이제 3번의 경우, 아래 규칙이 적용됩니다. 객체(object)의 메소드(객체 내의 함수)가 일반 함수인 경우, this는 그 객체가 된다. 다시 쓰면, myObject 의 메소드 myFunction_1 이 일반 함수이므로, this 는 myObject 가 됩니다. 이제 this가 myObject로 설정되어도, 위 무한루프? 같은 문제도 안 생깁니다. 캡쳐를 해 주신 설명은 위 규칙을 조금 알기 어렵게 풀어 쓴 것이라고 생각하시면 됩니다. 기억해야할 규칙은, 객체의 메소드로 일반 함수가 쓰였다면 그 때의 this 는 그 객체 라는 것입니다.

 

4. 마지막 this 는 그대로 window인데, 이때는 아래 규칙이 쓰입니다. 객체의 메소드가 화살표 함수인 경우, this 는 lexical context (화살표 함수 밖 컨텍스트) 이다. lexical context 는 아래의 경우입니다. let a = 5 let myFunc = () => { let b = a + 5 } 당연히 b 는 10 입니다. 그리고 당연한 것처럼 함수 밖의 a 를 가져와서 쓰고 있습니다. 함수 컨텍스트 밖의 컨텍스트에서 a 를 가져와 씁니다. 이게 lexical 컨텍스트 입니다. 다시 규칙으로 돌아가서 다시 쓰면, myObject 의 메소드로 쓰인 myFunction_2 가 화살표 함수이므로, 그 lexical 컨텍스트 (파란색) 의 this 이다. 라는 것입니다. 파란색 컨텍스트의 this는 2번에서 봤던 것처럼 window 입니다. 그래서 4번 this 도 window 입니다.