모던 자바스크립트 딥다이브 스터디 #6-1 (CH 26 함수의 추가기능)

26장 함수의 추가기능

ES6이전의 문제점

ES6이전의 함수들은 다음의 문제들이 있었다.

ES6이전에 일반적으로 메서드라고 불리던 함수는 일반함수로 호출하는 것 뿐만 아니라 문법적으로 생성자 함수로 호출하는게 가능했다. 또한 콜백함수도 생성자 함수로 호출이 가능한 상태라 불필요한 프로토타입 객체를 생성하곤 했다.

ES6이후

이에 ES6부터는 함수를 사용목적에 따라 다음의 세가지 종류로 구별했다.

1. 일반 함수(constructor, prototype, super, arguments)
   • 이전의 함수들과 동일.
2. 메서드(super, arguments)
   • 메서드 축약표현으로 만든 함수들
3. 화살표 함수(…)
   • 화살표 문법으로 만든 함수들

메서드

ES6에서 메서드는 메서드 축약형으로만 생성된 메서드 객체를 말하게 된다.(이전까지는 그냥 객체에 바인딩된 함수를 일컫는 말이었다. ES6부터는 이런 함수는 일반 함수로 분류된다.)

• 이제 메서드는 non-constructor이다. 따라서 prototpye프로퍼티도 없고, 프로토타입 객체도 생성할 수 없다.
• 그리고 자신을 바인딩한 객체를 가리키는 내부 슬롯인 [[HomeObject]]를 갖는다. 이 슬롯을 통해 JS는 super()참조를 가능하게 한다.

const base = {
    name: 'Jo',
    sayHi() {
        return `Hi &{this.name}`; //축약형으로 만들어진 메서드
    }
};

const derived = {
    __proto__ : base, //프로토타입 객체를 base로 연결
    //sayHi는 메서드 축약형으로 만들어진 ES6이후의 메서드이다.
    //따라서 [[HomeObejct]] 슬롯을 갖는다.
    //[[HomeObject]]는 derived.prototype을 가리키고
    //super는 sayHi의 [[HomeObject]]의 프로토타입인 base.prototype을 가리킨다.
    sayHi() {
        return `${super.sayHi()}. how are you doing?`;
    }
};

console.log(derived.sayHi());

derived는 프로토타입을 base객체를 갖고 있고, base객체가 갖고 있는 sayHi()메서드를 super키워드를 이용해 사용할 수 있다.