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

목차
- 1. Object 생성자 함수
- 2. 생성자 함수

Object 생성자 함수

new 연산자와 함께 Object 생성자 함수를 호출하면 빈 객체를 생성하여 반환.
빈 객체를 생성한 이후 프로퍼티, 메서드를 추가하여 객체를 완성할 수 있다.

const person = new Object();

console.log(person); //{}

person.name = "jo";

console.log(person); //{ name: 'jo' }

생성자 함수 : new 연산자와 함께 호출하여 객체(인스턴스)를 생성하는 함수
생성자 함수에 의해 생성된 객체 : 인스턴스
js는 Object 생성자 함수 이외에도 String, Number, Boolean, Function, Array, Dat, RegExp, Promise 등의 빑트인 생성자 함수를 제공한다.

const strObj = new String("lee")
console.log(typeof strObj) //object
console.log(strObj) //[String: 'lee']

const numObj = new Number(123)
console.log(typeof numObj) //object
console.log(numObj) //[Number: 123]

반드시 Object 생성자 함수를 사용해 빈 객체를 생성해야 한느 것은 아니다.
객체 생성 방식은 객체 리터럴이 더 간편
Object 생성자 함수 사용은 특별한 이유가 없다면 지양

생성자 함수

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

객체 리터럴 : 직관적, 간편
하지만 단 하나의 객체만 생성한다.
동일한 프로퍼티를 갖는 객체를 여러 개 생성하려면 매번 같은 프로퍼티를 기술해야함 > 비효율적
객체는 프로퍼티를 통해 객체 고유의 상태 표현
메서드를 통해 상태 데이터인 프로퍼티를 참조하고 조작하는 동작 표현
프로퍼티는 객체마다 프로퍼티 값이 다를 수 있지만, 메서드는 내용이 동일한 경우가 일반적
ex) 원에서 반지름은 달라도, 길이를 구하는 메서드는 같다.
하지만 객체 리터럴로 객체를 생성하는 경우, 프로퍼티의 구조가 동일함에도 매번 같은 프로퍼티와 메서드 기술해야 함.

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

마치 객체(인스턴스)를 생성하기 위한 템플릿(클래스)처럼 생성자 함수를 사용하여 프로퍼티 구조가 동일한 객체 여러 개를 간편하게 생성 가능

function Circle(r) {
  this.r = r;
  this.getDiameter = function () {
    return 2 * this.r;
  };
}

const c1 = new Circle(5);
const c2 = new Circle(10);

console.log(c1.getDiameter()); //10
console.log(c2.getDiameter()); //20

this는 객체 자신의 프로퍼티나 메서드를 참조하기 위한 자기 참조 변수
- this가 가리키는 값(this 바인딩)은 함수 호출 방식에 따라 동적으로 결정된다
- 일반 함수로서 호출 : 전역 객체
- 메서드로서 호출 : 메서드를 호출한 객체(마침표 앞의 객체)
- 생성자 함수로서 호출 : 생성자 함수가 (미래에) 생성할 인스턴스

function foo() {
  console.log(this);
}

// 일반 함수로서 호출
foo(); //<ref *1> Object [global] {

const obj = { foo };

// 메서드로서 호출
obj.foo(); //obj

// 생성자로서 호출
const inst = new foo(); //inst

생성자 함수 : 객체(인스턴스)를 생성하는 함수
특별 형식이 정해진 것이 아닌 일반 함수와 동일한 방법으로 정의하고, new 연산자와 함께 호출하면 해당 함수는 생성자 함수로 동작
만약 new 연산자와 함께 호출 x > 일반 함수로 동작
밑 코드!!

function Circle(r) {
  this.r = r;
  this.getDiameter = function () {
    return 2 * this.r;
  };
}

const c3 = Circle(15);

console.log(c3); //undefined

console.log(radius); //ReferenceError: radius is not defined

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

생성자 함수 역할 : 프로퍼티 구조가 동일한 인스턴스를 생성하기 위해 템플릿(클래스)으로서 동작하여, 인스턴스를 생성하는 것 + 생성된 인스턴스를 초기화(인스턴스 프로퍼티 추가, 초기값 할당)
인스턴스 생성 : 필수
생성된 인스턴스 초기화 : 선택
this에 프로퍼티 추가 > 필요에 따라 전달된 인수를 프로퍼티의 초기값으로서 할당하여 인스턴스 초기화
but 인스턴스 생성, 반환 코드 어딨어?
- js 엔진이 암묵적인 처리를 통해 인스턴스를 생성하고 반환한다.

인스턴스 생성과 this 바인딩

암묵적으로 빈 객체가 생성 (생성자 함수가 생성한 인스턴스)
이 인스턴스는 this에 바인딩된다.
- 생성자 함수 내부의 this가 생성자 함수가 생성할 인스턴스를 기리키는 이유
- 이 작업은 런타입 이전에 실행
- 바인딩 : 식별자와 값은 연결하는 과정
- this 바인딩 : this와 this가 가리킬 객체를 바인딩

