[js 딥다이브] 17장 생성자 함수에 의한 객체 생성

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

• 프로퍼티 구조가 동일 객체 여러개를 간편하게 생성가능

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

this는 함수 호출 방식에 따라 동적으로 결정된다.

함수 호출 방식	this가 가리키는 값(this 바인딩)
일반 함수로서 호출	전역 객체
메서드로서 호출	메서드를 호출한 객체(마침표 앞의 객체)
생성자 함수로서 호출	생성자 함수가 (미래에) 생성할 인스턴스

객체 반환

return {} //명시적 반환하면 암묵적인 this 반환은 무시

return 100 //명시적 원시값 반환하면 무시되고 암묵적 this 반환

함수 객체는 callable이면서 constructor이거나 callable이면서 non-constructor다. 즉, 모든 함수 객체는 호출할 수 있지만 모든 함수 객체를 생성자 함수로서 호출할 수 있는 것은 아니다.

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

new.target

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

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

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