Listado completo de tutoriales

ES6 - Herencia

Con ES6 también se ha agregado al lenguaje JavaScript sintaxis para facilitar el concepto de herencia entre clases.

Si queremos que una clase herede de otra debemos indicar en el momento que la declaramos mediante la palabra clave 'extends' el nombre de la clase padre:

class Cuadrado extends Figura {
}

Problema

Confeccionar una clase Persona que tenga como atributos el nombre y la edad. Al constructor llegan los datos personales y en otro método se imprimen.
Plantear una segunda clase Empleado que herede de la clase Persona. Añadir un atributo sueldo y los métodos constructor, imprimir y un método si debe pagar impuestos (sueldo mayor a 5000)

Posteriormente definir un objeto de la clase Persona y llamar a sus métodos. También crear un objeto de la clase Empleado y llamar a sus métodos.

<!DOCTYPE html>
<html>

<head>
    <title>Ejemplo de JavaScript</title>
    <meta charset="UTF-8">
</head>

<body>

    <script>
        class Persona {
            constructor(nombre, edad) {
                this.nombre = nombre;
                this.edad = edad;
            }

            imprimir() {
                document.write(`Nombre: ${this.nombre}<br>`);
                document.write(`Edad: ${this.edad}<br>`);
            }
        }

        class Empleado extends Persona {
            constructor(nombre, edad, sueldo) {
                super(nombre, edad);
                this.sueldo = sueldo;
            }

            imprimir() {
                super.imprimir();
                document.write(`Sueldo: ${this.sueldo}<br>`);
            }

            pagaImpuestos() {
                if (this.sueldo > 5000)
                    document.write(`${this.nombre} debe pagar impuestos<br>`);
                else
                    document.write(`${this.nombre} no debe pagar impuestos<br>`);
            }
        }


        const persona1 = new Persona('Juan', 44);
        persona1.imprimir();
        document.write('<hr>');

        const empleado1 = new Empleado('Juan', 44, 7000);
        empleado1.imprimir();
        empleado1.pagaImpuestos();
    </script>

</body>

</html>

La declaración de la clase Persona no tiene nada nuevo a lo visto en el concepto anterior, definimos 2 atributos y 2 métodos:

        class Persona {
            constructor(nombre, edad) {
                this.nombre = nombre;
                this.edad = edad;
            }

            imprimir() {
                document.write(`Nombre: ${this.nombre}<br>`);
                document.write(`Edad: ${this.edad}<br>`);
            }
        }

La clase Empleado hereda de la clase Persona (es decir que la clase empleado tiene como atributos su nombre, edad un método donde se inicializan dichos atributos y uno que los muestra):

        class Empleado extends Persona {

Mediante la sintaxis de extends indicamos que Empleado hereda de Persona.

En el constructor recibe como parámetros el nombre del empleado, su edad y el sueldo:

            constructor(nombre, edad, sueldo) {
                super(nombre, edad);
                this.sueldo = sueldo;
            }

Los atributos del nombre y edad se los pasamos al constructor de la clase padre mediante la palabra clave 'super' (es obligatorio hacer esto primero sino se genera un error sintáctico)

Lo mismo en el método imprimir del Empleado llamamos al imprimir de la clase padre mediante la palabra clave super para que se muestren el nombre y edad del empleado:

            imprimir() {
                super.imprimir();
                document.write(`Sueldo: ${this.sueldo}<br>`);
            }

No es obligatorio llamar primero al imprimir de la clase Empleado, podemos primero mostrar el sueldo y luego imprimir el nombre y la edad.

Finalmente en el método pagaImpuestos controlamos el contenido del atributo 'this.sueldo' para mostrar un mensaje:

            pagaImpuestos() {
                if (this.sueldo > 5000)
                    document.write(`${this.nombre} debe pagar impuestos<br>`);
                else
                    document.write(`${this.nombre} no debe pagar impuestos<br>`);
            }

Retornar