[JavaScript] 생성자 함수에 의한 객체 생성

객체 리터럴에 의한 객체 생성방식은 가장 일반적으고 간단한 객체 생성 방식입니다. 하지만, 이외에도 다양한 방법으로 객체를 생성할 수 있고 각각의 장단점이 존재합니다.

 

** 객체 리터럴에 의한 객체 생성 방식에 대한 자세한 내용은 아래를 참고하세요.

https://j-su2.tistory.com/56?category=1037205 

[JavaScript] 객체 리터럴

 

---

Object 생성자 함수

new 연산자와 함께 Object 생성자 함수를 호출하면 빈 객체를 생성하여 반환합니다. 이후 프로퍼티 또는 메서드를 추가하여 객체를 완성할 수 있습니다. 하지만, Object 생성자 함수를 사용해 객체를 생성하는 방식은 특별한 이유가 없으면 그다지 유용하지 않습니다.

• 생성자 함수 : new 연산자와 함께 호출하여 객체(인스턴스)를 생성하는 함수
• 인스턴스 : 생성자 함수에 의해 생성된 객체

const person = new Object();

person.name = 'Lee';
person.sayHello = function () {
    console.log('Hi! My name is ' + this.name);
};

console.log(person); {name: "Lee", sayHello: f}
person.sayHello(); // Hi! My name is Lee

자바스크립트는 Object 생성자 이외에도 String, Number, Boolean, Function, Array, Date, RegExp, Promise 등의 빌트인 생성자 함수를 제공합니다.

 

---

생성자 함수

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

간단하지만 단 하나의 객체만을 생성하기 때문에 동일한 프로퍼티를 갖는 객체를 여러 개 생성하는 경우 비효율적입니다.

 

생성자 함수에 의한 객체 생성 방식의 장점

생성자 함수에 의한 객체 생성 방식은 마치 객체(인스턴스)를 생성하기 위한 템플릿(클래스)처럼 생성자 함수를 사용하여 프로퍼티 구조가 동일한 객체 여러개를 간편하게 생성할 수 있습니다.

 

생성자 함수는 이름 그래도 객체(인스턴스)를 생성하는 함수입니다. 자바스크립트는 형식이 정해져 있지 않아서 일반 함수와 동일한 방법으로 생성자 함수를 정의하고 new 연산자와 함께 호출하면 해당 함수는 생성자 함수로 동작하게 됩니다.

// 생성자 함수
function Circle(radius) {
    this.radius = redius;
    this.getDiameter = function () {
        return 2 * this.radius;
    };
}

// 인스턴스 생성
const circle1 = new Circle(5);
const circle2 = new Circle(10);

console.log(circle1.getDiameter()); // 10
console.log(circle2.getDiameter()); // 20

// new 연산자가 없어서 일반 함수로서 호출됨
const circle3 = Circle(15);

// 일반 함수로서 호출되어 반환문이 없음
console.log(circle3); // undefined

// this는 전역 개체를 가리킴
console.log(radius); // 15

 

 

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

생성자 함수의 역할은 인스턴스를 생성(필수)하고 생성된 인스턴스를 초기화(옵션)하는 것입니다.

1. 인스턴스 생성과 this *바인딩 : 암묵적으로 빈 객체가 생성되고 this에 바인딩됨. 런타임 이전에 실행.
2. 인스턴스 초기화 : 생성자 함수의 코드가 한 줄씩 실행되어 this에 바인딩되어 있는 인스턴스를 초기화. 개발자가 기술.
3. 인스턴스 반환 : 생성자 함수 내부의 모든 처리가 끝난 후 완성된 인스턴스가 바인딩된 this가 암묵적으로 반환됨

*바인딩 : 식별자와 값을 연결하는 과정

 

내부 메서드 [[Call]]과 [[Construct]]

함수는 객체이기 때문에 일반 객체가 가지고 있는 내부 슬롯과 내부 메서드를 모두 가지고 있고, [[Environment]], [[FormalParameters]] 등의 내부 슬롯과 [[Call]], [[Construct]] 같은 내부 메서드를 추가로 가지고 있습니다.

• 일반 함수로서 호출되면 함수 객체의 내부 메서드 [[Call]]이 호출
• new 연산자와 함께 생성자 함수로서 호출되면 내부 메서드 [[Construct]]가 호출
• callable 객체 :  [[Call]]을 갖는 함수 객체로 호출 가능한 함수
• constructor 객체 :  [[Construct]]을 갖는 함수 객체로 생성자로 호출 가능한 함수
• non-constructor 객체 :  [[Construct]]을 갖지 않는 함수 객체로 생성자로 호출 불가능한 함수

모든 함수는 callable 해서 호출할 수 있지만, 모든 함수 객체가 constructor한것은 아닙니다.

 

constructor와 non-constructor의 구분

자바스크립트 엔진은 함수 정의를 평가하여 함수 객체를 생성할 때 함수 정의 방식에 따라 함수를 constructor와 non-constructor로 구분합니다.

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

new 연산자

일반 함수와 생성자 함수에는 특별한 형식적 차이 없이 오로지 new 연산자와 함께 호출되었냐에 따라 구분됩니다. 따라서 생성자 함수는 일반적으로 첫 문자를 대문자로 기술하는 파스칼 케이스로 명명하여 일반 함수와 구별하도록 합니다.

 

new.target

new.target은 new 연산자 없이 생성자 함수가 호출되는 것을 방지하기 위해 ES6에서 추가된 것으로, this와 유사하게 constructor인 모든 함수 내부에서 암묵적인 지역 변수와 같이 사용되며 메타 프로퍼티라고도 부릅니다.

(IE는 지원X -> 스코프 세이프 생성자 패턴 사용)

• new 연산자와 함께 생성자 함수로서 호출 : 함수 내부의 new.target은 함수 자신을 가르킴
• new 연산자 없이 일반 함수로서 호출 : 함수 내부의 new.target은 undefined

따라서 함수 내부에서 new.target을 사용하여 new 연산자와 생성자 함수로서 호출했는지 확인하여 그렇지 않은 경우 new 연산자와 함께 재귀 호출을 통해 생성자 함수로서 호출할 수 있습니다.

// 생성자 함수
function Circle(radius) {
    // new 연산자와 함께 호출되지 않았으면 undefined
    if(!new.target) {
        // new 연산자와 함께 생성자 함수를 재귀 호출하여 생성된 인스턴스를 반환
        return new Circle(radius);
    }
    this.radius = radius;
    this.getDiameter = function () {
    	return 2 * this.radius;
    };
}

// new 연산자 없이 호출해도 new.target을 통해 생성자 함수로 호출
const circle = Circle(5);
console.log(circle.getDiamater()); // 10

 

 

 

 

[출처] 모던 자바스크립트 Deep Dive

https://wikibook.co.kr/mjs/

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