본문 바로가기

Today I Learned

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

🔑 키워드 정리

  • 인스턴스 : new 연산자와 함께 호출되어 생성자 함수에 의해 생성된 객체
  • 바인딩 : 식별자와 값을 연결하는 과정. (예) 변수 선언 시, 변수 이름과 메모리 공간의 주소를 바인딩하는 것

📗 내용 정리

new 연산자와 함께 생성자 함수를 통해서 객체를 생성하는 방법은 사실 객체 리터럴 방법보다 불편하다. 다만 객체 리터럴 방식은 동적 생성이 어려운 반면, 생성자 함수를 통하면 비교적 간편하다.

this가 가리키는 값

NO 함수 호출 방식 this가 가리키는 값(this 바인딩)
1 일반 함수로서 호출 전역 객체
2 메서드로서 호출 메서드를 호출한 객체(마침표 앞의 객체)
3 생성자 함수로서 호출 생성자 함수가 (미래에) 생성할 인스턴스
funcction foo(){
	console.log(this);
}


foo(); // 1번. 브라우저 환경에서는 window, Node.js 환경에서는 global을 가리킨다.


const obj = { foo };
obj.foo(); // 2번. obj


const inst = new foo(); // 3번. inst

 

생성자 함수 생성

반드시 new 연산자와 함께 인스턴스를 생성해야 한다. 이름은 파스칼 케이스로 명명하도록 하자. 생성자 함수가 인스턴스를 생성하는 것은 필수이고, 생성된 인스턴스를 초기화하는 것은 옵션이다. 생성자 함수 내부에서는 암묵적으로 this가 반환되기 때문에, return 문을 반드시 생략해야한다.

함수 구분

내부 메서드 [[Call]]을 갖는 함수 객체는 callable이라고 한다. 호출할 수 있는 함수 객체이다.
내부 메서드 [[Constructor]]는 생성자 함수로서 호출할 수 있는 함수를 말한다. [[Constructor]]을 갖지 않으면 non-constructor 객체로 생성자 함수로서 호출할 수 없는 함수를 말한다. new 연산자 없이 생성자 함수를 호출하면 일반함수로 호출되고 [[Call]] 상태를 갖는다.

함수 정의 방식에 따라 구분된 onstructor와 non-constructor

constructor 함수 선언문, 함수 표현식, 클래스로 정의된 함수
non-constructor ES6의 화살표 함수, 메서드로 정의된 함수