this

자바스크립트에서 this는 어디서든 사용할 수 있으며, 상황에 따라 달라진다. 자바스크립트에서 this는 기본적으로 실행 컨텍스트가 생성될 때 함께 결정된다. 실행 컨텍스트는 함수를 호출할 때 생성되므로, this는 함수를 호출할 때 결정된다고 할 수 있다. 즉, 함수를 어떤 방식으로 호출하느냐에 따라 값이 달라진다.

상황에 따라 달라지는 this

• 전역공간에서의 this
  • 전역 객체를 가리킨다. 전역 객체는 개념상 전역 컨텍스트를 생성하는 주체이다.
  • 브라우저 환경에선 Window, Node.js 환경에서는 global이 전역 객체이다.
• 일반 함수 내부에서의 this
  • 전역 객체를 가리킨다. 즉, this가 지정되지 않는다.
  • 이는 함수를 전역 공간에서 호출했을 때 뿐만 아니라 메서드 내부에서 함수를 호출했을 때도 마찬가지이다.
• 메서드 내부에서의 this
  • 메서드를 호출한 주체를 가리킨다. 보통 객체.메서드()의 형태로 많이 사용하는데, 이때 this는 . 앞에 있는 객체를 가리킨다. Dot notation이 아닌 bracket notatiton을 사용해도 마찬가지이다.
  • 따라서 앞에 . 유무 여부를 따져 함수를 함수로서 호출한 것인지, 메서드로 호출한 것인지 알 수 있고, 그에 따라 this가 무엇인지 쉽게 알 수 있다.
• 콜백 함수 내부에서의 this
  • 콜백 함수 역시 함수이므로 기본적으로 전역 객체를 가리킨다.
  • 하지만 addEventListner 등 this가 될 대상을 지정해놓은 콜백 함수의 경우는 그것에 따른다.
• 생성자 함수 내부에서의 this
  • 새로 만들 구체적인 인스턴스를 가리킨다.

this 바인딩

명시적으로 this에 별도의 대상을 바인딩하는 방법이 있다.

call / apply 메서드

const 실행할함수 = function() {};
실행할함수.call(지정할대상, 인자);

실행할함수.apply(지정할대상, [인자배열]);

call, apply 메서드는 호출한 주체인 함수를 즉시 실행하되, 그 함수의 this에 메서드의 첫 번째 인자를 바인딩하는 메서드이다. 나머지 인자들은 함수를 실행할 때 매개변수로 입력된다.

call 메서드와 apply 메서드의 차이는, call 메서드는 두 번째 인자부터 모든 인자들을 함수의 매개변수들로 지정하지만 apply 메서드는 함수의 매개변수로 사용할 인자들을 배열의 형태로 입력받는다는 것이다.

이 메서드는 this를 명시적으로 바인딩하는 것 외에도, 유사배열객체를 배열로 형변환하는데 쓸 수 있다.

var obj = {
  0: "a",
  1: "b",
  2: "c",
  length: 3,
};

Array.prototype.push.call(obj, "d");
console.log(obj); // { 0: "a", 1: "b", 2: "c", 3: "d", length: 4}

var arr = Array.prototype.slice.call(obj);
console.log(arr); // ["a", "b", "c", "d"]

이 때의 call, apply는 쉽게 말해 어떤 함수를 '빌려다가' 특정한 대상에 적용하는 모양새이다. 위의 예제에선 Array.prototype.slice라는 함수를 '빌려다가', 유사배열객체인 obj 에 적용했다.

bind 메서드

bind 메서드는 call 메서드와 비슷하지만 즉시 호출하지 않는다는 점이 다르다. bind 메서드는 넘겨받은 this 및 인수들을 바탕으로 새로운 함수를 반환하기만 한다. 만일 bind를 통해 일부 인수들을 넘겨주고, 반환된 함수를 호출하며 새로운 인수를 입력했을 경우 bind 메서드를 호출할 때 전달했던 인수들의 뒤에 이어서 등록된다.