[240319] 17장 생성자 함수에 의한 객체 생성

1. 다양한 객체 생성 방식 중에서 생성자 함수를 사용하여 객체를 생성하는 방식을 살펴 볼 예정
2. 객체 리터럴을 사용하여 객체를 생성하는 방식과 생성자 함수를 사용하여 객체를 생성하는 방식과의 장단점

Object 생성자 함수

• new 연산자와 함께 Object 생성자 함수를 호출하면 빈 객체를 생성하여 반환
• 빈 객체를 생성한 이후 프로퍼티 또는 메서드를 추가하여 객체를 완성할 수 있다.
• 생성자 함수란 ?
  • new 연산자와 함께 호출하여 객체(인스턴스)를 생성하는 함수를 말함
  • 생성자 함수에 의해 생성된 객체를 인스턴스
  • Object 생성자 외에도 String, Number, Boolean, Function, Array, Date, RegExp, Promise 등 빌트인 생성자 함수를 제공함

const person = new Object();
person.name = 'Lee';

생성자 함수

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

• 직관적이고 간편하지만, 객체 리터럴에 의한 객체 생성 방식은 단 하나의 객체만 생성함
• 동일한 프로퍼티를 갖는 객체를 여러 개 생성해야하는 경우 매번 같은 프로퍼티를 기술해야해서 비효율적임

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

• 생성자 함수에 의한 객체 생성 방식은 마치 템플릿(클래스)처럼 생성자 함수를 사용하여 프로퍼티 구조가 동일한 객체 여러 개를 간편하게 생성할 수 있다.
• 일반 함수와 동일한 방법으로 생성자 함수를 정의하고 new 연산자와 함께 호출하면 해당 함수는 생성자 함수로 동작한다.
  • new 연산자가 없으면 일반 함수로 동작

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

const circle1 = new Circle(5);
const circle2 = new Circle(10);

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

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

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

• new 연산자와 함께 생성자 함수를 호출 → 자바스크립트 엔진은 **암묵적인 처리를 통해 인스턴스를 생성하고 반환

예시)

1. 인스턴스 생성과 this 바인딩
   • 암묵적으로 빈 객체 생성 (생성자 함수가 생성한 인스턴스)
   • 암묵적으로 생성된 빈 객체는 this에 바인딩
   • 이 처리는 몸체의 코드가 한 줄씩 실행 이전에 실행

1. 인스턴스 초기화
   • 생성자 함수에 기술되어 있는 코드가 한줄 씩 실행
2. 인스턴스 반환
   • 생성자 함수 내부에서 모든 처리가 끝나면 완성된 인스턴스가 바인딩된 this 를 암묵적으로 반환함
   • 만약 this 가 아닌 다른 객체를 명시적으로 반환하면 this가 반환되지 못하고 return 문에 명시한 객체가 반환된다.
     • 단, 원시 값 반환은 무시되고 암묵적으로 this 반환

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

• 함수 선언문 또는 함수 표현식으로 정의한 함수는 일반적인 함수로서 호출할 수 있는 것은 물론 생성자 함수로서 호출 가능
• 함수는 객체이므로 일반 객체와 동일하게 동작 가능 → 함수 객체는 일반 객체가 가지고 있는 내부 슬록과 내부 메서드를 모두 가지고 있기 때문.
• 일반 객체는 호출할 수 없음, 함수는 호출 가능
• 따라서 함수 객체는 아래와 같은 내부 메서드를 갖고 있음
  • [[Environment]]
  • [[FormalParameters]]
  • [[Call]] (일반 함수로서 호출되면)
    • callable
    • 호출할 수 있냐
  • [[Construct]] (new 연산자와 함께 호출되면)
    • 위 내부 메서드를 갖고 있으면 constructor
    • 갖고 있지 않으면 non-constructor
    • 객체를 생성자 함수로서 호출할 수 있냐 없냐

constructor 와 non-constructor 의 구분

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

// 일반 함수 정의: 함수 선언문, 함수 표현식
function foo () {} 
const bar = function () {}; 

// 프로퍼티 x의 값으로 할당된 것은 일반 함수로 정의된 함수다. 
// 이는 메서드로 인정하지 않는다.
const baz = {
	x: function () {} 
};

new foo(); // foo {}
new bar();  // bar {} 
new baz.x(); // x {} 

const arrow = () => {};
new arrow(); // TypeError : arrow is not a constructor

// 메서드 정의: ES6의 메서드 축약 표현만 메서드로 인정한다.
const obj = {
	x() {}
};

new obj.x(); // TypeError 

new 연산자

• new 연산자와 함께 호출하는 함수는 constructor 이어야한다.
• 일반 함수와 생성자 함수에 특별한 형식적 차이는 없기때문에 첫 문자를 대문자로 기술하는 파스칼 케이스로 명명하여 구별 할 수 있도록 노력한다.

new target

• new.target 은 this 와 유사하게 constructor 인 모든 함수 내부에서 암묵적인 지역 변수와 같이 사용되며 메타 프로퍼티라 부른다.
• new 연산자와 함께 호출되었는지 확인 가능
• new 함께 생성했으면 함수 자기 자신 가르킴
• 일반함수로서 호출이면 undefined

function Circle(radius) {
	if(!new.target) {
		return new Circle(radius);
	}
}

• new 연산자와 함께 생성자 함수에 의해 생성된 객체는 프로토타입에 의해 생성자 함수가 연결된다. (추후 19장에서 더 살펴볼 예정)
• 대부분 빌트인 생성자 함수는 new 연산자와 함께 호출되었는지 확인한 후 적절한 값을 반환한다.
  • ex) Object 와 Function 생성자 함수는 new 없이도 동일하게 동작
  • ex) String, Number, Boolean 은 new 연산자와 함께 호출하면 각각의 객체를 생성하여 반환하지만 new 연산자 없이 호출하면 문자열 숫자 불리언 값을 반환한다. 이를통해 데이터 변환하기도함

    const str = String(123);
    console.log(str, typeof str); // 123 string
      
    const num = Number('123');
    console.log(num, typeof num); // 123 number
      
    const bool = Boolean('true');
    console.log(bool, typeof bool) // true, boolean