[3주차 스터디] 17장-생성자 함수

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

Object 생성자 함수

• new연산자와 함께 Object 생성자 함수를 호출하면 빈 객체를 생성하여 반환함
• Object 생성자 함수 이외에도 String, Number, Boolean, Function, Array, Date, RegExp, Promise 등 빌트인 생성자 함수를 제공

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

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

console.log(person); // {name: "Lee", sayHello: ƒ}
person.sayHello(); // Hi! My name is Lee

// Function 생성자 함수에 의한 Function 객체(함수) 생성
const func = new Function('x', 'return x * x');
console.log(typeof func); // function
console.dir(func);        // ƒ anonymous(x)

// Array 생성자 함수에 의한 Array 객체(배열) 생성
const arr = new Array(1, 2, 3);
console.log(typeof arr); // object
console.log(arr);        // [1, 2, 3]

// RegExp 생성자 함수에 의한 RegExp 객체(정규 표현식) 생성
const regExp = new RegExp(/ab+c/i);
console.log(typeof regExp); // object
console.log(regExp);        // /ab+c/i

// Date 생성자 함수에 의한 Date 객체 생성
const date = new Date();
console.log(typeof date); // object
console.log(date);        // Mon May 04 2020 08:36:33 GMT+0900 (대한민국 표준시)

생성자 함수

• 동일한 프로퍼티를 갖는 객체를 여러개 생성하는 경우 객체 리터럴 방식이 비효율적 (코드 중복)
• 생성자 함수를 사용하여 구조가 동일한 객체 여러 개를 간편하게 생성 가능

// 생성자 함수
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는 객체 자신의 프로퍼티나 메서드를 참조하기 위한 자기 참조 변수

• js 에서는 일반 함수와 동일한 방법으로 생성자 함수 정의
• new 연산자와 함께 호출하면 해당 함수는 생성자 함수로 동작 (new없으면 일반 함수)

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

• 생성자 함수 역할 : 인스턴스 생성, 생성된 인스턴스 초기화
• 생성자 함수 에서 인스턴스 값 반환하지 않아도 자바스크립트 엔진이 암묵적으로 인스턴스 생성하고 반환
• 생성 과정

1. 인스턴스 생성과 this바인딩

바인딩 이란? 식별자와 값을 연결하는 과정, this 바인딩이란 this가 가리킬 객체를 바인딩 하는 것
런타임 이전에 암묵적으로 빈 객체가 생성되고 this에 바인딩

3. 인스턴스 초기화

   코드 실행 시 초기화 됨

4. 인스턴스 반환

   바인딩 된 this가 암묵적으로 반환
   명시적으로 객체 return this 반환 무시됨

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

• 함수도 객체이므로 내부 슬롯과 내부 메서드를 가지고 있습니다.
• 함수와 객체 다른점 : 일반 객체는 호출 불가능, 함수 객체는 호출 가능
• 함수 객체는 일반 객체의 내부슬롯, 내부 메서드에 함수 객체를 위한 내부슬롯과 내부메서드를 추가로 가지고 있음
• [[ Environment ]] , [[ Formal Parameters ]] : 함수 객체 위한 내부 슬롯
• [[ Call ]], [[ Construct ]] : 함수 객체 위한 내부 메서드
• 모든 함수 객체는 내부 메서드 [[ Call ]] 을 가지고 있으므로 호출 가능
• 모든 함수 객체가 [[ Construct ]] 가지지는 않음 (= 생성자 일 수 있고 아닐 수 있다.)
• 함수 호출 시 [[ Call ]] 호출, new로 생성자 호출 시 [[ Construct ]] 호출

construct, non-construct 구분

• 자바스크립트 엔지이 함수 정의를 평가하여 구분
• construct : 함수 선언문, 함수 표현식, 클래스 (= 일반 함수)
• non-construct : 메서드, 화살표 함수
• 메서드는 ES6의 메서드 축약 표현만 메서드로 인정합니다.

new 연산자

• new연산자와 함께 함수 호출 시 내부 메서드 [[ Construct ]] 호출 됨
• new 없이 생성자 함수 호출 시 [[ Call ]]이 호출 됨
• 생성자 함수를 [[ Call ]] 로 호출 시 함수 내부의 this는 전역 객체 window를 가리킨다.

// new 연산자와 함께 호출하지 않으면 생성자 함수로 동작하지 않는다.
// 즉, 일반 함수로서 호출된다.
const circle3 = Circle(15);

// 일반 함수로서 호출된 Circle은 반환문이 없으므로 암묵적으로 undefined를 반환한다.
console.log(circle3); // undefined

// 일반 함수로서 호출된 Circle내의 this는 전역 객체를 가리킨다.
console.log(radius); // 15

new.target

• 생성자 함수가 new 없이 호출 되는 것을 방지하기위해 ES6에서 도입된 프로퍼티, 메타 프로퍼티라고 부름
• new 연산자와 함께 함수 호출 시 함수 내부의 new.target은 자기 자신 가리킨다. 반대는 undefined
• 스코프 세이프 생성자 패턴

// Scope-Safe Constructor Pattern
function Circle(radius) {
  // 생성자 함수가 new 연산자와 함께 호출되면 함수의 선두에서 빈 객체를 생성하고
  // this에 바인딩한다. 이때 this와 Circle은 프로토타입에 의해 연결된다.

  // 이 함수가 new 연산자와 함께 호출되지 않았다면 이 시점의 this는 전역 객체 window를 가리킨다.
  // 즉, this와 Circle은 프로토타입에 의해 연결되지 않는다.
  if (!(this instanceof Circle)) {
    // new 연산자와 함께 호출하여 생성된 인스턴스를 반환한다.
    return new Circle(radius);
  }

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

// new 연산자 없이 생성자 함수를 호출하여도 생성자 함수로서 호출된다.
const circle = Circle(5);
console.log(circle.getDiameter()); // 10

참고

• 빌트인 객체 중 Object, Function 생성자 함수는 new 없어도 같은 결과 반환
• String, Number, Boolean은 new키워드 없으면 결과가 다름

const str = String(123);
console.log(str, typeof str); // 123 string

const num = Number('123');
console.log(num, typeof num); // 123 number

const bool = Boolean('true');
console.log(bool, typeof bool); // true boolean

const str = new String(123);
console.log(str, typeof str); // String {'123'} 'object'

const num = new Number('123');
console.log(num, typeof num); // Number {123} 'object'

const bool = new Boolean('true');
console.log(bool, typeof bool); // Boolean {true} 'object'