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

🐣 Intro

• 객체 리터럴에 의한 객체 생성 방식이 가장 일반적이고 간단한 객체 생성 방식

  var person = {
  	name: 'Lee',
      sayHello: function () {
      	console.log(`hi! my name is ${this.name}`);
      }
  };

• 그 외에도 생성자 함수를 통해 객체를 생성할 수 있다!

✅ 1. Object 생성자 함수

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

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

  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

• Object뿐만 아니라 String, Number, Boolean, Function 등 빌트인 생성자 함수를 제공한다.

  • 문자열 객체, 숫자 객체를 생성하는 것!

✅ 2. 생성자 함수

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

• 단 하나의 객체만 생성이 가능함

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

• 객체(인스턴스)를 생성하기 위한 템플릿(클래스)처럼 생성자 함수를 사용하여 프로퍼티 구조가 동일한 객체 여러 개를 간편하게 생성할 수 있음
• 생성자 함수를 정의하고 new연산자와 함께 호출하면 해당 함수는 생성자 함수로 동작

function Circle(radius) {
	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

✔️ this

• 객체 자신의 프로퍼티나 메서드를 참조하기 위한 자기 참조 변수
• this가 가리키는 값, 즉 this 바인딩은 함수 호출 방식에 따라 동적으로 결정

✔️ 생성자 함수의 인스턴스 생성 과정

function Circle(radius) {
	// 1. 암묵적으로 빈 객체가 생성되고 this에 바인딩(식별자와 값을 연결하는 과정)
    // 2. this에 바인딩되어 있는 리소스를 초기화
    this.radius = radius;
    this.getDiameter = function () {
    	return 2 * this.radius;
    };
	// 3. 완성된 인스턴스가 바인딩된 this를 암묵적으로 반환
    // 명시적으로 객체를 반환하면 암묵적인 this반환이 무시
    // 명시적으로 원시값을 반환하면 원시값이 무시되고 암묵적으로 this가 반환
}

// 생성자 함수 내부에서 return문을 반드시 생략

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

• 함수 선언문 또는 함수 표현식으로 정의한 함수는 일반적인 함수로서 호출뿐만 아니라 생성자 함수로서 호출도 가능함
• 일반 객체는 호출이 불가능하지만 함수는 호출이 가능함
  • 함수가 일반 함수로서 호출되면 [[Call]]이 호출
  • 함수가 생성자 함수로서 호출되면 [[Construct]]이 호출

function foo() {}

// 함수는 객체이기 때문에 프로퍼티를 가질 수 있고
foo.prop = 1

// 함수는 객체이기 때문에 메서드를 가질 수 있음
foo.method = function () {
	console.log(this.prop)
};

foo.method(); // 10

✔️ constructor와 non-constructor의 구분 (함수 정의 방식에 따라)

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

✔️ new 연산자

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

✔️ new.target

• new연산자와 함께 생성자 함수로서 호출되면 함수 내부의 new.target은 함수 자신을 가리킴
• new연산자없이 일반 함수로서 호출된 함수 내부의 new.target은 undefined