[JS Deep Dive] 17장. 생성자 함수에 의한 객체 생성

lyshine·2023년 4월 17일
0

✅ 객체를 생성하는 여러가지 방법 중 이번엔 생성자 함수를 사용해 객체를 생성하는 방식을 알아보자

Object 생성자 함수

  • 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: ƒ}
  person.sayHello(); // Hi! My name is Lee
  • 자바스크립트는 Object 생성자 함수 이외에도 String, Number, Boolean, Function, Array, Date, RegExp, Promise 등의 빌트인 생성자 함수를 제공한다.
  • 특별한 이유가 없다면 Object 생성자 함수로 객체를 생성하는 방식은 그다지 유용하지는 않다.

생성자 함수

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

  • 객체 리터럴에 의한 객체 생성은 직관적이고 간편하지만, 단 하나의 객체만 생성한다. ⇒ 동일한 프로퍼티를 갖는 객체를 여러개 생성해야 하는 경우 비효율적이다.

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

  • 생성자 함수에 의한 객체 생성 방식은 마치 객체(인스턴스)를 생성하기 위한 템플릿(클래스)처럼 생성자 함수를 사용하여 프로퍼티 구조가 동일한 객체 여러 개를 간편하게 생성할 수 있다.
  • 생성자 함수를 new연산자와 함께 호출하지 않으면 그냥 일반 함수로 동작한다.
//생성자 함수
function Circle(radius) {
	//this는 생성자함수가 생성할 인스턴스를 가리킨다.
	this.radius = radius;
	this.getDiameter = function () {
		return 2*this.radius;
	};
}

//인스턴스 생성
const circle1 = new Circle(5);
const circle2 = new Circle(10);

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

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

생성자 함수의 역할

  1. 인스턴스를 생성
  2. 생성된 인스턴스를 초기화(인스턴스 프로퍼티 추가 및 초기값 할당)하는 것
  1. 인스턴스 생성과 this 바인딩
    • 암묵적으로 인스턴스가 생성되고 this에 바인딩된다.
  2. 인스턴스 초기화
    • 생성자 함수에 기술되어 있는 코드가 한줄씩 실행되어 this에 바인딩되어 있는 인스턴스를 초기화한다.
  3. 인스턴스 반환
    • 생성자 함수 내부의 모든 처리가 끝나면 완성된 인스턴스가 바인딩된 this가 암묵적으로 반환된다.
//생성자 함수
function Circle(radius) {
	//1. 암묵적으로 빈 객체가 생성되고 this에 바인딩된다.

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

//인스턴스 생성. Circle 생성자 함수는 암묵적으로 this를 반환한다.
const circle1 = new Circle(5);
  • 생성자 함수 내부에서 명시적으로 this가 아닌 다른 값을 반환하면 기본 동작을 훼손하기 때문에 return 반환문을 반드시 생략해야 한다.

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

  • 함수는 객체이므로 일반 객체와 동일하게 동작할 수 있다. 하지만 일반 객체와는 다르다.
  • 일반 객체는 호출할 수 없지만 함수는 호출할 수 있다.
  • 함수 객체는 [[Environment]][[FormalParameters]] 등의 내부 슬롯과, [[Call]]
    과 [[Construct]]같은 내부 메서드를 추가로 가지고 있다.
    - 함수 호출시 내부 메서드 [[Call]]이 호출됨. foo();(callable)
    - new 연산자와 함께 생성자 함수로서 호출되면 내부 메서드 [[Construct]]가 호출됨. new foo();(constructor)
    - 모든 함수 객체는 callable 이지만 constructor인 것은 아니다.

constructor와 non-constructor의 구분

함수 정의 방식에 따라 구분한다.

  • constructor : 함수 선언문, 함수 표현식, 클래스(클래스도 함수다)
  • non-constructor: 메서드(ES6 메서드 축약 표현만 인정한다), 화살표 함수
// 일반 함수 정의: 함수 선언문, 함수 표현식
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() {}
};

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

new 연산자

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

  • new 연산자와 함께 함수를 호출하면 해당 함수는 생성자 함수로 동작한다.
  • new 연산자와 함께 호출하는 함수는 non-constructor가 아닌 constructor이어야 한다.
  • 생성자 함수를 쓸때는 일반적으로 첫 문자를 대문자로 기술하는 파스칼 케이스로 명명하는 것 같은 방법을 사용해서 일반 함수와 구별할 수 있도록 한다.

new.target

  • 파스칼 케이스로 명명하더라도 실수는 언제나 발생할 수 있다.
  • 이러한 위험성을 회피하기 위해 ES6에서는 new.target을 지원한다.
  • new 연산자와 함께 생성자 함수로서 호출되면 함수 내부의 new.target은 함수 자신을 가리킨다. new 연산자 없이 일반 함수로서 호출된 함수 내부의 new.target은 undefined다.
// 생성자 함수
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());

0개의 댓글