모던 자바스크립트 튜토리얼 part1 - 9.5

9.5 Extending built-in classes

내장 클래스도 상속이 가능하다.

// 메서드 하나를 추가합니다(더 많이 추가하는 것도 가능).
class PowerArray extends Array {
  isEmpty() {
    return this.length === 0;
  }
}

let arr = new PowerArray(1, 2, 5, 10, 50);
alert(arr.isEmpty()); // false

let filteredArr = arr.filter(item => item >= 10);
alert(filteredArr); // 10, 50
alert(filteredArr.isEmpty()); // false

위 예시에서 arr.filter()가 상속받는 클래스인 PowerArray를 반환한다. 그렇기 때문에 PowerArray에서 구현된 isEmpty()메서드를 사용할 수 있는 것이다.  물론, Symbol.species를 추가함으로써, map,filter와 같은 메서드를 호출할 때 만들어지는 객체의 생성자를 직접 지정 해줄수도 있다.

class PowerArray extends Array {
  isEmpty() {
    return this.length === 0;
  }

  // 내장 메서드는 반환 값에 명시된 클래스를 생성자로 사용합니다.
  static get [Symbol.species]() {
    return Array;
  }
}

let arr = new PowerArray(1, 2, 5, 10, 50);
alert(arr.isEmpty()); // false

// filter는 arr.constructor[Symbol.species]를 생성자로 사용해 새로운 배열을 만듭니다.
let filteredArr = arr.filter(item => item >= 10);

// filteredArr는 PowerArray가 아닌 Array의 인스턴스입니다.
alert(filteredArr.isEmpty()); // Error: filteredArr.isEmpty is not a function

No static inheritance in built-ins

앞서 나온 extends를 사용한 상속과 내장 객체간의 상속에는 차이가 있다. 바로 정적메서드는 상속받지 못한다는 점이다. Array는 Object로부터 상속받았는데, Object.keys는 인스턴스에서 사용할 수 없다. (프로토타입에 대한 얘기가 나오는데, 해당 부분을 다시 공부하고 살펴보는게 좋겠다.)

 

아래 그림만 보더라도 어느정도 감은 잡힌다.