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

17.1 Object 생성자 함수 

 

생성자 함수 (constructor)

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

 

인스턴스(instance)

- 생성자 함수에 의해 생성된 객체 

 

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

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

//프로퍼티 추가 
person.name = 'Lee';
person.sayHello = function () {
  console.log('Hi! My name is' + this.name);
};

console.log(person); 
//{ name: 'Lee', sayHello: [Function (anonymous)] }]
person.sayHello(); 
//Hi! My name is Lee

 

17.2 생성자 함수 

 

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

 

- 객체 리터럴에 의한 객체 생성 방식은 단 하나의 객체만 생성

const circle1 = {
  radius: 5,
  getDiameter() {
    return 2*this.ratius;
  }
};

console.log(circle1.getDiameter()); //10

const circle2 = {
  radius: 10;
  getDiameter() {
    return 2 *this.radius;
  }
};

console.log(circle2.getDiameter()); //20

- circle1 객체와 circle2 객체는 프로퍼티 구조가 동일

- 객체 리터럴에 의해 객체를 생성하는 경우 프로퍼티 구조가 동일함에도 불구하고 매번 같은 프로퍼티와 메서드를 기술해야함

 

 

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

 

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

- 일반 함수와 동일한 방법으로 생성자 함수를 정의

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

- new 연산자와 함께 호출하지 않으면  일반함수로 동작

//생성자 함수 
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

 

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

 

- 생성자 함수의 역할은 인스턴스를 생성하는 것과 생성된 인스턴스를 초기화 하는 것

- 자바스크립트 엔진은 암묵적인 처리를 통해 인스턴스를 생성하고 반환

 

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: [Function (anonymous)] }

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

 

 - 암묵적으로 빈 객체 생성

 - 인스턴스는 this에 바인딩됨

 

2) 인스턴스 초기화 

 

 - this에 바인딩되어 잇는 인스턴스에 프로퍼티나 메서드를 추가

 - 생성자 함수가 인수로 전달받은 초기값을 인스턴스 프로퍼티에 할당하여 초기화 하거나 고정값을 할당

 

3) 인스턴스 반환

 

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

 

- this가 아닌 다른 객체를 명시적으로 반환하면 this가 반환되지 못하고 return 문에 명시한 객체가 반환

- 명시적으로 원시 값을 반환하면 원시 값 반환은 무시되고 암묵적으로 this가 반환

=> 생성자 기본 동작을 훼손하므로 생성자 함수 내부에서 return문을 반드시 생략 해야함

 

 

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

 

- 함수는 객체 이므로 프로퍼티 소유 가능

- 함수는 객체 이므로 메서드 소유 가능

- 일반 객체는 호출할 수 없지만 함수는 호출 가능

 

- 함수가 일반함수로서 호출되면 내부 메서드 [[Call]]이 호출

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

function foo() {}

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

//생성자 함수로서 호출 [[Constructor]]가 호출
new foo();

 

callable

 

- 내부 매서드 [[Call]]을 갖는 함수 객체 

- 호출할 수 있는 객체 즉, 함수를 말함

- 모든 함수 객체는 내부 메서드 [[Call]]을 갖고 있으므로 호출 가능

 

constructor

 

- [[Construct]]를 갖는 함수 객체 

- 생성자 함수로서 호출할 수 있는 함수 

 

non-constructor

 

 - [[Construct]]를 갖고 있지 않은 함수 객체 

 - 생성자 함수로서 호출할 수 없는 함수 

 

- 함수 객체는 callable이면서 constructor이거나 callable이면서 non-constructor이다.

- 모든 함수 객체는 호출할 수 있지만 모든 함수객체를 생성자 함수로서 호출할 수 있는 것은 아님

 

 

17.2.5 constructor와 non-constructor의 구분 

 

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

 

• constructor : 함수 선언문, 함수 표현식, 클래스
• non-constructor : 메서드(ES6 메서드 축약 표현) , 화살표 함수

//일반 함수 정의 : 함수 선언문, 함수 표현식
function foo() {}
const bar = function () {};
//프로퍼티 x의 값으로 할당된 것은 일반 함수로 정의된 함수 (메서드로 인정 x)
const baz = {
  x: function () {}
};

//일반 함수로 정의된 함수만이 constructor이다.
new foo(); // foo {}
new bar(); // bar {}
new baz.x(); //x {}

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

new arrow(); //TypeError

//메서드 축약 표현
const obj = {
  x() {}
};

new obj.x(); //TypeError

- non-constructor인 함수 객체를 생성자 함수로서 호출하면 에러 발생

 

 

17.2.6 new 연산자 

 

- 일반 함수와 생성자 함수에 특별한 형식적 차이는 없음

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

- 내부 메서드 [[Constructor]]가 호출 

//생성자 함수로서 정의하지 않는 일반 함수 
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]]이 호출

//생성자 함수 
function Circle(radius) {
  this.radius = radius;
  this.getDiameter = function () {
    return 2* this.radius;
  };
}

//new 연산자 없이 생성자 함수 호출하면 일반 함수로서 호출
const circle = Circle(5);
console.log(circle); //undefined

//일반 함수 내부의 this는 전역 객체 window를 가리킴
console.log(radius); //5
console.log(getDiameter()); //10

circle.getDiameter();
//TypeError

- Circle함수를 일반 함수로서 호출하면 함수 내부의  this는 전역 객체 window를 가리킴

- radius 프로퍼티와 getDiameter 메서드는 전역 객체의 프로퍼티와 메서드가 됨

 

 

12.2.7 new.target

 

new.target

 

- constructor인 모든 함수 내부에서 암묵적인 지역 변수와 같이 사용됨

- 메타 프로퍼티 

- new 연산자와 함께 생성자 함수로서 호출되면 함수 내부의 new.target은 함수 자신을 가리킴

- 일반 함수로서 호출된 함수 내부의 new.target은 undefined

 

- new.target을 사용하여 new 연산자와 생성자 함수로서 호출했는지 확인하여 그렇지 않은 경우 new 연산자와 함께 재귀호출을 통해 생성자 함수로서 호출

//생성자 함수 
function Circle(radius) {
  //이 함수가 new 연산자와 함꼐 호출되지 않았다면 new.target은 undefined
  if(!new.target) {
    //new 연산자와 함꼐 생성자 함수를 재귀호출하여 생성된 인스턴스를 반환
    return new Circle(radius);
  }
  this.radius = radius;
  this.getDiameter = function () {
    return 2* this.radius;
  };
}

//new 연산자 없이 생성자 함수를 호출하여도 new.target을 통해 생성자 함수로서 호출됨
const circle = Circle(5);
console.log(circle.getDiameter());