Herencia de clase en JavaScript

Herencia de clase en Javascript es una característica valiosa que permite la reutilización del código. Al utilizar la herencia de la clase, la clase infantil tendrá todo el acceso a las propiedades y métodos de la clase principal en un programa JavaScript. También le permite crear una clase infantil que herede la funcionalidad de la clase principal al tiempo que le permite anularla.

Este artículo discutirá la herencia de clase en JavaScript. También explicaremos Métodos de sombreado y Heredar métodos estáticos Usar la herencia de clase en JavaScript. Además, cada una de las secciones especificadas se demostrará con la ayuda de ejemplos. Entonces, comencemos!

Herencia de clase en JavaScript

El mecanismo en el que una clase hereda los métodos y propiedades de otra clase se conoce como Herencia de clase. El "Base" o el "Padre"La clase es la que se heredan los métodos y propiedades, mientras que el"Derivado" o el "Niño"La clase hereda la funcionalidad de la clase principal:

El "extender"La palabra clave se utiliza para establecer la herencia de clase entre la clase padre e infantil, y la"súperSe utiliza la palabra clave para acceder a los métodos y propiedades de la clase principal.

Ejemplo: herencia de clase en JavaScript

En el ejemplo dado a continuación, definiremos dos clases: Persona y Empleado, y cree la herencia de clase entre ellos utilizando el "súper" y "extender"Palabras clave.

En primer lugar, definiremos una clase de padre o base llamada "Persona"Tener un constructor y un método Showeame ():

persona de clase
constructor (nombre)
este.nombre = nombre;

mostrar nombre()
consola.Log ('mi nombre es' + esto.nombre);

En el siguiente paso, crearemos la clase infantil llamada "Empleado"Que tendrá un constructor y un"DisplayStatus ()" método. Establecer una relación de herencia de clase con el "Persona"Clase, tienes que usar el"extender"Palabra clave y especifique el nombre de la clase principal, que es"Persona" en nuestro caso. Después de hacerlo, el "Empleado"La clase heredará el"Persona"Métodos y propiedades de la clase.

Además, en el "Empleado"Constructor de clase, invocaremos"súper()"Para llamar al constructor del"Persona"Clase mientras pasa el"nombre" argumento:

El empleado de la clase extiende a la persona
constructor (nombre)
super (nombre);

displayStatus ()
consola.log ('Soy un empleado');

Ahora, crearemos un "empleado"Objeto del"Empleado"Clase y pasará"Jacobo"Como argumentos de nombre en el constructor:

dejar empleado = nuevo empleado ('Jack');

El creado "empleado"El objeto heredó todos los métodos y propiedades del"Persona" clase. Ahora, invocaremos el "mostrar nombre()"Método del"Persona"Clase con él:

empleado.mostrar nombre();

Por último, llamaremos al "DisplayStatus ()"Método del"EmpleadoObjeto de clase:

empleado.DisplayStatus ();

Eche un vistazo a la imagen dada a continuación del código proporcionado y su salida:

Como super () inicializa el "este"Objeto, debe invocarlo primero antes de acceder a él. Sin embargo, si intenta acceder "este"Antes de ejecutar Super (), le dará un error.

Por ejemplo, para inicializar el "edad"Propiedad del"Empleado"Clase en su constructor, llamaremos al"súper()"Primero y luego acceda al"este" objeto:

El empleado de la clase extiende a la persona
constructor (nombre, edad)
super (nombre);
este.edad = edad;

mostrar()
consola.log ("Soy un empleado");

getAge ()
devolver esto.edad;

Ahora, en el momento de crear el "empleado1"Objeto del"Empleado"Clase, pasaremos"Jacobo" como nombre y "29" como edad argumento al constructor:

dejar empleado1 = nuevo empleado ('Jack', 29);

Luego, después de la inicialización, invocaremos el "getage ()"Método de nuestra clase de empleados para ver el valor de la propiedad de edad:

consola.Log (Empleado1.getAge ());

Consulte la salida del ejemplo anterior:

Métodos de sombreado utilizando la herencia de clase en JavaScript

Los métodos que tienen el mismo nombre se pueden definir en clases de padres e hijos. En tal situación, cuando invocas el método de un objeto de clase infantil, sombreará el método presente en la clase principal.

Por ejemplo, el subterráneo "Alumno"La clase es la clase infantil del"Persona"Y está redefiniendo el"mostrar nombre()" método:

El estudiante de clase extiende a la persona
constructor ()
super ('Jack');

mostrar nombre()
consola.log ('mi nombre es jack');

Ahora el "mostrar nombre()"El método existe en la clase infantil y también en la clase principal. Entonces, cuando llamas al "mostrar nombre()" con el "Alumno"Class Object, invocará el método Showsame () definido en la clase infantil:

Deje que Student1 = New Student ();
estudiante1.mostrar nombre();

Aquí está el código de ejemplo con su salida:

Si desea invocar el método de la clase principal que tiene el mismo nombre, en la clase infantil, debe escribir "súper.MethodName (argumentos)". Por ejemplo, llamaremos al "mostrar nombre()"Método del"Persona"(Padre) Clase agregando la línea"súper.mostrar nombre()"En el método de nombre de la clase de niños ShoweMe ():

mostrar nombre()
súper.mostrar nombre();
consola.log ('función infantil');

Ahora, cuando el objeto de clase infantil invoca el "mostrar nombre()", Pasará por el cuerpo del método de la clase infantil Showeame (), luego llame al método de clase showsame () de la clase principal (). Después de completar la ejecución del método de clase showsame () de la clase principal, el control se retirará al método Showeame () de la clase infantil:

Deje que Student1 = New Student ();
estudiante1.mostrar nombre();

En la siguiente imagen, puede ver la salida del "mostrar nombre()" método:

Heredar miembros estáticos que usan herencia de clase en JavaScript

La clase infantil también puede heredar los métodos y propiedades estáticas de la clase principal. Permítanos ayudarlo a comprender este concepto demostrando un ejemplo.

En el siguiente ejemplo, definiremos una estática "Hola Mundo()"Método en el mismo"Persona"Clase principal que simplemente generará el"Hola Mundo"Cadena al llamarlo:

persona de clase
constructor (nombre)
este.nombre = nombre;

mostrar nombre()
consola.Log ('mi nombre es' + esto.nombre);

static helloworld ()
consola.log ('hola mundo');

En el siguiente paso, crearemos "Empleado"Como una clase infantil del"Persona", Para que pueda heredar el método y las propiedades de la clase principal, incluido el"Hola Mundo()"Método estático:

El empleado de la clase extiende a la persona
displayStatus ()
consola.log ('Soy un empleado');

A continuación, invocaremos el método estático helloworld () a través del "Empleado" clase:

Empleado.Hola Mundo();

El empleado.El método helloworld () se ejecutará igual que la persona.Método HelloWorld ():

Conclusión:

Puedes usar el extender palabra clave para crear una herencia de clase en JavaScript y el súper Palabra clave para referirse a la clase principal. Con el mecanismo de herencia de clase en JavaScript, la clase infantil puede acceder a los métodos y propiedades de la clase principal. Este artículo sobre la herencia de clase en JavaScript. También hemos explicado métodos de sombreado y heredando métodos estáticos utilizando la herencia de clase en JavaScript. Además, cada una de las secciones especificadas se demuestra con la ayuda de ejemplos.