¿Cómo funciona la herencia en las funciones de constructor en JavaScript?

Aquí, discutiremos la herencia de una función constructora en JavaScript. Las funciones constructoras definen el prototipo de las propiedades que contendrá un objeto. Usando la función constructora, podemos crear un nuevo objeto después de pasar los parámetros requeridos.

Heredar una función constructora previamente definida significa usar los parámetros de la función definida previamente junto con agregar algunos parámetros nuevos a la función constructora recién definida. Para esto, necesitamos usar la función call() que nos permite llamar a una función definida en otro lugar en el contexto actual. 

Sintaxis:

myFunction.call( this, property1, property2, ... , propertyN )

Valores paramétricos:

  • myFunction: esta es una función constructora de la que queremos heredar los parámetros en una nueva función constructora.
  • this : los valores de los parámetros que usarán esta palabra clave al llamar a myFunction.
  • propiedad1, propiedad2, …, propiedadN: Los parámetros que se heredarán en la nueva función constructora.

Tipo de retorno: una función constructora o la función que ha heredado sus propiedades no tiene ningún tipo de retorno. Especifica el prototipo de las propiedades que contendrá un objeto que se crean a partir de esa función constructora.

Ejemplo: Aquí, creamos una función constructora ‘Empleado’. Se crea una nueva función constructora ‘Desarrollador’ que heredará las propiedades básicas de ‘Empleado’ y contendrá algunas propiedades nuevas. 

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title> 
        JavaScript inheritance of constructor functions 
    </title>
</head>
  
<body>
    <script>
        function Employee(name, age, gender, id) {
            this.name = name;
            this.age = age;
            this.gender = gender;
            this.id = id;
        };
  
        function Developer(name, age, gender, id, 
        specialization) {
  
            // Calling Employee constructor function
            Employee.call(this, name, age, gender, id);
  
            // Adding a new parameter
            this.specialization = specialization;
        }
        console.log(Employee.prototype);
        console.log(Developer.prototype);
    </script>
</body>
  
</html>

Producción:

Object
constructor: ƒ Employee(name, age, gender, id)
[[Prototype]]: Object

Object
constructor: ƒ Developer(name, age, gender, id, specialization)
[[Prototype]]: Object

Podemos notar que la función constructora ‘ Desarrollador ‘ hereda las propiedades de la función constructora ‘ Empleado ‘ junto con un nuevo parámetro ‘ especialización ‘. Aquí, llamamos a la función Empleado usando la función call() para pasar los parámetros requeridos a la función constructora Empleado. 

También podemos crear objetos usando estas funciones constructoras después de pasar los valores de las propiedades requeridas de ese objeto.

Sintaxis:

let Obj1 = new Object( parameters )

Ejemplo: este ejemplo describe el objeto creado con una nueva palabra clave para crear una instancia de un objeto que tiene una función de constructor.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title> 
        JavaScript inheritance of constructor functions
     </title>
</head>
  
<body>
    <script>
        function Employee(name, age, gender, id) {
            this.name = name;
            this.age = age;
            this.gender = gender;
            this.id = id;
        };
  
        function Developer(name, age, gender, id, specialization) {
  
            // Calling Employee constructor function
            Employee.call(this, name, age, gender, id);
  
            // Adding a new parameter
            this.specialization = specialization;
        }
  
        // Creating objects
        let Employee1 = new Employee("Suraj", 28, "Male", 564);
        let Developer1 = new Developer("Karishma", 31, "Female", 345,
            "Frontend Developer");
        console.log(Employee1);
        console.log(Developer1);
    </script>
</body>
  
</html>

Producción:

Employee {name: 'Suraj', age: 28, gender: 'Male', id: 564}
age: 28
gender: "Male"
id: 564
name: "Suraj"
[[Prototype]]: Object

Developer {name: 'Karishma', age: 31, gender: 'Female', id: 345, 
    specialization: 'Frontend Developer'}
age: 31
gender: "Female"
id: 345
name: "Karishma"
specialization: "Frontend Developer"
[[Prototype]]: Object

Podemos observar que la función constructora de Employee se hereda para crear una nueva función constructora Developer que se puede usar para crear objetos con nuevas propiedades junto con las propiedades heredadas del constructor padre.

Publicación traducida automáticamente

Artículo escrito por souvikm02 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *