[JS] 생성자 함수에 의한 객체 생성

📌 생성자 함수

• 생성자 함수: new 연산자와 함께 호출하여 객체(인스턴스)를 생성하는 함수
• 자바스크립트는 Object, String, Number, Boolean, Function, Array, Date, RegExp, Promise 등의 빌트인 생성자 함수를 제공함

 

📌 객체 생성 방식

• 객체 리터럴에 의한 객체 생성 방식
  • 장점: 직관적이며 간편함
  • 단점: 한번에 하나의 객체만 생성할 수 있어 동일한 프로퍼티를 갖는 객체를 여러 개 생성해야 하는 경우 매번 같은 프로퍼티를 기술해야 하기 때문에 비효율적임
• 생성자 함수에 의한 객체 생성 방식
  • 장점: 객체(인스턴스)를 생성하기 위한 템플릿(클래스)처럼 생성자 함수를 사용하여 프로퍼티 구조가 동일한 객체 여러 개를 간편하게 생성할 수 있음

 

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

1. 인스턴스 생성과 this 바인딩
   • 암묵적으로 빈 객체(인스턴스)가 생성되고 this에 바인딩됨 (런타임 이전애 실행됨)
2. 인스턴스 초기화
   • 생성자 함수에 기술된 코드가 한 줄씩 실행되어 this에 바인딩되어 있는 인스턴스를 초기화함
   • this에 바인딩되어 있는 인스턴스에 프로퍼티나 메서드를 추가하고 생성자 함수가 인수로 전달받은 초기값을 인스턴스 프로퍼티에 할당하여 초기화하거나 고정값을 할당함
3. 인스턴스 반환
   • 생성자 함수 내부의 모든 처리가 끝나면 완성된 인스턴스가 바인딩된 this가 암묵적으로 반환됨
   • this가 아닌 다른 객체를 명시적으로 반환하면 this가 반환되지 못하고 return문에 명시한 객체가 반환됨
   • this가 아닌 원시값을 명시적으로 반환하면 원시값 반환은 무시되고 암묵적으로 this가 반환됨

 

📌 constructor와 non-constructor의 구분

• constructor
  • 일반 함수 또는 생성자 함수로서 호출할 수 있는 객체
  • new 연산자와 함께 생성자 함수로서 호출할 수 있음
  • 함수 선언문, 함수 표현식, 클래스
• non-constructor
  • 일반 함수로서만 호출할 수 있는 객체
  • 메서드(ES6 메서드 축약 표현), 화살표 함수

 

 

참고문헌 및 출처 : 모던 자바스크립트 Deep Dive (이웅모)