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

객체 리터럴 vs 생성자 함수에 의한 객체 생성

• Object 생성자 함수

  --> new 연산자와 함께 Object 생성자 함수를 호출하면 빈 객체 생성하여 반환

  // 빈 객체 생성
  const person = new Object();
  // 프로퍼티 추가
  person.name = 'Lee';
  person.sayHello = function() {
     console.log('Hi! My name is ' + this.name);
  };

  * 생성자 함수: new 연산자와 함께 호출하여 객체(인스턴스) 를 생성하는 함수
  --> 생성자 함수에 의해 생성된 객체: 인스턴스
  * 빌트인 생성자 함수: String, Number, Boolean, Function, Array, Date, RegExp, Promise

• 생성자 함수

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

  --> 단 하나의 객체만을 생성할 수 있다. -> 비효율적

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

  --> 프로퍼티 구조가 동일한 객체 여러 개를 간편하게 생성 가능

  // 생성자 함수
  function Circle(radius) {
     this.radius = radius;
     this.getDiameter = function () {
         return 2 * this.radius;
     };
  };
  // 인스턴스 생성
  const circle1 = new Circle(5);
  const circle2 = new Circle(10);

  자바스크립트의 생성자 함수는 형식이 정해져 있지 않고, 일반 함수와 동일한 방법으로 정의 + new 연산자와 함께 호출하면 해당 함수는 생성자 함수로 동작

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

  --> 생성자 함수는 인스턴스를 생성하는 클래스 역할

  1) 인스턴스 생성과 this 바인딩
  -> 암묵적으로 빈 객체 생성, 인스턴스는 this에 바인딩 (런타임 이전)

  function Circle(radius) {
     // 암묵적으로 빈 인스턴스 생성, this 바인딩
     console.log(this); // Circle {}
     this.radius = radius;
     this.getDiameter = function () {
         return 2 * this.radius;
     };
  }

  2) 인스턴스 초기화
  -> this에 바인딩되어 있는 인스턴스에 프로퍼티나 메서드 추가하고 생성자 함수가 인수로 전달받은 초기값을 인스턴스 프로퍼티에 할당하여 초기화하거나 고정값을 할당

  function Circle(radius) {
     // 1. 암묵적으로 인스턴스 생성, this  바인딩
     // 2. this에 바인딩되어 있는 인스턴스 초기화
     this.radius = radius;
     this.getDiameter = function () {
         return 2 * this.radius;
     };
  }

  3) 인스턴스 반환
  -> 완성된 인스턴스가 바인딩된 this가 암묵적으로 반환

  const circle = new Circle(1);
  console.log(circle); // Circle {radius: 1, getDiameter: f}

  생성자 함수 내부에서는 반드시 return 문을 생략한다!! -> 훼손 가능성 있음

  4) 내부 메서드 [[Call]], [[Construct]]
  --> 함수 선언문, 함수 표현식으로 정의한 함수는 일반적인 함수로서 호출할 수 있는 것은 물론 생성자 함수로서 호출할 수 있다.
  [[call]]: 일반적인 함수로서 호출
  [[Construct]]: 생성자 함수로서 호출
  모든 함수 객체는 callable하나, consturctor 인 경우도, non-constructor 인 경우도 존재한다.

  5) consturctor vs non-constructor
  constructor --> 함수 선언문, 함수 표현식, 클래스
  non-constructor --> 메서드, 화살표 함수
  * non-constructor에서의 메서드는 ES6 메서드 축약 표현만 인정한다.

  6) new 연산자
  --> 일반 함수와 생성자 함수에 형식적 차이는 없음, 단지 new 연산자와 함께 함수를 호출하면 생성자 함수로 동작
  * 함수를 생성자 함수로서 호출하면 함수 내부의 this는 생성자 함수가 생설할 인스턴스를 가리킴
  * 함수를 일반 함수로서 호출하면 함수 내부의 this는 전역 객체 window를 가리킴

  7) new.target
  --> 생성자 함수가 new 연산자 없이 호출되는 것을 방지
  생성자 함수의 new.target = 함수 자신
  일반 함수의 new.target = undefined

  Object, Function 생성자 함수는 new 연산자 없이 호출해도 new 연산자와 함께 호출했을 때와 동일하게 동작!!
String, Number, Boolean 생성자 함수는 new 연산자 없이 호출하면 값의 타입을 해당 타입으로 변환!!