생성자 함수에 의한 객체 생성 (모던 자바스크립트 Deep Dive)

 

• 객체 리터럴에 의한 방식이 아닌 생성자 함수로 객체를 생성해보자!

17.1 Object 생성자 함수

const person = new Object(); // 빈 객체 반환

• 필요한 프로퍼티나 함수를 추가해서 사용한다.
• 생성자 함수(new)를 활용해 생성한 객체를 객체 인스턴스라고 부른다.

 

17.2 생성자 함수

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

• 프로퍼티 구조가 동일하더라도 매번 같은 프로퍼티와 메서드를 가진 객체를 생성하는 코드를 기술해야한다.
• 객체 구조 재사용에 불편하다.

 

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

• 객체 인스턴스를 생성하기 때문에 같은 구조의 객체를 몇 개든지 생성할 수 있다.
• 붕어빵 틀을 만드는 것이다.
• new 연산자 없이 생성자 함수를 호출하면 일반 함수로 동작한다.
  • 일반 함수로 호출시 함수 내부의 this 는 전역 객체로 바인딩된다.

function Circle(radius) {
    this.radius = radius;
    this.getDiameter = function() {
        return 2 * this.radius;
    };
}

const circle1 = new Circle(5);
console.log(radius); // ReferenceError

const circle2 = Circle(10);
console.log(radius); // 10

 

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

• 인스턴스 생성
• 생성된 인스턴스 초기화

1. 인스턴스 생성과 this 바인딩
   • 인스턴스 생성과 동시에 함수 내부의 this에 바인딩된다.
2. 인스턴스 초기화
   • this에 바인딩된 인스턴스를 초기화하거나 프로퍼티/메서드를 추가하는 것은 개발자의 몫
   • 붕어빵을 구우시오
3. 인스턴스 반환
   • return 값이 따로 있지 않은 이상 this 가 반환된다.
     • return 값이 원시값이면 무시된다.

 

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

• 함수와 객체의 차이는 호출의 가능 여부다.
• 함수가 일반 함수로 호출되면 함수 객체 내부 메서드 [[Call]] 이 호출된다.
  • 이런 함수 객체를 callable 이라 한다.
  • callable이지만 non-constructor 인 함수는 있다. (= 일반함수)
  • callable 이 안된다면 함수 객체가 아니다.
• 생성자 함수로 호출되면 함수 객체 내부 메서드 [[Construct]]이 호출된다.
  • 이런 함수 객체를 constructor 이라 한다.

 

17.2.5 constructor와 non-constructor의 구분

• 자바스크립트 엔진은 이 두 가지를 함수 정의 방식에 따라 구분한다.
  • constructor : 함수 선언문, 함수 표현식, 클래스
  • non-constructor: 메서드(ES6 축약표현이 된), 화살표 함수
• 생성자 함수를 기대하지 않고 함수를 정의했지만 해당 함수가 constructor을 가지고 있다면 생성자 함수로 활용될 수 있다.

 

17.2.6 new 연산자

• constructor를 가진 함수는 모두 생성자 함수처럼 사용될 수 있기 때문에 함수 이름을 정의할 때, 구분을 두어야한다.
  • 생성자 함수는 파스칼케이스로 작성하자.

 

17.2.7 new.target

• 위의 상황처럼 파스칼 케이스로 생성자 함수 이름을 지정하지 않는다면, 실수는 발생할 것이다.
• ES6에서 지원하는 new.target 이 이 문제를 해결해줄 것이다.
• 이는 생성자 함수 내부의 this 와 유사하게 동작하며 new 연산자와 함께 함수가 활용되지 않으면 undefined 를 반환한다.
• String, Number, Boolean 는 new없이 호출하면 데이터 타입을 변환할 때 사용하기도 한다.