09_자바스크립트 : 객체 생성자 함수

 

1. object 생성자 함수

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

- 빈 객체 생성 이후 프로퍼티 또는 메서드를 추가하여 객체를 완성

(1) 빈 객체 생성
const student = new Object();

(2)프로퍼티 추가
student.name = '뿌돌이';
student.age = 16;

console.log(student);
=> { name: '뿌돌이', age: 16 }

 

 

 

2. 생성자 함수

 

- 생성자 함수를 사용하여 프로퍼티 구조가  동일한 객체 여러 개를 간편하게 생성할 수 있음.

unction Student(name, age){

    생성자 함수 내부의 this는 생성자 함수가 생성할 인스턴스를 가리킨다.
    this.name = name;
    this.age = age;
    this.getInfo = function(){
        return `${this.name}(은)는 ${this.age}세입니다.`;
    }

}

인스턴스의 생성
const student3 = new Student('장보고', 30);
const student4 = new Student('신사임당', 40);

메소드 호출
console.log(student3.getInfo());
=> 장보고(은)는 30세입니다.
console.log(student4.getInfo());
=> 신사임당(은)는 40세입니다.

 

 

 

반응형

3. 인스턴스 생성 과정

 

function Student(name, age) {
    (1) 암묵적으로 인스턴스가 생성되고 this에 바인딩 되는 과정이 런타임 이전에 실행된다.
    console.log(this); 
    
    (2)this에 바인딩 되어 있는 인스턴스를 초기화 한다.
    this.name = name;
    this.age = age;
    this.getInfo = function() {
        return `${this.name}(은)는 ${this.age}세입니다.`;
    }
   (3) 완성된 인스턴스가 바인딩 된 this가 암묵적으로 반환된다.
       
       return {};
       => {} 명시적으로 객체를 반환하면 암묵적인this 반환 무시
       
       
       return 1;
       => 명시적으로 원시 값을 반환하면 원시 값 반환은 무시되고 암묵적으로 this가 반환
       생성자 내부에서 return은 생략하는 것이 기본이다.
}

(4) 인스턴스 생성
const student = new Student('홍길동', 20);
console.log(student);
=> Student { name: '홍길동', age: 20, getInfo: [Function (anonymous)] }

 

 

 

 

4. 일반 함수와 생성자 함수의 차이점

-  형식적 차이는 없지만, new 연산자와 함께 호출하면 생성자 함수로 동작함.

- 생성자 함수가 new 연산자 없이 호출 되는 것을 방지하기 위해 ES6에서는 new.target을 지원

- 대부분의 빌트인 생성자 함수(Object, String, Number, Boolean, Date, RegExp, ...)는 new 연산자와 함께 호출 되었는지      를 확인한 후 적절한 값을 반환

function Dog(name, age) {
    
    if(!new.target){ 생성자 함수가 아니면
       
        return new Dog(name, age); 
        => new 연산자와 함께 생성자 함수를 재기 호출하여 생성 된 인스턴스를 반환
    }

    this.name = name;
    this.age = age;
}


const dog = Dog('뽀삐', 3);
=> new 연산자 없이 호출해도 new.target을 통해 생성자 함수로 호출
console.log(dog);
=> Dog { name: '뽀삐', age: 3 }