Frontend/JS.info 정리

class - 내장 class의 특성

Creative_Lee 2022. 6. 24. 15:53

1. 내장 클래스 확장하기

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

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

let filteredArr = arr.filter(item => item >= 10)
 //filter 내장 메소드로 새로운 배열 리턴

console.log(filteredArr); // [10, 50]  새로운 배열의 값
console.log(filteredArr.isEmpty()); // false 
// 새롭게 리턴된 배열에서도 PowerArray의 메소드를 사용할 수 있다.

PowerArray 클래스로 생성한 arr 인스턴스의 내장 메서드를 사용했는데,

그에 대한 반환값도 PowerArray의 인스턴스인 모습입니다.

 

새로운 배열을 리턴해주는 메소드의 내부에서 객체의 constructor 프로퍼티를 사용하기 때문입니다.

console.log(arr.constructor === PowerArray); // true

위와 같은 동작 방식으로 PowerArray에 구현된 메서드를 사용할 수 있다는 장점이 생깁니다.


특수 정적 getter인 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);
console.log(arr.isEmpty()); // false

let filteredArr = arr.filter(item => item >= 10)

console.log(filteredArr.isEmpty()); // TypeError: filteredArr.isEmpty is not a function

더이상 filteredArr에는 isEmpty() 가 없습니다.


2. 내장 객체와 정적 메서드 상속

일반적으로 클래스가 다른 클래스를 상속받으면

정적 메서드는 Class 상속을 통해, 일반 메서드는 Class.prototype 객체 상속을 통해

모두 상속 받아 사용 가능했습니다.

 

하지만 내장 클래스는 다릅니다.

내장 클래스는 정적 메서드는 상속받지 못합니다.

 

그 이유는 간단합니다.

내장 객체끼리는 Class 상속이 이뤄지지 않습니다.

console.log(Array.prototype.__proto__ === Object.prototype) // true
console.log(Array.__proto__ === Object) // false

 

 

위와 같은 구조 때문에

인스턴스에서 Array.keys() 나 Date.keys() 같은 정적 메서드를 사용할 수 없는 것입니다.

 

 

 

 

쉬어가는 단계

 

'Frontend > JS.info 정리' 카테고리의 다른 글

class - mixin  (0) 2022.06.27
class - private, protected  (0) 2022.06.22
class - static method, property  (0) 2022.06.22
class - class extends (상속)  (0) 2022.06.21
class - class 기본 문법  (0) 2022.06.20