All Articles

This

this란 ??

현재 실행 문맥이다.
실행 문맥이란 현재 문맥에서 호출자가 누구냐? 라는것입니다.

함수 실행 컨텍스트(실행 가능한 코드 환경)에 this가 존재하고 있고, 이 this는 함수의 호출 방식에 의해 값이 결정된다.

  1. 일반 함수 호출
let func = function() {
  console.log(this);
};

위 코드는 window가 출력된다.
이유는 함수는 기본적으로 전역 함수이고 실행 컨텍스트의 Global Object에 등록되기 때문에 전역 객체인 window가 func 함수를 호출하는 것과 동일한 것이다.
따라서 window(전역 객체)가 func 함수를 호출한 것이기 때문에 위 코드에서의 this는 window 이다.

  1. 메서드 호출
let obj = {
  func: function() {
    console.log(this);
  }
};

위 코드는 obj가 출력된다.
이유는 함수가 obj 객체의 func 프로퍼티에 값으로 존재하고 있기 때문이다.(이 경우 함수를 메소드라 부른다.)
func 메소드를 호출하기 위해서는 obj에 접근해야 하고 obj.func()로 호출한다.
obj에 접근해서 obj로 메소드를 호출하기 때문에 this는 obj가 된다.

  1. 생성자 함수 호출
let newFunc = new Func();

위 코드는 newFunc가 출력된다.
이유는 생성자 함수를 호출해서 인스턴스를 생성한 경우 this는 인스턴스를 가리킨다.
인스턴스라 함은 newFunc를 말한다.
new 키워드를 사용해서 생성자 함수를 호출하면 생성자 함수를 온전히 복사해서 인스턴스에 할당한다.
인스턴스는 new 키워드를 사용해서 호출한 생성자 함수의 복사본으로 인스턴스에서는 생성자 함수가 가지고 있는 모든
리소스를 사용할 수 있다.
newFunc 인스턴스가 가지고 있는 함수에 접근하기 위해서는 newFunc에 접근해야하고 newFunc를 접근해서
호출해야하므로 this는 newFunc이다.

  1. call, apply, bind 호출
func.call(first);
func.apply(second);
func.bind(third);

위 코드는 first, second, third가 출력된다.
이유는 call, apply, bind 메소드는 첫번째 인자로 this에 바인딩 시킬 object를 받는데 call, apply, bind는 Function(함수 최상위 프로토타입)의 메서드로 자바스크립트에서 함수는 call, apply, bind 메서드를 호출할 수 있다.
따라서 this는 first, second, third가 된다.