[javascript] 생성자 함수

▣ 객체를 생성하는 5가지 방법

• 객체리터럴
• Object 생성자 함수
• 생성자 함수
• Object.create 함수
• 클래스 (ES6)

▣ 생성자 함수

• new 키워드와 함께 호출하여 객체 인스턴스를 생성하는 함수
• 일반 함수와 동일한 방법으로 생성자 함수를 정의하고 new 키워드와 함께 호출하면 해당 함수는 생성자 함수로 동작한다.
  • 함수 객체 내부 메소드 중 construct 가 호출된다. (생성자함수)
• new 키워드가 없다면 일반 함수로 동작한다.
  • 함수 객체 내부 메소드 중 call 이 호출된다. (일반함수)
• 일반 함수와 생성자 함수에는 특별한 형식적 차이가 없으므로 생성자 함수는 일반적으로 첫문자를 대문자로 기술한다.

빌트인 생성자 함수

String, Object, Number, Boolean, Function, Array, Date, RegExp, Promise..

const book = new Object();
book.title = 'JavaScript';
book.read = function () {
    console.log("read a book");
}

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

STEP 1) 인스턴스 생성과 this 바인딩

• new 키워드와 함께 생성자 함수를 호출하면 빈 객체가 생성이된다.
• 그리고 생성자 함수 내부의 this 에 빈 객체가 바인딩이 된다.

  STEP 2) 인스턴스 초기화

• 빈 객체를 초기화한다.

  STEP 3) 인스턴스 반환

• 초기화가 완료된 인스턴스를 반환한다.

function Book(title) {
    // STEP 1) this에 빈객체가 바인딩 된다.
    console.log(this); // Book {}

    // STEP 2) 일련의 코드 흐름에 따라 인스턴스는 초기화된다.
    this.title = titie;
    this.read = function() {
        console.log("read a book");
    }

    // STEP 3) 암묵적으로 this를 반환한다. 마치 return this; 로 작동한다.
    // 그래서 return {} 등의 명시적인 return을 추가해선 안된다.
}

const book = new Book('Javascript');

▣ Call vs Construct (내부메소드)

• 함수는 객체이지만 호출이 가능하다는 점에서 일반 객체와 다르다.
• 일반 객체가 가지고 있는 내부 슬롯 과 내부 메소드를 가지고 있다.
• 그 외 함수만이 가지는 내부슬롯과 내부메소드를 추가로 가지고 있다.
  • 내부슬롯
    • Environment, FormalParameters
  • 내부 메서도
    • Call :: 일반 함수로 호출되면 객체 내부 메소드인 Call 이 호출된다.
    • Construct :: 생성자 함수로 호출되면 객체 내부 메소드인 Contruct 가 호출된다.
• 다른 별칭
  • callable :: 내부메소드 Call을 가지는 함수 객체 (모든 함수)
  • constructor :: 내부메소드 Construct 를 가지는 함수 객체
    • 함수선언문, 함수표현식, 클래스
  • non-constructor :: 생성자 함수로 호출하지 못하는 함수 객체
    • 메소드, 화살표 함수

// constructor
function test1() {}; // 함수선언문 (new test1())
const test2 = function () {}; // 함수표현식 (new test2())
const test3 = {
    func1: function() {}; // 일반 함수로 정의된 함수 ((new test3.func1()))
}

// non-constructor
const test4 = () => {}; // 화살표 함수
const test5 = {
    func2() {}; // ES6의 메소드 축약표현만 메소드로 인정
}