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

---

  17.1 Object 생성자 함수  

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

- 빈 객체를 생성한 이후 프로퍼티 또는 메서드를 추가하여 객체를 완성할 수 있음.

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

• 인스턴스 : 생성자 함수에 의해 생성된 객체.

  17.2 생성자 함수  

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

- 객체 리터럴에 의한 객체 생성 방식은 직관적이고 간편.

- 하지만 동일한 프로퍼티를 갖는 객체를 여러 개 생성해야 하는 경우에 비효율적.

 

- 객체는 프로퍼티로 객체 고유의 상태를 표현. 메서드로 상태 데이터인 프로퍼티를 참조하고 조작하는 동작 표현.

- 따라서 프로퍼티는 객체마다 프로퍼티 값이 다를 수 있지만 메서드는 내용이 동일한 경우가 일반적이다.

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

- 객체(인스턴스)를 생성하기 위한 템플릿(클래스)처럼 프로퍼티 구조가 동일한 객체 여러 개를 간편하게 생성 가능.

// 예제 17-04
// 생성자 함수 
function Circle(radius) { 
    // 생성자 함수 내부의 this는 생성자 함수가 생성할 인스턴스를 가리킨다. 
    this.radius = radius; 
    this.getDiameter = function () {
         return 2 * this.radius; 
    };
}
// 인스턴스의 생성
const circle1 = new Circle(5); // 반지름이 5인 Circle 객체를 생성 
const circle2 = new Circle(10); // 반지름이 10인 Circle 객체를 생성
    
console.log(circle1.getDiameter()); // 10 
console.log(circle2.getDiameter()); // 20

- new 연산자와 함께 호출하면 해당 함수는 생성자 함수로 동작.

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

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

- 암묵적으로 빈 객체가 생성. 인스턴스는 this에 바인딩.

 

  바인딩  

- 바인딩 :  식별자와 값을 연결하는 과정. this 바인딩은 this(키워드로 분류되지만 식별자 역할)와 this가 가리킬 객체를 바인딩하는 것이다.

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

    this.radius = radius;
    this.getDiameter = function () {
        return 2 * this.radius; 
    }; 
}

  2. 인스턴스 초기화  

- 생성자 함수에 기술되어 있는 코드가 한 줄씩 실행되어 this에 바인딩되어 있는 인스턴스를 초기화.

// 예제 17-09
function Circle(radius) {
    // 1. 암묵적으로 인스턴스가 생성되고 this에 바인딩된다.
    // 2. this에 바인딩되어 있는 인스턴스를 초기화 
    this.radius = radius;
    this.getDiameter = function () {
         return 2 * this.radius; 
    }; 
}

  3. 인스턴스 반환  

- 생성자 함수 내부의 모든 처리가 끝나면 완성된 인스턴스가 바인딩된 this가 암묵적으로 반환.

// 예제 17-10
function Circle(radius) {
    // 1. 암묵적으로 빈 객체가 생성되고 this에 바인딩
    // 2. this에 바인딩되어 있는 인스턴스를 초기화
    this.radius = radius;
    this.getDiameter = function () {
        return 2 * this.radius;
    };
    // 3. 완성된 인스턴스가 바인딩된 this가 암묵적으로 반환
}
// 인스턴스 생성. Circle 생성자 함수는 암묵적으로 this를 반환한다. 
const circle = new Circle(1); 
console.log(circle); // Circle {radius: 1, getDiameter: f}

- 만약 this가 아닌 다른 객체를 명시적으로 반환하면 return 문에 명시한 객체가 반환.

- 하지만 명시적으로 원시 값을 반환하면 암묵적으로 this가 반환.

- 생성자 함수 내부에서 return 문을 반드시 생략해야 한다.

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

- 생성자 함수로서 호출한다는 것 : new 연산자와 함께 호출하여 객체를 생성하는 것을 의미.

- 내부 메서드 [[Call]]을 갖는 함수 객체를 callable, 내부 메서드 [[Construct]]를 갖는 함수 객체를 constructor, [[Construct]]를 갖지 않는 함수 객체를 non-constructor.

