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

객체 리터럴

생성자 함수를 이용한 객체 생성.

 

17.1 Object 생성자 함수

 

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

const person = new Object();  
console.log(person) // person {}  

person.name = "Jiho";

person.sayHello = function () {
    console.log("Hi !" + this.name);
}  
console.log(person); // person {name : 'jiho' , sayHello : f}

허나 반드시 new Object() 를 사용해 빈객체를 생성한 후 코드를 추가해야하는 것은 아님.

17.2 생성자 함수

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

let person1 = {  
    name : "jiho",  
    sayHello : function () {  
        console.log("Hi" + this.name);  
    }
}

let person2 = {  
    name : "jiho",  
    sayHello : function () {  
        console.log("Hi" + this.name);  
    }  
}

2.1.1

function MakePerson(name) {  
    this.name = name;  
    this.sayHello = function () {  
        console.log("Hi" + this.name);  
    }  
}

const jiho = new MakePerson("jiho");  
const people = new MakePerson("people");

2.1.2

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

코드 2.1.2 를 보면 인스턴스화 시킨 객체를 여러번 호출 하여 간단하게 사용 하는 것을
확인 할 수 있음.

17.2.1과 17.2.2 의 정리

코드 2.1.1과 코드 2.1.2를 비교해 보면 조금더 명확하게 이해 할 수 있다.
객체리터럴의 경우 생성자를 여러번 생성해야하는 경우 이 코드를 반복해야하는 문제점이 있음.
그렇기에 생성자를 통해서 같은 함수를 새로운 인스턴스화 시켜서 사용하게 되면 효율적으로 사용 할 수 있다.

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

인스턴스를 생성하고 이를 초기화
코드 2.1.2. 에서 this.name = name 으로 초기값을 할당 하여
사용 하는 내용이 인스턴스의 초기화에 해당하는 내용이라고 볼 수 있음.

이때 반환값이 보이지 않는 이유는 이는 js 내부 엔진에서 암묵적으로 동작하는 내용이다.

1. 인스턴스 생성과 This 바인딩
   암묵적 빈 객체가 생성 이는 this에 바인딩 됨

2. 인스턴스의 초기화
   한줄씩 읽으면서 서술되어 있는 로직들에 해당하는 초기화 과정을 거침
   매개변수가 들어왔다면 이를 통해 값을 할당하는 것과 같은 과정을 이야기한다.
3. 인스턴스의 반환
   생성자 함수 내부의 처리가 끝나면 완성된 인스턴스가 바인딩된 this 가 반환된다.

17.2.4 내부 메서드 [[call]], [[Constructor]]

 

함수 선언문 또는 함수 표현식으로 정의한 함수는 일반적인 함수로 호출 할 수 있는것 또한
생성자 함수로 호출 가능하다.
생성자 함수로 호출하는것은 결국 new 를 통해서 생성하는 것을 의미하고 이는 위에서 동작과 동일하게
new 로 실행된 함수또한 생성자 바인딩의 과정을 거친다.

 

17.2.5 constructor 와 non-constructor 의 구분

 

constructor 함수 선언문, 함수 표현식, 클래스
non-constructor 메서드, 화살표 함수
Ecma사양에서 메서드는 es6 의 축약 표현을 이용한함수만 메서드로 판단한다.
따라서 할당의 위치가 중요한 내용이 아니라는 이야기가 된다.

 

17.2.6 new 연산자

 

일반 함수와 생성자 함수에형식적 차이가 존재하는 것은 아님 허나
내부에 호출되는 로직이 달라지는것 뿐이다. 따라서
[[call]] 만 존재하는 메서드의 경우 에러를 발생하는 이유가 이것 이다.

 

17.2.7 new.target

 

new 연산자 없이 호출되는 것을 방지하기 위해서 지원 해주는 함수이다
이는 타겟이 무엇으로 정의되어 있는지 확인 할 수 있음으로 이를 통해서
처리할 수 있다.

function test() {  
    if (!.new.target)  
    return 0;  
    ...  
}

function test() {  
    if (!(this instance test)) {  
        return new Test();  
    }  
    ...  
}

2.2.1
코드 2.2.1 과 같은 로직을 통해 확인 가능하다.