<모던 자바스크립트 Deep Dive> 17~18장 생성자 함수에 의한 객체 생성, 함수와 일급 객체 요약
17. 생성자 함수에 의한 객체 생성
1) Object 생성자 함수
- new 연산자 + Object();으로 빈 객체(인스턴스) 생성
- Object 이외에도 String, Boolean, Function, Array, Date, RegExp, Promise 등 빌트인 생성자 함수 제공
2) 생성자 함수
1. 객체 리터럴에 의한 객체 생성 방식의 문제점
- 하나의 객체만 생성이 가능하여 비효율적(메서드가 동일한데 매 번 같은 객체 생성해야 함
2. 생성자 함수에 의한 객체 생성 방식의 단점
- 프로퍼티 구조가 동일한 객체를 여러개 생성 가능
- 사용자 정의 가능(new 연산자만 붙이면 됨)
*this : 자기참조변수로, 함수 호출 방식에 따라 this가 가리키는 값이 달라짐
| 함수 호출 방식 | this가 가리키는 값(this 바인딩) |
| 일반 함수로서 호출 | 전역 객체 |
| 메서드로서 호출 | 메서드를 호출한 객체(마침표 앞) |
| 생성자 함수로서 호출 | 생성자 함수가 생성할 인스턴스 |
3. 생성자 함수의 인스턴스 생성 과정
- 인스턴스 생성과 this 바인딩(빈 객체를 일단 만들고, this에 바인딩(식별자와 값을 연결)) -> 인스턴스 초기화(개발자가 기술한대로 초기값을 할당하여 초기화) -> 인스턴스 반환(암묵적으로 반환되므로 반환문 없이도 호출 가능하나, 반환문이 있으면 암묵적 반환이 무시되어 생성자 함수의 기본 동작을 훼손하므로 반환문이 있으면 생략 필요)
4. 내부 메서드 [[Call]]과 [[Construct]]
- 함수는 객체이기 때문에 프로퍼티, 메서드 소유 가능
- 함수만을 위한 내부 슬롯과 내부 메서드 가짐 ex. [[Call]], [[Construct]]
- callable ; 일반 함수로 호출 -> [[Call]] 호출됨
- constructor ; new + 생성자 함수로 호출 -> [[Construct]] 호출됨
- non-constructor; 생성자 함수로 호출할 수 없는 함수를 나타냄
- 함수 객체는 반드시 callable이면서 constructor이거나 non-constructor임
5. constructor와 non-constructor의 구분
- 자바스크립트 엔진이 함수 정의를 평가할 때 구분됨
- constructor ; 함수 선언문, 표현식, 클래스
- non-constructor; 메서드, 화살표 함수
6. new 연산자
- new와 함께 호출 시 생성자 함수로 동작함(constructor이어야 함)
- new 없이 호출 시 일반 함수로 동작함
- 생성자 함수는 첫문자를 대문자로 씀(일반 함수와 구분가능)
7. new.target
- 메타 프로퍼티를 나타냄
- IE에서는 지원되지 않으므로 스코프 세이프 생성자 패턴 사용 필요
- 생성자 함수로 호출 시 내부의 new.target은 함수 자신이며, 일반 함수로 호출 시 undefined임
- 일반 함수일때는 재귀호출을 통해 생성자 함수로 호출 가능함
function Circle(radius) {
if(!new.target) {
return new Circle(radius); // 재귀호출
}
this.radius = radius;
this.getDiameter = function () {
return 2 * this.radius;
};
}
const Circle = Circle(5);
console.log(circle.getDiameter());
18. 함수와 일급 객체
1) 일급 객체
- 일급 객체의 조건으로는 다음과 같은 것들이 있음1. 무명의 리터럴로 생성이 가능(런타임 시 생성)2. 변수나 자료구조에 저장이 가능3. 함수의 매개변수에 전달이 가능4. 함수의 반환값으로 사용이 가능
- 자바스크립트의 함수는 위의 4가지 조건을 모두 충족하므로 객체와 동일하게 사용이 가능함(함수형 프로그래밍 가능)
2) 함수 객체의 프로퍼티
1. arguments 프로퍼티
- 값은 arguments 객체
- arguments 객체는 함수 호출 시 전달될 인수들의 정보를 담고 있는 순회 가능한 유사 배열 객체이며, 함수 내부에서 지역 변수처럼 사용이 가능
- 매개변수 개수보다 전달된 인수의 개수가 많을 경우, 초과된 인수는 버려지지 않고 arguments 프로퍼티로 보관
- arguments 객체는 인수를 값으로, 키는 인수의 순서로 가지며, callee 프로퍼티는 arguments 객체를 생성한 함수 자신을, length 프로퍼티는 인수의 개수를 나타냄
- arguments 객체의 Symbol 프로퍼티는 arguments 객체를 순회 가능한 자료구조인 이터러블로 만들기 위한 프로퍼티임
2. caller 프로퍼티
- 비표준 프로퍼티이며, 사용하지 않음
3. length 프로퍼티
- 함수 정의 시 선언한 매개변수의 개수를 나타냄
- arguments 객체의 length 프로퍼티는 인자의 개수를, 함수 객체의 length 프로퍼티는 매개변수의 개수를 나타내므로 주의를 요함
4. name 프로퍼티
- 함수의 이름을 나타냄
- ES5에서는 빈 문자열을, ES6에서는 함수 객체가 가리키는 식별자를 값으로 가지므로 주의를 요함
5. __proto__ 접근자 프로퍼티
- [[Prototype]] 내부 슬롯이 가리키는 프로토타입 객체에 접근하기 위해 사용하는 접근자 프로퍼티(간접적 접근)
*hasOwnProperty 메서드 : 인수로 전달받은 프로퍼티 키가 객체 고유의 프로퍼티 키면 true, 상속이면 false를 반환
6. prototype 프로퍼티
- constructor만이 소유하는 프로퍼티
- 생성자 함수가 생성할 인스턴스의 프로토타입 객체
참고 : 도서 <모던 자바스크립트 Deep Dive>