[JavaScript] this란? / call, apply, bind 차이점

🔗 this란?

 

 this는 함수 호출 방식에 따라 this에 바인딩할 객체가 동적으로 결정된다.

(예외적으로, bind 함수는 호출과 무관에게 묶어서 고정시킬 수 있다.)

 

호출한 객체 === this

---

🔗 함수 호출 방식

 

<암묵적 바인딩>

 

1. 함수(일반함수, 전역함수, 외부함수, 내부함수(일반 내부함수, 메소드의 내부함수, 콜백함수 등)) 호출

 

 this는 전역객체(window)를 가리킨다.

 

2. 메소드 호출

 

 this는 해당 메소드의 객체를 가리킨다.

 

3. 생성자 함수 호출

 

 this는 생성자로 인해 생성된 인스턴스를 가리킨다.

 

---

<명시적 바인딩>

 

4. call, apply, bind 호출

 

 this가 함수 호출식에 따라 객체를 가리킨다면 call, apply, bind는 함수가 직접 실행문맥을 결정한다.

 

 call은 함수를 호출해 실행한다. 함수의 파라미터를 하나씩 넘긴다.

 apply는 함수를 호출해 실행한다. 함수의 파라미터를 배열 형태로 넘긴다.

 bind는 함수를 호출하는 것이 아니라 this가 바인딩된 새로운 함수를 만들어 리턴한다.

 

---

📌 일반 함수에서의 this VS 화살표 함수에서의 this

 

 일반 함수에서의 this는 함수 호출 방식에 따라 this에 바인딩할 객체가 동적으로 결정된다.

 화살표 함수에서의 this는 항상 상위 스코프의 this를 가리킨다. 따라서 this에 바인딩할 객체가 정적으로 결정된다. (상위 스코프의 this를 그대로 물려받기 때문에 직접적으로 접근이 가능하다.)

 

 

🔗 use strict 모드에서의 this

 

 함수 호출에서 this는 window가 아닌 undefined를 가리킨다.

 

 

---

🔎 참고 자료

• 화살표 함수
• 함수 호출 방식에 의해 결정되는 this

💡 같이 보면 좋을 Post

[JavaScript] 실행 컨텍스트(Execution Context)란?

[JavaScript / ES6] ES6 문법 정리