Ampliar classes

A palavra-chave extends é usada em declarações ou expressões de classe para criar uma classe que age como uma subclasse de outra, com a classe pai (às vezes chamada de "classe base") servindo como o protótipo da classe filho (às vezes, chamada de "subclasse", ou "classe derivada").

class ParentClass {}
class ChildClass extends ParentClass {}

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

Essas subclasses herdam as propriedades e os métodos da classe mãe. Isso estende a funcionalidade principal de uma classe para disponibilizar sem sobrecarregar a classe pai para se adequar a todos os casos de uso possíveis, ou reimplementar código que serve a um propósito semelhante.

As classes filhas podem fornecer as próprias implementações dos métodos herdados. de uma classe pai:

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.'"

Você também pode chamar métodos definidos na classe pai no contexto da classe filha usando 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.'

Como visto nos exemplos anteriores, quando o método constructor() é omitido na no contexto de uma classe filha, o construtor implícito do JavaScript chama a com o mesmo conjunto de argumentos. No entanto, se houver na subclasse, ele precisa primeiro chamar super() junto com qualquer argumentos necessários antes de referenciar 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 }

Getters e setters são métodos especiais usados exclusivamente para recuperar e definir , respectivamente. Os métodos definidos usando as palavras-chave get e set permitem você cria métodos com os quais se pode interagir como se fossem estáticos propriedades.

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

As propriedades get e set são definidas na propriedade de protótipo da classe, e, portanto, estão disponíveis para todas as instâncias da classe.

Teste seu conhecimento

Selecione as afirmações verdadeiras sobre classes criadas com a palavra-chave extends.

Ele age como filho da classe que ela estende.

Ela herda as propriedades e os métodos da classe pai.

Ele atua como o pai da classe estendida.

It can't overwrite methods from a parent class.