[Javascript] Deep Dive 17장 생성자 함수에 의한 객체 생성

Yuzu·2023년 6월 22일
0

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

17.1 Object 생성자 함수

생성자 함수(constructor) : new 연산자와 함께 호출하여 객체(인스턴스)를 생성하는 함수
인스턴스 (instance) : 생성자 함수에 의해 생성된 객체
new 연산자와 함께 Object 생성자 함수를 호출하면 빈 객체를 생성하여 반환한다.

  • 빈 객체를 생성한 이후 프로퍼티 또는 메서드를 추가하여 객체를 완성할 수 있다.
// 빈 객체의 생성
const person = new Object();
  • 자바스크립트의 빌트인(built-in) 생성자 함수: Object, String, Number, Boolean, Function, Array, Date, RegExp, Promise 등

17.2 생성자 함수

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

  • 객체 리터럴에 의해 객체를 생성하는 경우 프로퍼티 구조가 동일해도 매번 같은 프로퍼티와 메서드를 기술해야 한다.

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

  • 마치 객체(인스턴스)를 생성하기 위한 템플릿(클래스)처럼 생성자 함수를 사용하여 프로퍼티 구조가 동일한 객체 여러 개를 간편하게 생성할 수 있다.
// 생성자 함수
function Circle(radius){
	this.radius = radius;
    this.getDiameter = function() {
    	return 2 * this.radius;
    };
}

const Circle1 = new Circle(5); // 반지름이 5인 Circle 객체를 생성
const Circle2 = new Circle(10); // 반지름이 10인 Circle 객체를 생성

this

: 객체 자신의 프로퍼티나 메서드를 참조하기 위한 자기 참조 변수(self-referencing variable)

  • this가 가리키는 값인 this 바인딩은 함수 호출 방식에 따라 동적으로 결정된다.

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

  • 생성자 함수의 역할은 인스턴스를 생성하는 것(필수)과 생성된 인스턴스를 초기화(인스턴스 프로퍼티 추가 및 초기값 할당, 옵션)하는 것이다.
// 생성자 함수
function Circle(radius){
	// 인스턴스 초기화
    this.radius = radius;
    this.getDiameter = function(){
    	return 2 * this.radius;
   };
}

// 인스턴스 생성
const circle1= new Circle(5);

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

  1. 인스턴스 생성 : 빈 객체 생성
  2. 인스턴스가 this에 바인딩된다.
  3. 이 처리는 런타임 이전에 실행된다.

바인딩(binding)
: 식별자와 값을 연결하는 과정
ex. 변수 선언은 변수의 이름(식별자)과 확보된 메모리 공간의 주소를 바인딩하는 것이다.
this 바인딩 : this(키워드, 식별자)와 this가 가리킬 객체를 바인딩 하는 것

2. 인스턴스 초기화

  • this에 바인딩되어 있는 인스턴스에 프로퍼티나 메서드를 추가하고 생성자 함수가 인수로 전달받은 초기값을 인스턴스 프로퍼티에 할당하여 초기화하거나 고정값을 할당한다.

3. 인스턴스 반환

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

일반 객체는 호출할 수 없지만 함수는 호출할 수 있다.

callable: 내부 메서드 [[Call]]을 갖는 함수 객체, 호출할 수 있는 객체인 함수를 뜻함
constructor: 내부 메서드 [[Construct]]를 갖는 함수 객체, 생성자 함수로서 호출할 수 있는 함수를 뜻함
non-constructor: [[Construct]]를 갖지 않는 함수 객체, 객체를 생성자 함수로서 호출할 수 없는 함수를 뜻함

  • 함수 객체는 callable이면서 constructor이거나 callable이면서 non-constructor다.
  • 모든 함수 객체는 호출할 수 있지만 모든 함수 객체를 생성자 함수로서 호출할 수 있는 것은 아니다.

5. constructor와 non-constructor의 구분

  • 자바스크립트 엔진은 함수 정의를 평가하여 함수 객체를 생성할 때 함수 정의 방식에 따라 함수를 constructor와 non-constructor로 구분한다.

constructor: 함수 선언문, 함수 표현식, 클래스
non-constructor: 메서드, 화살표 함수

6. new 연산자

new 연산자와 함께 호출하는 함수는 constructor 이다.

profile
냐하

0개의 댓글