하루 30분 모던 자바스크립트 딥 다이브. 생성자 함수에 의한 객체 생성

생성자 함수

1. 객체 리터럴에 의한 객체 생성 방식의 문제점
   1. 동일한 프로퍼티를 갖는 객체를 여러 개 생성해야 하는 경우 같은 프로퍼티를 기술해야 하기 때문에 비효율적이다.
2. 생성자 함수에 의한 객체 생성 방식의 장점
   1. 객체(인스턴스)를 생성하기 위한 템플릿(클래스)처럼 생성자 함수를 사용하여 프로퍼티 구조가 동일한 객체 여러 개를 간편하게 생성할 수 있다.

   function Circle(radius){
   	this.radius = radius;
   	this.getDiameter = function () {
   		return this.radius*2;
   	}
   }
   const circle1 = new Cicle(5);
   cosnt circle2 = new Circle(10)
   

3. 생성자 함수의 인스턴스 생성 과정
   1. 인스턴스 생성과 this 바인딩
   2. 암묵적으로 빈 객체를 생성, 빈 객체를 this에 바인딩 한다.
   3. 인스턴스 초기화 (프로퍼티 생성 및 재할당)
   4. 생성자 함수에 기술되어 있는 코드가 한 줄씩 실행되어 this에 바인딩되어 있는 인스턴스를 초기화 한다
   5. 인스턴스 반환만약 this가 아닌 다른 객체를 명시적으로 반환 한다면 명시한 객체가 반환된다. 객체가 아닌 원시 값을 반환하면 무시하고 this를 반환한다.
   6. this가 암묵적으로 반환된다

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

1. 함수는 객체이므로 일반 객체와 동일하게 동작
2. 일반 객체와 차이점은 함수 객체를 위한 내부 슬롯 [[Environment]], [[FormalParameters]], 내부메서드 [[Call]], [[Construct]]를 추가로 가지고 있다.
3. 일반 함수로 호출되면 [[Call]], 생성자 함수로 호출되면 [[Construct]]가 호출된다.
4. 모든 함수는 [[Call]]을 갖는 Callable이지만, 모든 함수가 [[Construct]]를 가진 Constructor객체는 아니다.
5. Constructor와 non-Constructor의 구분
   1. constructor : 함수 선언문, 함수 표현식, 클래스(클래스도 함수)
   2. non-constructor : 메서드(ES6 메서드 축약 표현), 화살표 함수

   const baz = {
   	x : function () {}	
   }
   //프로퍼티 x는 constructor.
   const baz = {
   	x () {}	
   }
   //메서드 x는 non-constructor
   

new 연산자

1. new 연산자는 Constructor 함수이어야 한다.
2. new.target
   1. 생성자 함수가 new 연산자 없이 호출되는 것을 방지하기 위해 파스칼 케이스 컨벤션으로 명명하여 일반 함수와 구분할 수 있게 노력해야 한다.
   2. new.target은 생성자 함수로서 호출되면 함수 자신을 가리키고, 일반함수로 호출되면 undefined를 값으로 가진다.

   // Scope-Safe Constructor Pattern 스코프 세이프 생성자 패턴
   function Circle (radius){
   	if(!(this instanceof Circle)){
   		return new Circle(radius)
   	}
   	this.radius = radius;
   	this.getDiameter = function () {
   		return this.radius*2;
   	}
   }
   //new 연산자 없이도 생성자 함수로서 호출된다.