생성자 함수에 의한 객체 생성, 일반함수와 생성자 함수

1. Object 생성자 함수란?

new 연산자와 Object 생성자 함수로 객체를 생성할 수 있는데 Object 생성자 함수를 이용하면 빈 객체를 리턴한다.

const info = new Object(); // 빈 객체의 생성

info.name = 'Lia';
info.sayHello = function() {
	console.log(`Hi! My name is ${this.name}`);
};
console.log(info); // {name: "Lia", sayHello: f}
info.sayHello(); // Hi! My name is Lia

 

2. 생성자 함수란?

new 연산자와 함께 호출되어 객체(인스턴스)를 생성하는 함수로 일반 함수와 같은 방법으로 정의하고 new 연산자와 함께 호출한다. 생성자 함수에 의한 객체 생성 방식은 프로퍼티 구조가 동일한 여러개의 객체를 간편하게 생성할 수 있으며, 객체 리터럴에 의한 객체 생성 방식의 비효율적인 부분(동일한 프로퍼티를 갖는 객체를 여러개 생성해야하는 경우, 매번 같은 프로퍼티를 작성해야한다는 것)을 해결했다.

 

 

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

(1) 인스턴스 생성과 this 바인딩

• 암묵적으로 빈 객체 생성 + this 바인딩
• 런타임 이전에 실행

(2) 인스턴스 초기화

• this에 바인딩 되어있는 인스턴스 초기화, 프로퍼티 or 메서드 추가 등

(3) 인스턴스 반환

• 완성된 인스턴스가 바인딩된 this가 암묵적으로 반환됨. 이 때, 생성자 함수 내부에서는 return문을 반드시 생략해야함.

 

 

4. 생성자 함수 호출 메서드

생성자 함수 호출 내부 메서드에는 [[Call]]과 [[Construct]]가 있는데 함수가 일반 함수로서 호출되면 [[Call]]이 호출되고, new 연산자와 함께 생성자 함수로서 호출되면 [[Construct]] 가 호출된다.

 

모든 함수 객체는 호출할 수 있지만, 모든 함수 객체를 생성자 함수로서 호출할 수 있는 것은 아니며 함수 정의 방식에 따라 아래 두가지로 구분할 수 있다.

function hello() {}

// 일반적인 함수로서 호출
hello();

// 생성자 함수로서 호출
new hello();

 

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