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

1. Object 생성자 함수

new 연산자를 통해서 Object 생성자를 호출하면 빈 객체를 생성해서 반환한다.
그 후, 프로퍼티 또는 메서드를 추가해 객체를 완성시킨다.

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

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

console.log(person);
person.sayHello();

이외에도 String, Number, Boolean, Function, Array, Date, RegExp, Promise 같은 생성자 함수를 제공한다.

그러나, 반드시 Object 생성자 함수를 통해서 객체를 생성해야 하는것은 아니며, 비효율적으로 보인다.

2. 객체 리터럴에 의한 객체 생성

객체 리터럴에 의한 객체 생성 방식은 직관적이고 간편하나, 하나의 객체만 생성하는 단점이 존재한다. 따라서 동일한 프로퍼티의 객체를 여러 개 생성할 때 매번 같은 프로퍼티를 기술해야 한다는 것이다.

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

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

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

-> 동일한 객체가 1~2개면 상관이 없지만 수십개의 객체를 생성해야 할 시 문제가 발생.

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

인스턴스를 생성하기 위한 클래스 처럼 생성자 함수를 사용하여 프로퍼티 구조가 동일한 여러 개의 객체를 간편하게 생성할 수 있다.

function Circle(raidus){
	this.radius = radius; // this는 생성자 함수가 생성할 인스턴스를 가리킴.
    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

생성자 함수는 new 연산자와 함께 호출하면 해당 함수는 생성자 함수로 동작하지만, new 연산자를 사용하지 않으면 일반 함수로 동작한다.

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

1. 인스턴스 생성 및 this 바인딩
2. 인스턴스 초기화
3. 인스턴스 반환

function Circle(raidus){
	//1. 암묵적으로 빈 객체가 생성되어 this에 바인딩 됨.
	this.radius = radius; // 2. this에 바인딩 되어있는 인스턴스를 초기화 시킴.
    this.getDiameter = function(){
    	return 2 * this.radius;
        };
        //3. 완성된 인스턴스가 바인딩 된 this가 암묵적으로 반환됨.
    }
    const circle = new Circle(1); // 인스턴스 생성, Circle 생성자 함수는 암묵적으로 this를 반환함.

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

함수는 객체이므로, 일반 객체와 동일하게 동작이 가능하다. 일반 객체가 가지고 있는 내부 슬롯과 내부 메서드를 모두 가지고 있기 때문이다.

일반 객체는 호출할 수 없지만 함수는 호출이 가능하다. 따라서, 함수는 내부 슬롯과 내부 메서드 뿐만 아니라 함수 객체를 위한 [[Environment]], [[FormalParameters]] 같은 내부 슬롯과 [[Call]], [[Construct]] 같은 내부 메서드를 가지고 있다.

함수가 일반 함수로 호출이 되면 객체의 내부 메서드 [[Call]]이 호출, new 연산자와 함께 생성자 함수로써 호출되면 [[Construct]]가 호출된다.

function foo() {}

foo(); // [[Call]] 호출, 일반함수로 호출

new foo(); // [[Construct]] 호출, 생성자 함수로 호출

• callable
  호출 할 수 있는 객체, 즉 함수
• constructor
  생성자 함수로써 호출할 수 있는 함수
• non-constructor
  객체를 생성자 함수로서 호출할 수 없는 함수

construct와 non-construct 구분

• construct : 함수 선언문, 함수 표현식, 클래스 (클래스도 함수임)

• non-construct : 메서드, 화살표 함수

function foo() {} // 일반 함수 정의 : 함수 선언문, 함수 표현식
const bar = function() {};
const baz = {
	x: function () {}
    }; // x 의 값으로 할당된 것은 일반 함수로 정의된 함수라 메서드로 인정하지 않음.
    
new foo(); // -> foo {} // 일반 함수로 정의된 함수만 construct
new bar(); // -> bar {}

new baz.x(); // -> x {}

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

new arror(); // TypeError: arrow is not a constructor

const obj = {
	x() {}
    };
 // 메서드 정의 : ES6 메서드 축약 표현만 메서드로 인정함.

즉, 함수 선언문과 함수 표현식으로만 정의된 함수가 constructor, ES6 화살표 함수의 메서드 축약표현으로 정의된 함수가 non-constructor다.

new.target

함수 내부에서 new.target을 사용하면 new 연산자와 함께 생성자 함수로서 호출되었는지 확인할 수 있음.

new 연산자와 함께 생성자 함수로 호출되면 함수 내부의 new.target은 함수 자신을 가르키고, new 연산자 없이 일반 함수로서 호출된 new.target은 undefined가 된다.

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