모던 자바스크립트 17장 생성자 함수에 의한 객체 생성

생성자 함수에 의한 객체 생성

객체를 생성할 수 있는 방법은 객체 리터럴과 생성자 함수를 사용하는 방식이 있다.

 

 

17.1 Object 생성자 함수

new연산자와 함께 Object 생성자 함수를 호출하면 빈 객체를 생성하여 반환한다.

이후 프로퍼티 또는 메서드를 추가하여 객체를 완성할 수 있다.

생성자 함수란 new 연산자와 함께 호출하여 객체를 생성하는 함수를 말한다. 생성자 함수에 의해 생성된 객체를 인스턴스라한다.

자바스크립트는 String, Boolean, Function, Array, Date등의 빌트인 생성자를 제공한다.

 

 

String, Number, Boolean 빌트인 생성자 함수

 

 

Array, Date 생성자 함수

 

 

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

객체를 생성하는 방식은 객체 리터럴이 직관적이고 간편하지만 동일한 프로퍼티를 갖는 객체를 여러개 생성해야 하는 경우는 생성자 함수가 더 효율적이다.

템플릿처럼 생성자 함수를 사용하여 간편하게 여러개의 객체를 생성 가능

 

 

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

생성자 함수의 역할은 프로퍼티 구조가 동일한 인스턴스를 생성하기 위한 템플릿(클래스)로서 동작하여 인스턴스를 생성하는 것과 생성된 인스턴스를 초기화(인스턴스 프로퍼티 추가 및 초기값 할당)하는 것이다.

 

new 연산자와 함께 생성자 함수 호출시 자바스크립트 엔진 동작 과정

 

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

   암묵적으로 빈 객체가 생성된다.

   인스턴스는 this에 바인딩된다.

   이 처리는 런타임 이전에 실행된다.

 

 - 바인딩 : 식별자와 값을 연결하는 과정

 

2. 인스턴스 초기화

생성자 함수에 기술되어 있는 코드가 한 줄씩 실행되어 this에 바인딩 되어있는 인스턴스를 초기화 한다. 

 

3. 인스턴스 반환

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

 

 

만약 this가 아닌 다른 객

체를 명시적으로 반환하면 return문에 명시한 객체가 반환되고

circle함수는 return문 객체를 반환

 

명시적으로 원시 값을 반환하면 반환 값이 무시되고 암묵적으로 this를 반환한다.

이처럼 생성자 함수 내부에서 명시적으로 this가 아닌 다른 값을 반환하는 것은 생성자 함수의 기본 동작을 훼손한다. 따라서 생성자 함수 내부에서 return 문을 반드시 생략해야한다.

 

 

빌트인 생성자 함수의 사용

Object와 Function 생성자 함수는 new 연산자 없이 호출해도 new 연산자와 함께 호출했을 때와 동일하게 동작한다.

하지만 String, Number, Boolean 생성자 함수는 new 연산자를 사용하지 않고 호출했을 시에 문자열, 숫자, 불리언 값을 반환하며 이를 통해 데이터 타입을 변환하기도 한다.