[JavaScript] 모던 자바스크립트 Deep Dive 17장 생성자 함수에 의한 객체 생성

Lily·2022년 7월 4일

JavaScript Js Deep Dive

모던 자바스크립트 Deep Dive

목록 보기

9/11

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

📌 Object 생성자 함수

생성자 함수 : new 연산자와 함께 호출하여 객체(인스턴스)를 생성하는 함수
인스턴스 : 생성자 함수에 의해 생성된 객체
new 연산자와 함께 Object 생성자 함수를 호출하면 빈 객체를 생성하여 반환한다.
빈 객체를 생성한 이후 프로퍼티 또는 메서드를 추가하여 객체를 완성할 수 있다.
특별한 이유가 없으면 객체 리터럴을 사용하는 것이 더 간편하고 유용하다.

✨ 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: f}
person.sayHello(); // Hi! My name is Lee

✨ 기타 생성자 함수

const strObj = new String('Lee');
const numObj = new Number(123);
const boolObj = new Boolean(true);
const arr = new Array(1, 2, 3);
...

📌 생성자 함수

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

프로퍼티 구조가 동일함에도 불구하고 매번 같은 프로퍼티와 메서드를 기술해야한다.

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

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

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

프로퍼티 구조가 동일한 객체 여러 개를 간편하게 생성할 수 있다.
즉, 객체를 생성하기 위한 템플릿!
일반 함수와 동일한 방법으로 생성자 함수를 정의하고 new 연산자와 함께 호출하면 해당 함수는 생성자 함수로 동작한다.

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

인스턴스 생성과 this 바인딩
인스턴스 초기화
인스턴스 반환

✨ 내부 메서드 [[Call]과 [[Constructor]]

함수는 객체이지만 일반 객체와는 다르다. 일반 객체는 호출할 수 없지만 함수는 호출할 수 있다.
함수 객체의 구조
- 일반 객체가 가지고 있는 내부 슬롯과 내부 메서드
- 함수 객체만을 위한 내부 슬롯 [[Environment]],[[FormalParameters]]과 내부 메서드 [[Call]],[[Constructor]]
- callable : 내부 메서드 [[Call]]을 갖는 함수 객체
- constructor : 내부 메서드 [[Constructor]]를 갖는 함수 객체
- non-constructor : 내부 메서드 [[Constructor]]를 갖지 않는 함수 객체

function foo() {}

// 일반 함수로서 호출되면 함수 객체의 내부 메서드 [[Call]]이 호출됨
foo();

// 생성자 함수로서 호출되면 내부 메서드 [[Constructor]]이 호출됨
new foo();

✨ constructor와 non-constructor의 구분

함수 객체를 생성할 때 함수 정의 방식에 따라 함수를 constructor와 non-constructor로 구분한다.
constructor : 함수 선언문, 함수 표현식, 클래스(클래스도 함수다)
non-constructor : 메서드, 화살표 함수
non-constructor인 함수 객체를 생성자 함수로서 호출하면 에러가 발생한다.

✨ new 연산자

일반 함수와 생성자 함수에 특별한 형식적 차이는 없다.
따라서 생성자 함수는 일반적으로 첫 문자를 대문자로 기술한다.
new 연산자 없이 생성자 함수를 호출하면 일반 함수로 호출된다.

// 생성자 함수
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: Cannot read property 'getDiameter' of undefined