클래스 확장

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의 암시적 생성자는 상위 클래스를 호출합니다. 생성자와 함께 사용할 수 있습니다. 하지만 생성자에 클래스로 전달하려면 먼저 super()를 필요한 인수를 this로 참조해야 합니다.

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 속성은 클래스의 프로토타입 속성에서 정의됩니다. 클래스의 모든 인스턴스에서 사용할 수 있습니다.

이해도 확인

extends 키워드로 만든 클래스에 관한 올바른 문을 선택합니다.

확장되는 클래스의 하위 요소 역할을 합니다.
상위 클래스의 속성과 메서드를 상속합니다.
확장되는 클래스의 상위 요소 역할을 합니다.
It can't overwrite methods from a parent class.