인스턴스 초기화

this에 바인딩되어 있는 인스턴스에, 프로퍼티나 메서드를 추가하고, 생성자 함수가 인수로 전달받은 초기값을 인스턴스 프로퍼티에 할당하여 초기화하거나 고정값을 할당

인스턴스 반환

생성자 함수 내부의 모든 처리가 끝나면 완성된 인스턴스가 바인딩된 this가 암묵적으로 반환```

function Circle(r) {
  // 1. 암묵적으로 빈 객체가 생성되고 this에 바인딩된다.
  console.log(this); // Circle{}

  // 2. this에 바인딩되어 있는 인스턴스를 초기화
  this.r = r;
  this.getDiameter = function () {
    return 2 * this.r;
  };

  // 3. 완성된 인스턴스가 바인딩 된 this가 암묵적으로 반환
}

// 인스턴스 생성. Circle생성자는 암묵적으로 this qksghks
const c1 = new Circle(5);
console.log(c1); //Circle { r: 5, getDiameter: [Function (anonymous)] }

만약 this가 아닌 다른 객체를 명시적으로 반환하면 return 문에 명시한 객체가 반환

function Circle(r) {
  this.r = r;
  this.getDiameter = function () {
    return 2 * this.r;
  };

  return {};
}

const c1 = new Circle(5);
console.log(c1); //{}

하지만 명시적으로 원시값 반환하면 무시하고 암묵적 this 반환

function Circle(r) {
  this.r = r;
  this.getDiameter = function () {
    return 2 * this.r;
  };

  return 100;
}

const c1 = new Circle(5);
console.log(c1); //Circle { r: 5, getDiameter: [Function (anonymous)] }

생성자 함수 내부에서 명시적으로 this가 아닌 다른 값을 반환하는 것은 기본 동작 훼손!
- 생성자 함수 내부의 return 문은 반드시 생략하자

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

함수 선언문, 함수 표현식으로 정의한 함수 > 생성자 함수로서 호출 가능
함수는 객체이므로 일반 객체와 동일하게 동작
- 함수 객체는 일반 객체가 가지고 있는 내부 슬롯, 내부 메서드 모두 가진다.

//함수는 객체다
function foo() {}

// 함수는 객체 > 프로퍼티 소유 가능
foo.prop = 10;

// 함수는 객체 > 메서드 소유 가능
foo.method = function () {
  console.log(this.prop);
};

foo.method(); //10

함수는 객체지만 일반 객체와 다르다.
- 일반 객체는 호출 불가능.
- 함수는 호출 가능
  - 따라서 함수는 일반 객체가 가진 내부 슬롯, 내부 메서드 + 함수로서 동작하기 위해 함수 객체만을 위한 [[Environment]], [[FormalParameters]] 등의 내부 슬롯과 [[Call]], [[Construct]] 같은 내부 메서드 가지고 있다.
- 함수가 일반 함수로서 호출 > 함수 객체의 내부 메서드 [[Call]] 호출
- new 연산자와 함께 생성자 함수로서 호출되면 [[Construct]] 호출
```
  function foo() {}
    
  // 일반적인 함수로서 호출: [[Call]] 이 호출
  // 내부 메서드 Call을 갖는 함수 객체 : Callable
  // 호출할 수 있는 객체=== 함수
  foo();
    
  // 생성자 함수로서 호출 : [[Construct]] 가 호출
  // 내부 메서드 Construct를 갖는 함수 객체 : constructor
  // 호출할 수 없는 함수
    
  // [[Construct]]를 갖지 않는 함수 > non-constructor
  new foo();
