[240130] this

this란?

• this는 자신이 속한 객체, 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수이다. 

 

---

this가 왜 필요할까?

• 메서드는 자신이 속한 객체의 프로퍼티를 참조하고 변경할 수 있어야 한다. ➡️ 이를 위해 메서드는 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다.
• 생성자 함수 내부에서는 프로퍼티 또는 메서드를 추가하기 위해 자신이 생성할 인스턴스를 참조할 수 있어야 한다. 하지만 생성자 함수를 정의하는 시점은 인스턴스를 생성하기 이전이므로 생성자 함수가 생성할 인스턴스를 가리키는 식별자를 알 수 없다. ➡️ 이를 위해 자신이 생성할 인스턴스를 가리키는 특수한 식별자가 필요하다.

 

---

this는 언제 결정되는가

• this의 값은 런타임에 결정된다.
• 동일한 함수라도 다른 객체에서 호출했다면 this가 참조하는 값이 달라진다.
• 즉 this 바인딩은 동적으로 결정된다.

 

---

어디서 호출되었는지에 따라 달라지는 this의 값

호출 위치	this에 바인딩되는 값
전역 호출	✔️ 전역 객체 ✔️ 브라우저 환경 - window ✔️ Node.js 환경 - module.exports
일반 함수 호출	✔️ 전역 객체
메서드 호출	✔️ 메서드 소유 객체 X ✔️ 메서드 호출 객체 O
생성자 함수 호출	✔️ 생성자 함수가 생성할 인스턴스
call, apply 메서드에 의한 간접 호출	✔️ 함수를 호출하면서 첫 번째 인수로 전달한 특정 객체에 this 바인딩
bind 메서드에 의한 간접 호출	✔️ 함수 호출 X ✔️ 첫 번째 인수로 전달한 값으로 this 바인딩이 교체된 함수를 새롭게 생성해 반환
화살표 함수	✔️ 고유한 this를 가지지 않음 ✔️ 스코프 체인을 통해 상위 스코프의 this 참조

❗️전역 객체란?
✔️ 모든 객체의 최상위 객체. 모든 객체는 이 전역 객체의 프로퍼티이다.
✔️ 브라우저 환경 - window
✔️ Node.js 환경 - global

아래 예시는 Node.js 환경에서 실행했습니다.

 

전역 호출

console.log(this === global); // false

• 전역호출 할 때는 this가 전역 객체라면서 왜 false일까?!

console.log(this === module.exports); // true
console.log(this === exports); // true

• 알고보니 브라우저에서만 전역 객체였고, Node.js에서는 module.exports 또는 exports라고 한다.

일반 함수 호출 ⏩️ 전역 객체가 this

function hello1(name) {
  console.log(this === global);
}

hello1('Ham'); // true
hello1('Jam'); // true

메서드 호출 ⏩️ 메서드를 호출한 객체가 this

function sayHello() {
  console.log(this);
}
const hello2 = {
  name: 'Ham',
  sayHello,
};
const hello3 = {
  name: 'Jam',
  sayHello,
};

hello2.sayHello(); // { name: 'Ham', sayHello: [Function: sayHello] }
hello3.sayHello(); // { name: 'Jam', sayHello: [Function: sayHello] }

생성자 함수 호출 ⏩️ 생성자 함수가 만든 인스턴스가 this

function Hello4(name) {
  this.name = name;
}
Hello4.prototype.sayHello = function () {
  console.log(this);
};

const hello4_1 = new Hello4('Ham');
const hello4_2 = new Hello4('Jam');
hello4_1.sayHello(); // Hello4 { name: 'Ham' }
hello4_2.sayHello(); // Hello4 { name: 'Jam' }

화살표 함수 호출 ⏩️ 상위 스코프의 this

const hello5 = () => {
  console.log(this === module.exports);
};

hello5(); // true

 

---

참고자료

모던 자바스크립트 Deep Dive: 자바스크립트의 기본 개념과 동작 원리