클래스 확장

클래스 선언 또는 표현식에서 extends 키워드는 상위 클래스('기본 클래스'라고도 함)가 하위 클래스('서브클래스' 또는 '파생 클래스'라고도 함)의 프로토타입 역할을 하는 다른 클래스의 서브클래스로 작동하는 클래스를 만드는 데 사용됩니다.

class ParentClass {}
class ChildClass extends ParentClass {}

Object.getPrototypeOf( ChildClass );
> class ParentClass {}

이러한 서브클래스는 상위 클래스의 속성과 메서드를 상속합니다. 이를 통해 가능한 모든 사용 사례에 맞게 상위 클래스를 오버로드하거나 비슷한 목적을 위한 코드를 다시 구현하지 않고도 클래스의 핵심 기능을 확장하여 더 구체적인 목적을 제공할 수 있습니다.

하위 클래스는 상위 클래스에서 상속된 메서드를 자체적으로 구현할 수 있습니다.

class MyClass {
  constructor( myPassedValue ) {
    this.instanceProp = myPassedValue;
  }
  classMethod() {
    console.log( `The value was '${ this.instanceProp }.'`)
  }
}
class ChildClass extends MyClass {
  classMethod() {
    console.log( `The value was '${ this.instanceProp },' and its type was '${ typeof this.instanceProp }.'`)
  }
}

const myParentClassInstance = new MyClass( "My string." );
const mySubclassInstance = new ChildClass( 100 );

myParentClassInstance.classMethod();
> "The value type was 'string.'"

mySubclassInstance.classMethod();
> "The value was '100,' and its type was 'number.'"

super를 사용하여 하위 클래스의 컨텍스트에서 상위 클래스에 정의된 메서드를 호출할 수도 있습니다.

class MyClass {
  constructor( myPassedValue ) {
    this.instanceProp = myPassedValue;
  }
  classMethod() {
    console.log( `The value was '${ this.instanceProp }.'`)
  }
}

class ChildClass extends MyClass {
  subclassMethod() {
    super.classMethod();
    console.log( `The value type was '${ typeof this.instanceProp }.'`)
  }
}
const mySubclassInstance = new ChildClass( 100 );

mySubclassInstance.subclassMethod();
> The value was '100.'
> The value type was 'number.'

이전 예에서 본 것처럼 하위 클래스의 컨텍스트에서 constructor() 메서드가 생략되면 JavaScript의 암시적 생성자는 동일한 인수 집합과 함께 상위 생성자를 호출합니다. 그러나 서브클래스에 생성자가 있는 경우 this를 참조하기 전에 먼저 필요한 인수와 함께 super()를 호출해야 합니다.

class MyClass {
  constructor( myPassedValue ) {
    this.instanceProp = myPassedValue;
  }
  classMethod() {
    console.log( `The value was '${ this.instanceProp }.'`)
  }
}

class ChildClass extends MyClass {
    constructor( myPassedValue ) {
        super( myPassedValue );
        this.modifiedProp = myPassedValue + 50;
    }\
    subclassMethod() {
        super.classMethod();
        console.log( `The value type was '${ typeof this.instanceProp }.'`)
    }
}
const mySubclassInstance = new ChildClass( 100 );

mySubclassInstance;
> MyClass { instanceProp: 100, modifiedProp: 150 }

getter와 setter는 각각 값을 검색하고 정의하는 데만 사용되는 특수 메서드입니다. get 및 set 키워드를 사용하여 정의된 메서드를 사용하면 정적 속성인 것처럼 상호작용할 수 있는 메서드를 만들 수 있습니다.

class MyClass {
    constructor( originalValue ) {
        this.totalValue = 0;
    }
    set doubleThisValue( newValue ) {
        this.totalValue = newValue * 2;
    }
    get currentValue() {
        console.log( `The current value is: ${ this.totalValue }` );
    }
}
const myClassInstance = new MyClass();

myClassInstance;
> MyClass { totalValue: 0 }

myClassInstance.doubleThisValue = 20;

myClassInstance.currentValue;
> The current value is: 40

get 및 set 속성은 클래스의 프로토타입 속성에 정의되므로 클래스의 모든 인스턴스에서 사용할 수 있습니다.

이해도 테스트