[JS] 모던 자바스크립트 - 12. 생성자 함수

생성자 함수

---

- new 연산자와 함께 호출하여 객체(인스턴스)를 생성하는 함수

- 하나의 객체만을 생성하는 객체 리터럴 방식과 달리 생성자 함수는 동일한 프로퍼티 구조를 갖는 객체를 여러 개 생성 가능

- 일반 함수와 동일한 방법으로 함수를 정의하고 호출 시 new 연산자와 함께 호출하면 생성자 함수로 동작

- 생성자 함수는 일반적으로 파스칼 케이스로 명명

- new 연산자와 함께 호출하지 않으면 일반 함수로 동작

- 생성자 함수 내부의 this는 생성자 함수가 생성할 인스턴스를 가리킴

 

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

---

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

- 런타임 이전에 실행

- 암묵적으로 빈 객체 생성 → 완성되진 않았지만 생성자 함수의 인스턴스

- 인스턴스는 this에 바인딩

 

2. 인스턴스 초기화

- this에 바인딩되어 있는 인스턴스에 프로퍼티나 메서드 추가 

- 생성자 함수가 인수로 전달받은 초기값을 인스턴스 프로퍼티에 할당하여 초기화

 

3. 인스턴스 반환

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

- return 문은 반드시 생략해야 함 (생성자 함수의 기본 동작을 훼손하므로)

- this가 아닌 다른 객체를 명시적으로 반환 시 this 대신 return문에 명시한 객체가 반환

- return문에 객체가 아닌 원시 값을 반환 시 무시되고 암묵적으로 this 반환

 

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

// 인스턴스 생성. Circle 함수는 암묵적으로 this 반환
const circle = new Circle(1);
console.log(circle); // Circle {radius: 1, getDiameter: f}

 

constructor와 non-constructor

---

- 함수 객체는 일반 객체와 다르게 함수 객체만을 위한 [[Environment]], [[FormalParameters]] 등의 내부 슬롯과 [[Call]], [[Construct]] 같은 내부 메서드를 추가로 가짐

- 함수 객체는 모두 호출할 수 있으므로 내부 메서드  [[Call]]을 가짐

 

constructor

- 내부 메서드 [[Construct]]를 갖는 함수 객체

- 생성자 함수로서 호출 가능

- 함수 선언문, 함수 표현식, 클래스(클래스도 함수)

※ 생성자 함수로 호출될 것을 기대하고 정의하지 않은 일반 함수에 new 연산자를 붙여 호출 시 생성자 함수처럼 동작할 수 있다는 것을 주의해야 함

 

non-constructor

- 내부 메서드[[Construct]]를 갖지 않는 함수 객체

- 생성자 함수로 호출 시 에러 발생

- 메서드(ES6 메서드 축약 표현인 경우만), 화살표 함수

 

new 연산자 없이 생성자 함수가 호출되는 것을 방지하려면

---

new.target

- this와 유사하게 constructor인 모든 함수 내부에서 암묵적인 지역 변수처럼 사용(메타 프로퍼티)

- IE는 지원하지 않으므로 주의

- new 연산자와 함께 호출 시 함수 내부의 new.target은 함수 자신을 가리킴

- new 연산자 없이 일반 함수로서 호출 시 함수 내부의 new target은 undefined

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

// new 연산자 없이 생성자 함수를 호출해도 new.target을 통해 생성자 함수로서 호출
const circle = Circle(5);
console.log(circle.getDIameter()); // 10

 

스코프 세이프 생성자 패턴

- IE에서 지원하지 않는 new.target 대신 사용할 수 있음

- 일반 함수로서 호출 시 this는 전역 객체, 생성자 함수로 호출 시 this는 Circle의 인스턴스 객체임을 활용해 구현

function Circle() {
  if (!(this instance of Circle)) {
    return new Circle(radius);
  }
  
  this.radius = radius;
  this.getDiameter = function () {
    return 2 * this.radius;
  };
}

const circle = Circle(5);
console.log(circle.getDiameter()); // 10

 

 

 

 

 

 

출처

- 모던 자바스크립트 Deep Dive - 자바스크립트의 기본 개념과 동작 원리