📩 자바스크립트의 this

🤔 this는 뭘까?

this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수(self-referencing variable)다. 다른 언어의 this와는 달리 자바스크립트의 this는 어디서든 사용할 수 있다. 자바스크립트의 this는 실행 컨텍스트를 생성할 때 함께 결정된다. 실행 컨텍스트는 함수를 호출할 때 생성되므로, this는 함수를 호출할 때 결정된다고 할 수 있다. 함수를 어떤 방식으로 호출하느냐에 따라 값이 달라진다. 아래에서 자세히 살펴보자.

---

📞 호출방식에 따라 달라지는 this 바인딩

전역에서의 this

다른 언어와 달리 자바스크립트의 this는 어디서든 사용할 수 있다고 했다. 전역에서도 this를 참조할 수 있는데 전역에서 this를 호출하면 this에는 전역 객체가 바인딩된다.

여기서 바인딩의 의미를 잠시 설명하고 가겠다.

바인딩이란 식별자와 값을 연결하는 과정을 의미한다. 예를 들어, 변수 선언은 변수 이름(식별자)과 확보된 메모리 공간의 주소를 바인딩하는 것이다.

this 바인딩은 this와 this가 가리킬 객체를 바인딩하는 것이다. (this는 키워드로 분류되지만 식별자 역할을 한다)

this에 전역 객체가 바인딩된다 === this가 전역 객체를 가리킨다.

console.log(this); //undefined

this는 객체의 프로퍼티나 메서드를 참조하기 위한 자기 참조 변수이므로 일반적으로 객체의 메서드, 생성자 함수 내부에서만 의미가 있다. 전역공간이나 일반 함수 내부에서 this를 참조하면 엄격 모드(strict mode)에서는 undefined가 바인딩된다. 이는 ESLint 등을 사용해도 마찬가지다. 전역공간이나, 일반 함수 내부에서 this를 사용할 필요가 없기 때문이다.

---

일반 함수로 호출될 때 함수 내에서의 this

this는 호출한 주체의 정보를 담는다. 어떤 함수를 함수로써 호출할 경우엔 this가 지정되지 않는다. 그런데 함수로써 호출하는 것은 호출 주체를 명시하지 않고 개발자가 코드에 직접 관여해서 실행한 것이기 때문에 호출 주체의 정보를 알 수 없는 것이다. 실행 컨텍스트의 활성화 당시에 this가 지정되지 않은 경우 this에는 전역 객체가 바인딩된다. 따라서 함수에서의 this는 전역 객체를 가리킨다.

하지만 위에서 말했듯이 엄격 모드나 ESLint 등을 사용할 경우 전역 객체에는 undefined가 바인딩된다.

function foo() {
  console.log(this); //undefined
}
foo();

일반 함수로 호출된 모든 함수(중첩함수나 콜백 함수 포함) 내부의 this에는 전역 객체가 바인딩된다. 참고로 브라우저 환경에서 전역 객체는 window, Node.JS 환경에서는 global이다.

---

메서드로 호출될 때 메서드 내에서의 this

메서드로 호출될 때, 메서드 내부 this에는 메서드를 호출한 객체가 바인딩된다. 점 표기법의 경우 마지막 점 앞에 명시된 객체가 곧 this가 되는 것이다. 여기에 주의해야할 점이 하나 있는데, this는 메서드를 소유한 객체가 아닌 메서드를 호출한 객체에 바인딩된다는 점이다.

메서드는 프로퍼티에 바인딩된 함수다.
만약 Person 객체의 메서드로 getName이라는 메서드가 있다고 했을 때, getName 프로퍼티가 가리키는 함수 객체는 Person 객체에 포함된 것이 아니라 독립적으로 존재하는 별도의 객체이다. 그저 getName 프로퍼티가 함수 객체를 가리키고 있을 뿐이다.

따라서 getName 프로퍼티가 가리키는 함수 객체, getName 메서드는 다른 객체의 프로퍼티에 할당하는 것으로 다른 객체의 메서드가 될 수도 있고 일반 변수에 할당하여 일반 함수로 호출될 수도 있다.

---

콜백함수로 호출될 때 콜백함수 내에서의 this

콜백함수로 함수가 호출될 때는 콜백함수를 실행한 함수의 내부 로직에서 정한 규칙에 따라 값이 결정된다. 콜백함수도 함수이기 때문에 기본적으로 this에 전역 객체가 바인딩되지만, 콜백함수를 실행한 함수가 별도로 콜백함수에 this가 될 대상을 지정한 경우에는 그 대상이 바인딩된다.
예시 코드를 통해 한 번 살펴보자.

