Extender clase en JavaScript

Las clases son una plantilla o modelo para crear objetos. Puede encapsular datos con código para trabajar con esos datos.

Las clases en JS se basan en prototipos, pero también tienen una sintaxis y una semántica que no se comparten con la semántica de clases de ES5.

En la publicación de hoy, aprenderemos a extender la clase en JavaScript.

Extender clase en JavaScript usando la palabra clave extiende

La palabra clave extiende puede derivar clases personalizadas y objetos integrados de las clases principales. Se utiliza en expresiones de clase o declaraciones de clase para crear una clase que es hija de otra.

Sintaxis:

class ChildClass extends ParentClass { /* Logic goes here */
}

Puede encontrar más información sobre extensiones en la documentación aquí.

Por ejemplo, tenemos una Clase principal que consta de la propiedad de nombre de la clase principal y un contador que almacena el valor numérico. ParentClass también contiene un método estático que muestra la instancia actual de la propiedad de nombre de la clase principal.

ChildClass amplía las propiedades de ParentClass. Al extender la clase principal, la clase secundaria puede acceder a todas las propiedades de la clase principal.

La palabra clave reservada super puede ejecutar llamadas de superconstructor y proporciona acceso a los métodos principales.

Ejemplo:

class ParentClass {
  constructor(counter) {
    this.name = 'ParentClass';
    this.counter = counter;
  }
  sayClassName() {
    console.log('Hi, I am a ', this.name + '.');
  }
}

const parent = new ParentClass(300);
parent.sayClassName();
console.log('The counter of this parent class is ' + parent.counter);

class ChildClass extends ParentClass {
  constructor(counter) {
    super(counter);
    this.name = 'ChildClass';
  }

  get counter() {
    return this.counter;
  }
  set counter(value) {
    this.childCounter = value;
  }
}

const child = new ChildClass(5);

child.sayClassName();
console.log('The counter of this parent class is ' + child.childCounter);

Hemos creado una instancia de clase principal que establece el contador en 300. Tan pronto como se genera la clase secundaria, actualiza el contador a 5.

La clase secundaria no tiene propiedad de contador. Se hereda de la clase padre.

Producción :

"Hi, I am a ", "ParentClass."
"The counter of this parent class is 300"
"Hi, I am a ", "ChildClass."
"The counter of this parent class is 5"

También puede acceder al código completo del ejemplo aquí.