17.1. Object 생성자 함수
- 생성자 함수(constructor): new 연산자와 함께 호출하여 객체(인스턴스)를 생성하는 함수
- new Object() 생성자 함수: 빈 객체 생성 후 프로퍼티 또는 메서드 추가
- Object, String, Number, Boolean, Function, Array, Date, RegExp, Promise 등의 빌트인 생성자 함수 제공
17.2. 생성자 함수
17.2.1. 객체 리터럴에 의한 객체 생성 방식의 문제점
- 객체 리터럴에 의한 생성 방식은 직관적이고 간편, 일반적으로 많이 사용함
- 단 하나의 객체만 생성하기 때문에 동일한 프로퍼티를 갖는 여러 개의 객체를 생성할 때 비효율적
17.2.2. 생성자 함수에 의한 객체 생성 방식의 장점
- 객체(인스턴스)를 생성하기 위한 템플릿(클래스)처럼 사용할 수 있음
- 동일한 구조를 갖는 객체를 여러 개 생성할 때 유용함
- 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(circle2.getDiameter()); // 20this
- this는 객체 자신의 프로퍼티나 메서드를 참조하기 위한 자기 참조 변수
- this 바인딩은 함수 호출 방식에 따라 동적으로 결정됨
- 일반 함수로서 호출 -> 전역 객체
- 메서드로서 호출 -> 메서드를 호출한 객체(마침표 앞의 객체)
- 생성자 함수로서 호출 -> 생성자 함수가 생성할 인스턴스
17.2.3. 생성자 함수의 인스턴스 생성 과정
- 생성자 함수의 역할은 프로퍼티 구조가 동일한 인스턴스를 생성하기 위한 템플릿으로서 동작
- 인스턴스 생성 -> 필수
- 인스턴스 생성과 this 바인딩: 암묵적으로 빈 객체 인스턴스가 생성되어 this 바인딩, 런타임 이전 실행
- 인스턴스 초기화(프로퍼티 추가 및 초기값 할당)-> 옵션
- 인스턴스에 프로퍼티나 메서드를 추가하고 초기값을 할당
- 인스턴스 반환
- 생성자 함수 내부에서도 모든 처리가 끝나면 완성된 인스턴스가 바인딩된 this 반환
- return 문에 별도로 다른 객체를 명시적으로 반환할 수도 있음
- 생성자 함수 내부에서 this가 아닌 다른 값을 반환하는 것은 기본 동작을 훼손하므로 반드시 생략해야 함
17.2.4. 내부 메서드 [[Call]]과 [[Construct]]
- 함수 객체는 호출할 수 있음
- 일반 객체의 내부 슬롯과 메서드를 포함하여 함수 객체만을 위한 내부 슬롯과 메서드도 포함
- [[Enviroment]], [[FormalParameters]] 등의 내부 슬롯
- [[Call]] -> callable, [[Construct]] -> constructor 등의 내부 메서드
- [[Call]] : 호출할 수 없는 객체는 함수 객체가 아님, 반드시 callable
- [[Construct]] : constructor 일 수도 있고, non-constructor 일 수도 있음
17.2.5. constructor와 non-constructor의 구분
- constructor : 함수 선언문, 함수 표현식, 클래스
- non-constructor: 메서드, 화살표 함수
- ES6의 메서드 축약 표현만을 메서드로 의미함, 함수 정의 방식에 따라 구분
17.2.6. new 연산자
- new 연산자와 함께 호출하는 함수는 constructor
- new 연산자 없이 호출하면 일반 함수로 호출됨 ([[Call]])
- 생성자 함수는 일반적으로 파스칼 케이스로 명명함(첫 문자를 대문자로)
17.2.7. new.target
- ES6에서는 new.target 지원 (IE는 지원하지 않음)
- 모든 함수 내부에서 암묵적인 지역 변수와 같이 사용되는 메타 프로퍼티
- 함수 내부에서 new.target 사용하면 new 연산자와 함께 생성자 함수로서 호출되었는지 확인 가능
- new 연산자와 함께 생성자 함수로서 호출되면 new.target은 자기 자신을 가리킴
- 일반 함수로서 호출된 경우 new.target은 undefined
- 함수 내부에서 !new.target 조건문으로 new 없이 호출하여도 return 할 수 있음
- new.target을 사용할 수 없다면 스코프 생성자 패턴 사용 가능
- 대부분 빌트인 생성자 함수는 new 연산자와 함께 호출되었는 지 확인 후 값을 반환함
- Object, Function 생성자 함수는 new 연산자가 없어도 동일하게 동작함
- Sring, Number, Boolean 생성자 함수는 new 연산자가 없으면 문자열, 숫자, 불리언 값을 반환함
[출처] 모던 자바스크립트, Deep Dive
괴발개발라이프