자바스크립트의 this

자바스크립트의 this는 함수가 호출되는 방식에 따라 동적으로 결정된다.

 

 

1. 전역컨텍스트에서 this는 전역 객체를 참조한다.

2. 메서드에서 this는 해당 객체를 참조한다.

3. 화살표 함수는 자체적인 this를 가지지 않고 상위 스코프의 this를 상속받는다.

4. call, apply, bind 메서드를 통해 this를 명시적으로 설정할 수 있다.

---

foo 의 this는 obj

obj.foo()로 호출되었기 때문에 호출 컨텍스트는 obj 이므로 이때의 this는 obj이다.

 

bar의 this는 window

foo 내부에서 bar()를 호출하였으나, obj와 연결된 메소드가 아니다. 

단순히 foo안에서 정의된 내부 함수일 뿐..! 

즉 일반 함수로 호출되었기 때문에 호출 컨텍스트는 window가 된다.

 

일반 함수 호출 시 this는 기본적으로 window객체를 참조한다 ( 엄격 모드에서는 undefined )

 

화살표 함수에서의 this

화살표 함수는 this를 가지고 있지 X

대신 상위 스코프의 this를 상속받는다!

 

 

 

왼쪽 코드의 bar함수는 일반 함수로 호출된다. 그러므로 this는 window를 참조하기 때문에

전역 객체 name인 banana가 된다.

 

오른쪽 코드의 bar함수는 화살표 함수이기 때문에 this가 존재하지 않고, 바로 상위 스코프의 this를 상속 받는다.

그러므로 foo의 this인 obj를 참조하여 obj의 name인 apple값을 받게 된다.

 

 

 

 

 

JS | this(2) : 일반함수와 화살표 함수의 this

 

📚 자바스크립트 화살표 함수 사용법 총정리