- callable은 호출할 수 있는 객체인 함수, constructor는 생성자 함수로서 호출할 수 있는 함수, non-constructor는 객체를 생성자 함수로서 호출할 수 없는 함수를 의미.

(그림 17-1 추가하기.)

  17.2.5 constructor와 non-constructor의 구분  

- constructor: 함수 선언문, 함수 표현식, 클래스(클래스도 함수)

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

// 예제 17-15
// 일반 함수 정의: 함수 선언문, 함수 표현식 
function foo() {}
const bar = function () {};
// 프로퍼티 x의 값으로 할당된 것은 일반 함수로 정의된 함수다. 이는 메서드로 인정하지 않는다.
const baz = {
    X: function () {}
};
// 일반 함수로 정의된 함수만이 constructor다.
new foo(); // - foo {} 
new bar(); // - bar {}

new baz.x(); // - x {}

// 화살표 함수 정의
const arrow = () => {};

new arrow(); // TypeError: arrow is not a constructor

// 메서드 정의: ES6의 메서드 축약 표현만 메서드로 인정한다. 
const obj = {
    x() {}
};

new obj.x(); // TypeError: obj.x is not a constructor

- 함수 선언문과 함수 표현식으로 정의된 함수만이 constructor.

- ES6의 화살표 함수와 메서드 축약 표현으로 정의된 함수는 non-constructor.

 

- 함수를 일반 함수로서 호출하면 함수 객체의 내부 메서드 [[Call]]이 호출.

- new 연산자와 함께 생성자 함수로서 호출하면 내부 메서드 [[Construct]]가 호출.

- non-constructor인 함수 객체는 내부 메서드[[Construct]]를 갖지 않는다. 생성자 함수로서 호출하면 에러가 발생.

  17.2.6 new 연산자  

- new 연산자와 함께 함수를 호출하면 해당 함수는 생성자 함수로 동작. [[Construct]]가 호출.

// 예제 17-17
// 생성자 함수로서 정의하지 않은 일반 함수 
function add(x, y) {
    return x + y;
}

// 생성자 함수로서 정의하지 않은 일반 함수를 new 연산자와 함께 호출 
let inst = new add();
    
// 함수가 객체를 반환하지 않았으므로 반환문이 무시된다. 따라서 빈 객체가 생성되어 반환된다. 
console.log(inst); // {}
    
// 객체를 반환하는 일반 함수 
function createUser(name, role) {
    return { name, role 
    }; 
}

// 일반 함수를 new 연산자와 함께 호출 
inst = new createUser('Lee', 'admin'); 

// 함수가 생성한 객체를 반환한다. 
console.log(inst); // {name: "Lee", role: "admin"}

- new 연산자 없이 생성자 함수를 호출하면 일반 함수로 호출. [[Call]]이 호출.

 

- 일반 함수로서 호출되었기 때문에 함수 내부의 this는 전역 객체 window를 가리킴.

- 생성자 함수는 일반적으로 첫 문자를 대문자로 기술하는 파스칼 케이스로 명명하여 일반 함수와 구별

  17.2.7 new.target  

- new.target은 this와 유사하게 constructor인 모든 함수 내부에서 암묵적인 지역 변수와 같이 사용되며 메타 프로퍼티라고 부름.

- 함수 내부의 new.target은 함수 자신을 가리킨다.

- new 연산자 없이 일반 함수로서 호출된 함수 내부의 new.target은 undefined.

 

- Object와 Function 생성자 함수는 new 연산자 없이 호출해도 new 연산자와 함께 호출했을 때와 동일하게 동작.

- String, Number, Boolean 생성자 함수는 new 연산자와 함께 호출했을 때 String. Number, Boolean 객체를 생성하여 반환하지만 new 연산자 없이 호출하면 문자열, 숫자, 불리언 값을 반환한다. 이를 통해 데이터 타입을 변환하기도 한다.

---

* 위 내용은 모던 자바스크립트 Deep Dive를 참고하여 개인적인 공부를 목적으로 정리하였습니다.

http://www.kyobobook.co.kr/product/detailViewKor.laf?ejkGb=KOR&mallGb=KOR&barcode=9791158392239&orderClick=LEa&Kc=

모던 자바스크립트 Deep Dive - 교보문고