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

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

Object 생성자 함수

• 빌트인 생성자 함수를 이용해 객체(인스턴스)를 생성
• 특별한 이유가 없다면 그리 유용하진 않음

생성자 함수

• 객체 리터럴에 의해 의한 객체 생성은 생성의 재사용이 어려움
• 생성자 함수는 프로퍼티 구조가 동일한 객체 생성에 재사용 용이

function People(name) {
    this.name = name;
    this.greeting = function() {
        return `Hi. I'm ${name}.`
    };
}

const p1 = new People('dlwlrma');
const p2 = new People('BDNS');

p2.skill = function() {
    return 'Bouncy bouncy ~~~';
}

console.log(p1.greeting()); // Hi. I'm dlwlrma.
console.log(p2.greeting()); // Hi. I'm BDNS.
console.log(p2.skill()); // Bouncy bouncy ~~~

this

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

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

• 함수 내부 코드가 실행되는 런타임 이전에 빈 객체를 생성, this에 생성된 빈 객체를 바인딩
• 함수 내부 코드 실행(개발자가 정의한 인스턴스 초기화 실행)
• 인스턴스가 바인딩 된 this를 암묵적으로 반환
  • 명시적으로 return값에 다른 객체를 반환하면 this에 바인딩된 값이 무시되고 해당 객체 반환
  • return 값에 원시 값을 명시적으로 반환하면 무시되고 암묵적으로 this가 반환
  • 명시적인 return문은 생성자 함수의 기본 동작을 훼손하므로 반드시 생략해야 함

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

• 함수는 일반 객체가 할 수 있는 일을 모두 할 수 있지만 함수만이 가지는 내부 슬롯과 내부 메서드가 있음 → 호출
• 함수를 일반 함수로서 호출 시 내부 메서드 [[Call]] 호출 → callable 함수 객체
• 함수를 생성자 함수로서 호출 시 내부 메서드 [[Construct]] 호출 → contructor 함수 객체 / non-contructo 함수 객체
• 모든 함수 객체는 callable이지만 모두 contructor는 아님
  • constructor : 함수 선언문, 함수 표현식, 클래스
  • non-constructor : 메서드(ES6 메서드 축약 표현), 화살표 함수

new.target

• 생성자 함수가 new 연산자 없이 호출되는 것을 방지하기 위해 ES6부터 지원(IE는 지원 안됨)
• new.target : constructor인 모든 함수 내부에서 암묵적인 지역 변수처럼 사용됨. 메타 프로퍼티라 불림
• new 연산자와 함께 생성자 함수로서 호출되면 함수 내부의 new.target은 함수 자신을 가리킴. 그 외의 경우 undefined

function People(name) {
  if (!new.target) {
    return new People(name);
  }
    this.name = name;
}

• new.target을 지원하지 않는 상황이면 스코프 세이프 생성자 패턴을 사용

function People(name) {
  if (!(this instanceof People)) {
    return new People(name);
  }
  this.name = name;
}