this keyword - 1탄

JavaScript를 하는 많은 개발자들이 가장 두려워하는 파트이다. 그것은 바로 "This"! 실제로 현업에 오랫동안 종사하신 개발자들 중에도 "This"에 관하여 제대로 알 지 못하는 사람들이 많다는 것을 얼핏 들은 적이 있다. 하지만 본 개발자 '는 모든 것을 알지는 못 하더라도 아는 것 만큼은 제.대.로 아는 것을 추구하기에 용기 내어 이 글을 작성한다. (아직 배워가는 과정이므로 틀린 것이 있다면 꼭 댓글을 달아주시기를 부탁합니다!)

 

자 이제 시작해보자

 

JS의 모든 함수(arrow function 제외) 내부에서는 별도의 변수 선언 없이 this keyword를 사용할 수 있다

(keyword라 하면, JS에 내장된 명령어이다)

 

(주의!!) function 키워드를 이용해 생성한 일반 함수와는 다르게, arrow function 내부에는 this가 존재하지 않는다. arrow function에서 이 키워드들을 사용할 경우 일반 변수와 동일하게 Scope Chain에 따라 탐색하게 된다

 

function test() {   console.log(this); }

 

this의 용도

Tiger: 나는 밥을 먹고 있다

Cat: 나는 밥을 먹고 있다

 

첫 번째 문장의 나는 Tiger를 의미하고

두 번째 문장의 나는 Cat을 의미한다

 

같은 문장이지만, 상황에 따라서 '나'의 의미가 바뀐다. 이것이 this의 용도와 유사하다고 생각하면 된다. 결국 this가 어떠한 것을 가르치는가 그것이 핵심이다! 또한 this가 가르치는 것은 왠만해서는 객체이다. 이 점을 항상 기억하자!

 

위 코드의 결과는 어떻게 나올까

25

15

함수의 선언문만 보고 this를 판단할 수 없다.

왜냐하면 this 값은 함수가 실행되는 순간에 결정되기 때문이다. 그래서 this 값을 판별하기 반드시 함수의 실행문을 찾아야 한다. 함수의 실행문을 찾고, 그 함수가 어떻게 실행되는지만 판단한다면 this 값을 쉽게 알 수 있다.

 

this 값은 아래와 같이 4가지의 함수 호출 방식에 따라 크게 분류된다.

1. Regular Function Call

2. Dot Notation

3. Call, Apply, Bind

4. new Keyword

 

다음 글: 

muscardinus.tistory.com/163