this, 프로토타입, 클래스를 공부하면서 new 연산자와 생성자 함수 동작 방식이 궁금해졌다. 구글링 결과 모던 자바스크립트 튜토리얼 사이트에서 new 연산자와 생성자 함수에 대한 내용을 찾을 수 있었다. new 연산자와 생성자 함수에 대한 내용을 정리한다.

new 연산자와 생성자 함수

new 연산자와 함께 생성자 함수를 호출하면 아래 알고리즘이 동작한다.

1. 빈 객체를 만들고 this에 할당한다.
   • 생성자 함수의 prototype 프로퍼티를 참조하는 __proto__ 프로퍼티를 갖는 객체를 this에 할당한다.
2. 함수 본문을 실행하여 this에 프로퍼티를 추가한다.
3. this를 반환한다.

function User(name) {
	this.name = name;
  	this.isAdmin = false;
}
let user = new User('cabbage');

이 코드를 실행하면 아래와 같이 동작한다는 것이다.

function User(name) {
    // (빈 객체가 암시적으로 만들어짐, 이 객체의 __proto__ 프로퍼티는 생성자 함수 User의 prototype 프로퍼티를 참조함)
	// this = {};
	
	// 새로운 프로퍼티를 this에 추가함
	this.name = name;
	this.isAdmin = false;

	// return this; (this가 암시적으로 반환됨)
}

생성자 함수의 목적

생성자 함수의 목적은 재사용할 수 있는 객체 생성 코드를 구현하기 위함이다.

생성자 함수에 전달하는 아규먼트에 따라 객체 리터럴 문법으로 일일이 객체를 직접 만드는 것보다 훨씬 손쉽고 간단하게 객체를 생성할 수 있다.

생성자 함수를 정의하면 재사용할 수 있는 객체 생성 코드를 사용해 쉽게 객체를 생성할 수 있다.

정리

지금까지 공부한 this, 프로토타입 개념을 통해 new 연산자와 생성자 함수의 동작 방식을 다음과 같이 정리했다.

1. new 연산자와 함께 생성자 함수를 호출한다.
2. 생성자 함수의 prototype 프로퍼티를 참조하는 __proto__라는 프로퍼티를 갖는 빈 객체를 this에 할당한다.
3. 생성자 함수의 본문 내용을 토대로 this가 참조하는 객체에 프로퍼티를 추가한다.
4. this를 리턴한다.

function User(name) {
    // (빈 객체가 암시적으로 만들어짐, 이 객체의 __proto__ 프로퍼티는 생성자 함수 User의 prototype 프로퍼티를 참조함)
    // this = {};
	
	// 새로운 프로퍼티를 this에 추가함
	this.name = name;
	this.isAdmin = false;

	// return this; (this가 암시적으로 반환됨)
};

let user = new User('cabbage');
user.method = function () {
    console.log(this);
};

user.method();
/*
User {
  name: 'cabbage',
  isAdmin: false,
  method: ƒ (),
  __proto__: { constructor: ƒ User() }
} (=== user)
*/

new 연산자와 함께 생성자 함수를 호출하면 인스턴스가 생성된다. 위 알고리즘을 보면 생성자 함수에서는 this를 리턴한다. 결국 생성자 함수가 리턴하는 this가 인스턴스를 참조하는 것이다.

user와 this를 비교해서 출력하는 메서드 isThisAndUserSame 메서드를 작성해서 호출해봤는데 출력 결과가 true인 것을 확인할 수 있었다.

...

user.isThisAndUserSame = function () {
    console.log(this === user);
};

user.isThisAndUserSame();  // true

참고

• new 연산자와 생성자 함수