모던 자바스크립트 Deep Dive - 17장 생성자 함수에 의한 객체 생성

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

17.1 Object 생성자 함수

• new 연산자와 함께 Object 생성자 함수를 호출하면 빈 객체 생성 후 반환
  -> 이후 프로퍼티 / 메서드를 추가하여 객체 완성
  => 객체 생성은 객체 리터럴 방법을 이용하는 게 더 간편함

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

• 인스턴스: 생성자 함수에 의해 생성된 객체

• 자바스크립트는 Object, String, Number, Boolean, Function, Array, Date, RegExp, Promise 등의 빌트인 생성자 함수 제공

17.2 생성자 함수

• 객체는 프로퍼티를 통해 객체 고유의 상태 표현, 메서드를 통해 상태 데이터인 프로퍼티를 참조하고 조작하는 동작 표현함
  -> 객체마다 프로퍼티 값은 다르지만 메서드는 내용이 동일한 경우 많음

• 객체 리터럴 방식은 하나의 객체만 생성 가능
  -> 프로퍼티 구조가 동일해도 매번 같은 프로퍼티와 메서드를 기술해야해서 비효율적

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

• 생성자 함수를 사용해 프로퍼티 구조가 동일한 객쳬 여러 개를 간편하게 생성 가능
• 생성자 함수 => 정해진 형식 없이 일반 함수와 동일한 방법으로 생성자 함수를 정의, new 연산자와 함께 호출하면 됨 (new 연산자 없으면 일반 함수로 동작)

this : 객체 자신의 프로퍼티나 메서드를 참조하기 위한 자기 참조 변수, this 바인딩은 함수 호출 방식에 따라 동적으로 결정됨

function Circle(radius) { 
	this.radius = radius; 
	this.getDiameter = function () { 
	return 2 * this.radius; 
} 
  
const circle1 = new Circle(5); // 반지름이 5인 Circle 객체 생성
console.log(circlel.getDiameterO); // 10

// 일반 함수로 호출됨
const circle2 = Circle(15); 
consote.log(circle2); // undefined 
// 일반 함수로서 호출된 circle 내의 this는 전역 객체를 가리킴
console.log(radius); // 15 

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

• 생성자 함수의 역할: 인스턴스를 생성(=>필수), 생성된 인스턴스를 초기화(인스턴스 프로퍼티 추가 및 초기값 할당, 옵션)
• 자바스크립트 엔진은 암묵적인 처리를 통해 인스턴스를 생성하고 반환
  => 아래 과정을 통함

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

• 암묵적으로 빈 객체가 생성됨 => 인스턴스
• 인스턴스는 this에 바인딩됨

2. 인스턴스 초기화

• 생성자 함수에 기술되어 있는 코드가 한 줄씩 실행되어 this에 바인딩되어 있는 인스턴스를 초기화
  => this에 바인딩되어 있는 인스턴스에 프로퍼티나 메서드를 추가, 생성자 함수가 인수로 전달받은 초기값을 인스턴스 프로퍼티에 할당하여 초기화하거나 고정값을 할당함

3. 인스턴스 반환

• 생성자 함수 내부의 모든 처리가 끝나면 완성된 인스턴스가 바인딩된 this가 암묵적으로 반환됨
• this가 아닌 다른 객체를 명시적으로 반환하면, return 문에 명시한 객체가 반환됨
• 명시적으로 원시 값을 반환하면, 원시 값 반환은 무시되고 암묵적으로 this가 반환됨
• 따라서 생성자 함수 내부에서 return 문을 반드시 생략해야함

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

• 함수 선언문 / 함수 표현식으로 정의한 함수는 일반적인 함수로서 호출 가능, 생성자 함수로서도 호출 가능(new 연산자와 함께 객체 생성)
• 함수는 객체 -> 일반 객체가 가지고 있는 내부 슬롯, 내부 메서드 모두 가짐
  => 하지만 일반 객쳬는 호출할 수 없지만 함수는 호출할 수 있음
  -> 함수로서 동작하기 위해 함수 객체만을 위한 [[Environment]], [[FormalParameters]] 등의 내부 슬롯과 [[Call]], [[Construct]] 같은 내부메서드를 추가로 가짐
• callable: 내부 메서드 〔[Call]］을 갖는 함수 객체
• constructor : [[constructor]] 내부 메서드를 갖는 함수 객체 -> 모든 함수가 갖지는 않음(모든 함수가 생성자 함수는 아님)

17.2.5 constructor와 non-constructor의 구분

• 자바스크립트 엔진은 함수 정의를 평가하여 함수 객체를 생성할 때 함수 정의 방식에 따라 구분함
• constructor : 함수 선언문, 함수 표현식, 클래스
• non-constructor : 메서드(ES6 메서드 축약 표현), 화살표 함수

17.2.6 new 연산자

• new 연산자와 함께 함수를 호출하면 해당 함수는 생성자 함수로 동작함
  -> 함수 객체의 내부 메서드 [[Call]]이 아닌 [[Construct]]가 호출됨
  -> 함수는 constructor이어야 함

=> 형식적 차이 없으니 생성자 함수는 일반적으로 첫 문자를 대문자로 기술하는 파스칼 케이스로 명명해 구분함

17.2.7 new.target

• 생성자 함수가 new 연산자 없이 호출되는 것을 방지하기 위해 사용(ES6에서 지원)

• new. target은 this와 유사하게 constructor인 모든 함수 내부에서 암묵적인 지역 변수와 같이 사용됨 (=> 메타 프로퍼티라고 부름)

• new 연산자와 함께 생성자 함수로 호출되면 new.target은 함수 자신을 가리킴
  -> new 연산자 없이 일반 함수로서 호출된 함수 내부의 new.target은 undefined

• 대부분의 빌트인 생성자 함수(Object, String, Number, Boolean, Function, Array, Date, RegExp, Promise 등)는 new 연산자와 함께 호출되었는지를 확인한 후 적절한 값을 반환함

• String, Number, Boolean 생성자 함수는 new 연산자와 함께 호출했을 때 String, Number, Boolean 객체를 생성하여 반환 / 없이 호출하면 문자열, 숫자, 불리언 값을 반환 (=> 데이터 타입을 변환)

let obj1 = new Object(); 
console.log(obj1); // {} 
obj2 = Object(); 
console.log(obj2); // {] 

const str = String(123); 
console.log(str, typeof str); /// 123 string 

const num = Number('123'); 
console.log(num, typeof num); // 123 number