```
- 호출할 수 없는 객체는 함수가 아니다 > 함수 객체는 반드시 callable 이어야 한다.
  - 따라서 모든 함수 객체는 내부 매서드 [[Call]]을 갖고 있으므로 호출 할 수 있다.
  - but 모든 함수 객체가 [[Construct]]를 갖는 것은 아니다.
  - 함수 객체는 constructor 일수도 있고 non-constructor 일수도 있다.
- 함수는 callable && constructor callable && non-constructor
- 모든 함수 객체는 호출할 수 있지만 모든 함수 객체를 생성자 함수로서 호출할 수 있는 건 x

constructor와 non-constructor 구분

구분 기준 : 함수 정의를 평가하여 함수 객체를 생성할 때, 함수 정의 방식에 따라
constructor : 함수 선언문, 함수 표현식, 클래스(클래스도 함수)

non-constructor : 메서드(ES6 메서드 축약 표현), 화살표 함수

ECMAScript 사양헤서는 메서드로 인정하는 범위가 일반적 의미의 메서드보다 좁다.
함수를 프로퍼티 값으로 사용 > 일반적으로 메서드로 통칭
but ECMAScript 에서의 메서드 : only ES6의 메서드 축약 표현
함수가 어디에 할당되어 있는지에 따라 메서드 판단 x > 함수 정의 방식에 따라

  function foo() {} // 함수 선언식 > 일반 함수
    
  const bar = function () {}; // 함수 표현식 > 일반 함수
    
  const baz = {
    x: function () {}, // ECMAScript 기준 일반 함수
  };
    
  new foo();
  new bar();
  new baz.x();
    
  const arr = () => {}; // 화살표 함수
  new arr();
  // TypeError: arr is not a constructor
    
  const obj = {
    x() {}, // ES6 축약 표현 > 메서드
  };
  new obj.x();
  //TypeError: obj.x is not a constructor

생성자 함수로서 호출할 거라 기대 x > new 붙이면 생성자함수 되니까 조심!

new 연산자

일반함수, 생성자 함수 차이? 호출할 때 Call이 호출되느냐 Construct가 호출되느냐
생성자 함수 내부의 this는 생성자 함수가 생성할 인스턴스 가리킨다.
but 생성자 함수를 일반적인 함수로서 호출하면 함수 내부의 this는 전역 객체 window 가리킨다.
r, getDiameter는 전역 객체의 프로퍼티, 메서드가 된다.

function Circle(r) {
  this.r = r;
  this.getDiameter = function () {
    return 2 * this.r;
  };
}

const c = Circle(5);
console.log(c); //undefine

// 일반 함수 내부의 this는 전역 객체 window를 가리킨다.
console.log(r); //5
console.log(getDiameter()); //10

c.getDiameter(); //TypeError: Cannot read property 'getDiameter' of undefined

일반 함수, 생성자 함수의 특별한 형식적 차이 x
따라서 생성자 함수는 첫문자를 대문자로 기술 > 파스칼 케이스

new.target

생성자 함수가 new 연산자 없이 일반함수로서 호출되는 것을 막기 위해, 파스칼 케이스 컨벤션을 사용했지만 실수 유발 가능 > ES6 new.target 지원
new.target은 this와 유사하게 constructor인 모든 함수 내부에서 암묵적인 지역 변수와 같이 사용 (메타 프로퍼티)
IE는 new.target 지원 x
함수 내부에서 new.target 사용하면 new 연산자와 함께 생성자 함수로서 호출되었는지 확인 가능
new 연산자와 함께 생성자로서 호출 > 함수 내부의 new.target은 함수 자신을 가리킨다.
new 연산자 없이 일반 함수로서 호출된 함수 내부의 new.target은 undefined다
따라서, 함수 내부에서 new.target을 사용해서 new 연산자와 생성자 함수로서 호출했는지, 그렇지 않을경우 new 연산자와 재귀 호출을 통해 생성자 함수로서 호출 가능

function Circle(r) {
  if (!new.target) {
    return new Circle(r);
  }
  this.r = r;
  this.getDiameter = function () {
    return 2 * this.r;
  };
}

const c = Circle(5);
console.log(c.getDiameter()); //10

스코프 세이프 생성자 패턴

new.target은 IE에서 지원 x > new.target 사용 불가능할 상황에는 스코프 세이프 생성자 패턴 사용

function Circle(r) {
  // 이 함수가 new 연산자와 함께 호출 x > 이 시점의 this는 전역 객체 window를 가리킨다.
  // this 와 Circle의 프로토타입이 다르다
  if (!(this instanceof Circle)) {
    return new Circle(r);
  }
  this.r = r;
  this.getDiameter = function () {
    return 2 * this.r;
  };
}

const c = Circle(5);
console.log(c.getDiameter()); //10

new 연산자와 함께 생성자 함수에 의해 생성된 객체는, 프로토타입에 의해 생성자 함수와 연결된다.
대부분의 빌트인 생성자 함수는 new 연산자와 함께 호출되었는지를 확인한 후 적절한 값을 반환한다.
- ex) Object, Function 생성자 함수는 new 연산자 없이 호출해도 new 연산자와 함께 호출했을 때와 동일하다
- but, String, Number, Boolean 생성자 함수는 new 와 함께 호출 시 > 객체를 생성하여 반환
- new 없이 호출 시 > 값 자체를 반환
- 이를 통해 데이터 타입을 변환
```
  const num = Number("123");
  const n = new Number("123");
  console.log(num); //123
  console.log(n); //[Number: 123]
```

Object 생성자 함수

생성자 함수

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

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

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

인스턴스 생성과 this 바인딩

인스턴스 초기화

인스턴스 반환

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

constructor와 non-constructor 구분

new 연산자

new.target

스코프 세이프 생성자 패턴

Share this post