146. [JavaScript] this의 4가지 동작 방식 TIL23.04.04

---

 

this의 4가지 동작 방식

JS에서 this는 함수를 호출하는 방식에 따라 다르게 동작한다.
일반적으로, this는 현재 실행 컨텍스트(Execution Context)에서 바인딩되는 값이다.
이때, 함수를 어떻게 호출하는지에 따라 this의 값이 결정된다. 

 

1. 전역 컨텍스트(Global Context)에서 this (기본 바인딩)

전역 컨텍스트에서 this는 전역 객체를 참조한다.
브라우저 환경에서 window 객체를,
Node.js 환경에서는 global 객체를 의미한다.

 

2. 객체 메서드에서의 this (암시적 바인딩)

객체 메서드에서의 this는 해당 메서드를 호출한 객체를 참조한다.
예를 들어, obj.method() 와 같이 객체의 메서드를 호출하면, this는 obj를 참조한다.

 

3. 함수 호출에서의 this

일반적인 함수 호출에서 this는 전역 객체를 참조한다.
그러나 strict mode 에서는 this가 undefined가 된다.
함수를 메서드가 아닌 함수로 호출할 때, this를 특정 객체로 지정하려면 call, apply, bind와 같은 메서드를 사용하여 명시적으로 바인딩해줘야 한다.(명시적 바인딩)

 

4. 생성자 함수에서의 this (new 바인딩)

생성자 함수에서의 this는 새로 생성되는 객체를 참조한다.
생성자 함수를 호출하여 새로운 객체를 생성할 때, this는 생성되는 객체를 가리킨다.

 

 

바인딩 우선순위

new 바인딩 >= 명시적 바인딩 > 암시적 바인딩 >= 기본 바인딩

 

 

화살표 함수(Arrow Function)

화살표 함수는 자신의 this가 없다.
대신 화살표 함수가 둘러싸는 렉시컬 범위(lexical scope)의 this가 사용된다.
즉, 언제나 화살표 함수의 상위 스코프, 화살표 함수가 선언된 스코프의 this를 가리킨다.

👉 렉시컬 범위(Lexical scope)는 변수의 유효 범위를 결정하는 방식. 간단히 말하면, 변수가 선언된 위치에 따라 변수의 유효 범위가 결정됨