클래스 확장

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는 검색 및 정의에만 사용되는 특수 메서드입니다. 값을 가져야 합니다. getset 키워드를 사용하여 정의된 메서드를 사용하면 마치 정적인 것처럼 상호작용할 수 있는 메서드를 만듭니다. 속성

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

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

이해도 확인

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

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