setTimeOut(function () {
  console.log(this); //window
}, 300);

const $ = (selector) => document.querySelector(selector);
$('#app').addEventListener('click', function (e) {
  console.log(this); //app
});

setTimeOut 함수는 this가 될 대상을 따로 지정하지 않는다. this에는 전역객체가 바인딩된다.
addEventListner 메서드는 자신의 this를 상속하도록 정의돼 있다. 그러므로, 메서드 명의 (.) 앞부분이 this에 바인딩되는 것이다.

---

생성자 함수 내부에서의 this

생성자 함수 내부의 this에는 생성자 함수가 생성할 인스턴스가 바인딩된다.

const Crew = function (name, age) {
  this.name = name;
  this.age = age;
}

const harry = new Crew('Harry', 23);

console.log(harry); //Crew { name: 'Harry', age: 23 }

그러하다.

---

화살표 함수 내부에서의 this

ES6부터 함수 내부에서 this가 전역객체를 가리키는 문제를 보완하고자, 화살표 함수가 추가되었다. 화살표 함수는 실행 컨텍스트를 생성할 때 this 바인딩 과정 자체가 빠지게 되어, 상위 스코프의 this를 그대로 활용할 수 있다. 아래에서 나올 call, apply, bind 등의 방법으로도 화살표 함수의 this를 오버라이딩할 수 없다.

즉, 화살표 함수 내부의 this는 무조건 상위 스코프의 this와 같다.

---

🏷️ 명시적 this 바인딩

call 메서드

Function.prototype.call(thisArg[, arg1[, arg2[, ...]]])

call 메서드는 메서드의 호출 주체인 함수를 즉시 실행하도록 하는 메서드이다. 이때 call 메서드의 첫 번째 인자를 this로 바인딩하고 이후의 인자들을 호출할 함수의 매개변수로 한다.

const func = function (a, b, c) {
  console.log(this, a, b, c); 
}

console.log(func(1, 2, 3)); // window{ ... } 1 2 3
console.log(func.call({ x: 1 }, 4, 5, 6}; // { x: 1} 4 5 6

---

apply 메서드

Function.prototype.apply(thisArg[, argsArray])

apply메서드는 call메서드와 기능적으로는 완전히 동일하다. 그러나 apply메서드는 두 번째 인자를 배열로 받아 그 배열의 요소들을 호출할 함수의 매개변수로 지정한다는 점에서만 차이가 있다.

const func = function (a, b, c) {
  console.log(this, a, b, c); 
}

console.log(func(1, 2, 3)); // window{ ... } 1 2 3
console.log(func.apply({ x: 1 }, [4, 5, 6]}; // { x: 1} 4 5 6

---

bind 메서드

Function.prototype.bind(thisArg[, arg1[, arg2[, ...]]])

bind 메서드는 ES5에 추가된 메서드로, call 메서드와 유사하긴 하지만, 함수를 즉시 호출하지 않고, 넘겨 받은 this 및 인수들을 바탕으로 새로운 함수를 반환하기만 하는 메서드이다.

특이한 점은 bind 메서드로 새로 만든 함수는 name 프로퍼티에 "bound"라는 접두어가 붙는다는 것이다. 이를 통해 call이나 apply보다 코드를 추적하기에 수월해진 면이 있다.

const func = function() {
  console.log(this); 
}

const bindFunc = func.bind({ x: 1 });

console.log(func); // window{ ... }
console.log(bindFunc); // { x: 1} 

console.log(func.name); // func
console.log(bindFunc.name); // bound func

---

🧐 정리

• 전역에서의 this -> 전역 객체

• 일반 함수 호출에서의 this -> 전역 객체

• 메서드 호출에서의 this -> 메서드를 호출한 주체

• 생성자 함수 호출에서의 this -> 생성자 함수가 생성할 인스턴스

• 화살표 함수 내부에서의 this -> 상위스코프의 this

• call/apply/bind 메서드에 의한 호출에서의 this
  -> apply/call/bind 메서드에 첫 번째 인수로 전달한 객체

---

📖 참고자료

• 코어 자바스크립트

  • 3. this (65p~93p)

• 모던 자바스크립트 Deep Dive

  • 22. this (342p~354p)

• YOU DON'T KNOW JS

  • 1. this라나 뭐라나 (29p~37p)
  • 2. this가 이런 거로군! (40p~64p)