Расширить классы

Ключевое слово 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 }

Геттеры и сеттеры — это специальные методы, используемые исключительно для получения и определения значений соответственно. Методы, определенные с помощью ключевых слов 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.
Он действует как родительский класс, который расширяет.