this란?
현재 실행 문맥이다.
실행 문맥이란 현재 문맥에서 호출자가 누구냐? 라는것입니다.
함수 실행 컨텍스트(실행 가능한 코드 환경)에 this가 존재하고 있고, 이 this는 함수의 호출 방식에 의해 값이 결정된다.
- 일반 함수 호출
const func = function() {
console.log(this); //window
};
콘솔에는 window가 출력된다.
이유는 함수는 기본적으로 전역 함수이고 실행 컨텍스트의 Global Object에 등록되기 때문에 전역 객체인 window가 func 함수를 호출하는 것과 동일한 것이다.
따라서 window(전역 객체)가 func 함수를 호출한 것이기 때문에 위 코드에서의 this는 window 이다.
- 메서드 호출
let obj = {
func: function() {
console.log(this); //obj
}
};콘솔에는 obj가 출력된다.
이유는 함수가 obj 객체의 func 프로퍼티에 값으로 존재하고 있기 때문이다.(이 경우 함수를 메소드라 부른다.)
func 메소드를 호출하기 위해서는 obj에 접근해야 하고 obj.func()로 호출한다.
obj에 접근해서 obj로 메소드를 호출하기 때문에 this는 obj가 된다.
- 생성자 함수 호출
const newFunc = new Func();생성자 함수를 호출해서 인스턴스를 생성한 경우 this는 인스턴스를 가리킨다.
인스턴스라 함은 newFunc를 말한다.
new 키워드를 사용해서 생성자 함수를 호출하면 생성자 함수를 온전히 복사해서 인스턴스에 할당한다.
인스턴스는 new 키워드를 사용해서 호출한 생성자 함수의 복사본으로 인스턴스에서는 생성자 함수가 가지고 있는 모든 리소스를 사용할 수 있다.
- call, apply, bind 호출
func.call();
func.apply();
func.bind();
call, apply, bind는 자바스크립트에서 함수의 최상위 프로토타입 Function의 메서드로
자바스크립트에서의 모든 함수는 call, apply, bind 메서드를 호출 할 수 있다.
call, apply, bind 메서드는 첫번째 인자로 this로 바인딩 시킬 객체를 받는다.
필수는 아니다. this 바인딩을 대체하고 싶지 않으면 null을 할당해주면 된다.
