JS_Deep_Dive_chapter17 : 생성자_함수에_의한_객체_생성

조용환·2024년 3월 4일
0

JS_Deep_Dive

목록 보기
2/21

chapter 17 : 생성자 함수에 의한 객체 생성

Object 생성자 함수

new 연산자와 함께 Object 생성자 함수를 호출함으로서 생성. 이렇게 만들어진 객체를 인스턴스라 함
Object외에도 String, Number, Boolean, Function, Array, Date, RegExp, Promise 등의 빌트인 생성자 함수를 제공
특별한 경우가 아니면 객체 리터럴을 통해 만드는 것을 권장

생성자 함수

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

  • 동일한 프로퍼티를 갖는 객체를 여러 개 생성해야 하는 경우 매번 같은 프로퍼티를 기술해야 함

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

  • 구조가 동일한 객체 여러 개를 간편하게 생성할 수 있다.

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

생성자 함수는 인스턴스 생성과 동시에 초기화(프로퍼티 추가 및 초기값 할당)이 목적이다.
자바스크립트 엔진은 암묵적 처리를 통해 인스턴스를 생성하고 반환한다.
1. 인스턴시 생성과 this 바인딩
인스턴스는 this에 바인딩 된다. 즉 생성자 함수 내부의this가 생성자 함수가 생성할 인스턴스를 가리킨다.
2. 인스턴스 초기화
개발자가 기술한 것에 따라 프로퍼티, 메서드등을 추가하고 초기값을 할당한다.
3. 인스턴스 반환
모든 처리가 끝나면 인스턴스가 바인딩된 this가 암묵적으로 반환된다.
이 때 원시 값 반환시 원시 값 반환은 무시되고 this가 반환된다. 이는 생성자 함수 기본 동작을 훼손하는 것으로 생성자 함수내에서 반드시 return 문을 생략해야 한다.

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

함수 객체는 일반 객체이므로 객체가 가진 사항을 가짐과 동시에 특별하게 내부 슬롯 [[Environment]], [[FormalParameters]]등과 내부 메서드 [[Call]], [Construct] 등을 가진다.
일반 함수 호출시 call, 생성자 함수 호출시 Construct가 호출된다.
모든 함수는 호출할 수 있기 때문에 Callable이지만 Constructor or non-constructor를 가질 수 있다.

constructor와 non-constructor의 구분

함수 정의 방식에 따라 con, non-con을 구분한다. es6의 화살표 함수와 메서드 축약 표현으로 정의된 함수는 non-con, 그 외는 con이 된다.

new 연산자

일반 함수와 생성자 함수의 특별한 형식 차이는 없다. new를 붙이면 생성자 함수로 동작하며, 이 때 [[Call]]이 아닌 [[Construct]]가 호출된다. 당연히 non-constructor는 호출할 수 없다.
따라서 구분이 없기 때문에 생성자 함수는 첫 문자를 대문자로 기술하는 파스칼 케이스로 명명한다.

new.target

ES6부터 지원하는 문법으로 new 없이 생성자 함수 호출 방지
new없이 호출되면 new.target은 undefined, 생성자 함수로 호출되면 new.target은 함수 자신을 가리킴

profile
practice react, javascript

0개의 댓글