-
자바스크립트 this 이해하기IT/엘리스SW 2022. 4. 25. 00:33728x90
자바스크립트의 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 입니다.
'IT > 엘리스SW' 카테고리의 다른 글
[쇼핑몰 웹 만들기] 프로젝트 2주차 (0) 2022.06.05 [쇼핑몰 웹 만들기] 프로젝트 1주차 (0) 2022.05.29 [TIL] 엘리스 SW 엔지니어트랙 2기 - (Week2,Day14) (0) 2022.04.22 [TIL] 엘리스 SW 엔지니어트랙 2기 - (Week2,Day13) (0) 2022.04.21 [TIL] 엘리스 SW 엔지니어트랙 2기 - Javascript (Week2,Day11) (0) 2022.04.19