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

* [출처] 이웅모, 모던 자바스크립트 Deep Dive 자바스크립트의 기본 개념과 동작원리(2020) , 위키북스, p.234-248

* 책 읽고 공부한 내용 정리한 TIL 입니다. (정보 전달 목적이 아니라 개인 기록용이니 참고 바랍니다.)

---

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

17-1. Object 생성자 함수

[예제 17-01]

//빈 객체 생성
const person = new Object(); 

//프로퍼티 추가
person.name = 'Lee';
person.sayHello = function() {
 console.log('Hi~ name is ' + this.name);
 };
 
 console.log(person); // {name: "Lee", sayHello :f}
 person.sayHello();   // Hi~ name is Lee

- 생성자 함수 : new 연산자와 함께 호출하여 객체(인스턴스)를 생성하는 함수 

- 객체 리터럴 단점 : 단 하나의 객체만 생성해야함 (동일한 구조여도 매번 같은 코드를 만들어야함..!)

- 생성자 함수 장점 : 템플릿(클래스)처럼 동일한 객체 여러개 생성 가능 

[예제 17-04] 
//생성자 함수
function Circle(radius){
 this.radius = radius;
 this.getDiameter = function() {
 	return 2 * radius;
  }
}

//인스턴스 생성
const circle1 = new Circle(5)  //반지름이 5인 Circle 객체 생성
const circle2 = new Circle(10) //20

** this

- 객체 자신의 프로퍼티/메서드를 참조하기 위한 자기 참조 변수

[예제 17-05]  

function foo(){
  console.log(this);
}

//1.일반적인 함수 호출
//this : 전역 객체 (브라우저 환경: window / Node.js환경 : global)

foo(); //window


//2.메서드로 호출
//this : 메서드 호출한 객체 (마침표 앞의 객체)
const obj = {foo}; //ES6 축약표현
obj.foo(); //obj


//3.생성자 함수 호출
//this : 생성자 함수가 (미래에) 생성할 인스턴스
const inst = new foo(); //inst


// this : 22장에서 자세히 다룸

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

(this 바인딩 : this와 this가 가르킬 객체를 바인딩)

 

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

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

2) 인스턴스 초기화

3) 인스턴스 반환

[예제 17-08]
function Circle(radius){
//1. 암묵적으로 인스턴스 생성되고 this에 바인딩함
console.log(this); // Circle{}

//2. this에 바인딩 되어 있는 인스턴스를 초기화한다
this.radius = radius;
this.getDiameter = function() {
	return 2* radius;
 };
 
 //3. 완성된 인스턴스가 바인딩된 this를 암묵적으로 반환
}

//4. 인스턴스 생성. Circle 생성자 함수는 암묵적으로 this 반환
const circle = new Circle(1); 
console.log(Circle); // {radius :1, getDiameter:f}

* 만약 Circle 생성자 함수가 return {}; // 명시적으로 객체를 반환하면 암묵적인 this 반환 무시

Const circle = new Circle(1); // {} 

 

 

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

[예제 17-14]
function foo() {

//일반적인 함수 호출: [[Call]] 호출
foo();

//생성자 함수 호출 : [[Construct]] 호출
new foo();
}

- 모든 함수 객체는 호출 가능 Callable (일반함수만 호출 객체 : non-constructor / 생성자 함수|| 일반함수 객체 :constructor)

 

17.2.5 constructor 와 non-constructor 구분

constructor  : 함수선언문, 함수 표현식, 클래스

non-constructor  : 메서드(es6 축약표현), 화살표 함수

 

17.2.6 new 연산자

- constructor  호출

- 생성자 함수{this로 바인딩} -> new 연산자로 호출 : const Circle = new Circle(5);

- 생성자 함수{this로 바인딩} -> new 연산자 없이 호출 : const Circle = Circle(5); (일반함수 호출 : this = window )

 

17.2.7 new.target (IE 미지원)

- new 연산자 + 생성자 함수 호출 = 함수 내부 new.target = 함수자신

- new 연산자 없이 + 일반 함수 호출 = 함수 내부 new.target = undefined