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

생성자 함수

 자바스크립트는 new 연산자와 함께 사용하는 여러 빌트인 생성자 함수를 제공한다.

new String('Hello');
new Number(123);
new Boolean(true);
new Function('x', 'return x * x');
new Array(1 ,2, 3);
new RegExp(/ab+c/i);
new Date();

 

객체 리터럴 방식으로 이용하면 되는데 왜 생성자를 제공할까?

 

 

생성자의 장점

 동일한 프로퍼티를 갖는 객체를 여러 개 생성해야 하는 경우, 리터럴보다 효율적이다. 객체(인스턴스)를 생성하기 위한 템플릿처럼 생성자 함수를 사용하여 동일 프로퍼티 구조의 객체를 여러개만들 때 간편하다. 

// 방법 1) 리터럴 방식
const  circle1 = {
    radius: 5,
    getDiameter() {
          return 2 * this.radius;
     }
}
const  circle2 = {
    radius: 10,
    getDiameter() {
          return 2 * this.radius;
     }
}
console.log(circle1.getDiameter()); // 10
console.log(circle1.getDiameter()); // 20



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

const circle3 = new Circle(5);
const circle4 = new Circle(10);

console.log(circle3.getDiameter()); // 10
console.log(circle4.getDiameter()); // 20

 

참고) this는 함수 호출 방식에 따라 동적으로 결정된다.

- 일반 함수로서 호출 : 전역 객체
- 메서드로서 호출 : 메서드 호출한 객체
- 생성자 함수로서의 호출 : 생성자 함수가 (미래에) 생성할 인스턴스

 

 

 

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

 생성자 함수는 인스턴스를 생성하고 생성된 인스턴스를 초기화한다. 생성자 함수는 일반적으로 파크살 케이스로 명명하여 일반 함수와 구별할 수 있도록 한다.

 

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

암묵적으로 빈 객체가 생성되며, 이 빈 객체를 인스턴스라고 하며 this에 바인딩된다. 이 처리는 함수 몸체의 코드가 한 줄 씩 실행되는 런타임 이전에 실행된다.

2) 인스턴스 초기화

개발자가 기술한다.

3) 인스턴스 반환

생성자 함수 내부의 모든 처리가 끝나면 완성된 인스턴스가 바인딩된 this를 암묵적으로 반환한다.

만약 명시적으로 원시 값을 반환시켜도 무시하고 this를 반환한다.

 

 

new.target

❗ IE는 new.target을 지원하지 않는다.

 

 생성자 함수로 호출되면 함수 내부의 new.target는 함수 자신을, 일반함수로 호출되면 undefined를 가르킨다.

new 연산자 없이 일반함수로 호출할 경우 this는 전역 객체 window를 가리킨다.

function Circle(radius) {
    if(!new.target) { // 생성자와 함께 호출되지 않았다면 new.target은 undefined이다.
         return new Circle(radius); // 생성자 함수를 재귀 호출하여 생성된 인스턴스를 반환한다.
    }    
    this.radius = radius;    
    this.getDiameter = function () {
         return 2 * this.radius;
    }
}