[자바스크립트 기본 개념] this

this란? 

현재 실행되는 코드의 문맥(context)에서 참조하는 객체를 가리킨다.
쉽게 말해, this는 “누가 나를 호출했는가?”에 대한 답변이라 볼 수 있다.

 

 

this는 함수가 어떻게 호출되는지에 따라 참조하는 객체가 달라진다. 

1. 일반 함수 호출
2. 메소드 호출
3. 생성자 함수
4. 화살표 함수
5. 명시적 바인딩 

 

크게 이런 호출 방식에 따라 객체가 달라지는데, 우선은 명시적 바인딩은 다음에 자세히 살펴보는 것으로 하고 

나머지 4개 호출 방식에서 this가 어떻게 동작하는지부터 이해하자. 

 

 

1. 일반 함수 호출

이 때 this 는 전역 객체를 가리킨다. 
브라우저에서는 window를, Node.js 에서는 global을 가르킨다. 

 

2. 메소드 호출

this 는 메소드를 호출한 객체를 가리킨다. 
해당 메소드를 품고(?) 있는 객체를 가리킴. 

 

3. 생성자 함수

new 키워드로 호출될 때, this 는 새로 생성된 객체를 가리킨다. 

 

4. 화살표 함수

this 는 자신을 감싸는 외부 함수의 this 를 가리킨다. 
화살표 함수는 자신만의 this를 생성하지 않고, 자신을 감싸고 있는 스코프의 this를 그대로 사용. 

 화살표 함수 예시:

const person = {
  name: "Alice",
  regularFunction: function() {
    console.log("Regular function:", this.name);
    
    const arrowFunction = () => {
      console.log("Arrow function:", this.name);
    };
    
    arrowFunction();
  }
};

person.regularFunction();


//Regular function: Alice
//Arrow function: Alice

 

 

화살표 함수는 this와 연결해서 따로 좀 더 봐야할 것 같다.