생성자 함수에 의한 객체 생성

생성자 함수

생성자 함수

생성자 함수(constructor)란 new 연산자로 호출했을 때 인스턴스를 생성하는 함수를 말합니다.

객체 리터럴에 의한 객체 생성 방식의 문제점

객체 리터럴 방식으로 객체를 생성하는 방식은 간단하지만 동일한 구조의 프로퍼티를 반복해서 생성해야 할 때는 매번 같은 프로퍼티와 메서드를 기술해야 하기 때문에 상당히 불편합니다. 반면, 생성자 함수로 객체를 생성하면 클래스처럼 템플릿 역할을 하기 때문에 동일한 프로퍼티 구조를 갖는 객체를 간편하게 생성할 수 있습니다.

Object 생성자 함수

new 연산자와 함께 Object 생성자 함수를 호출하면 빈 객체를 생성하여 반환합니다.

const obj = new Object()

생성자 함수의 인스턴스 생성 과정

생성자 함수의 역할은 인스턴스를 생성하고 초기화하는 것입니다. new 연산자와 함께 생성자 함수를 호출하면, 자바스크립트는 아래와 같은 과정을 거쳐서 인스턴스를 반환합니다.

1. 인스턴스 생성과 this 바인딩

암묵적으로 빈 객체가 생성되고 this에 바인딩됩니다. 이 객체가 생성자 함수가 생성할 인스턴스이며, 이 과정은 함수 몸체의 코드가 실행되는 런타임 이전에 실행됩니다.

2. 인스턴스 초기화

this에 바인딩되어 있는 인스턴스에 프로퍼티나 메서드를 추가하고, 생성자 함수가 인수로 전달받은 값을 할당합니다.

3. 인스턴스 반환

생성자 함수 내부에서 모든 처리가 끝나면 완성된 인스턴스가 바인딩된 this를 암묵적으로 반환합니다. return을 명시하면 암묵적인 this 반환이 무시되므로, 생성자 함수 내부에서 return은 생략해야 합니다.

function Circle(radius) {
    // 1. 인스턴스 생성 및 this 바인딩
    // 2. 인스턴스 초기화
    this.radius = radius;
    this.getDiameter = function () {
        return 2 * this.radius;
    };
    // 3. 인스턴스 반환
}

함수의 내부 메서드

함수는 객체이므로 일반 객체가 가지고 있는 내부 슬롯과 내부 메서드를 가지고 있습니다. 그리고 함수는 일반 객체와 다르게 호출할 수 있으므로, 함수 객체만을 위한 내부 슬롯 [[Environment]], [[FormalParameters]] 등과 내부 메서드 [[Call]], [[Construct]] 를 추가로 가지고 있습니다. 함수가 일반 함수로 호출되면 내부 메서드 [[Call]]이 호출되고, new 연산자와 함께 생성자 함수로서 호출되면 [[Construct]]가 호출됩니다.

constructor/ non-constructor

내부 메서드 [[Call]]을 갖는 함수 객체를 callable이라 하며, 내부 메서드 [[Construct]]를 갖는지를 기준으로 constructor, non-constructor로 구분합니다.

호출할 수 없는 객체는 함수 객체가 아니므로 함수 객체는 반드시 callable이어야 합니다. 하지만 모든 함수 객체가 constructor인 것은 아닙니다. 함수 객체가 constructor인지는 함수 정의 방식에 따라 구분됩니다.

• constructor: 함수 선언문, 함수 표현식, 클래스(클래스도 함수)
• non-constructor: 메서드(ES6 메서드 축약 표현), 화살표 함수

참고자료

• 모던 자바스크립트 Deep Dive