Bogotá, Colombia
hola@jairofernandez.me

Herencia en javascript

Blog personal

Quiero dejar, este pequeño tutorial de como hacer uso de la herencia en javascript con el objetivo de no olvidar como hacerlo :D, diré que básicamente, se hará a través de prototipos. Supongamos que tenemos una clase Profesor, que hereda de la clase Persona:

Iniciemos creando la clase Persona

function Person(name, age){
   this.name = name;
   this.age = age;
}

Y ahora creemos la clase Profesor

function Teacher(name, age, subject){
   this.name = name;
   this.age = age;
   this.subject = subject;
}

Si, analizamos ambas clases (bueno, funciones!), notamos que cualquier profesor tiene en común con la clase Persona, el nombre y la edad, podemos agregar al prototipo de Profesor el prototipo de Persona, así

Teacher.prototype = Object.create(Person.prototype);
Teacher.prototype.constructor = Teacher;

Nótese, que no hicimos un new Person(), ya que no queremos una instancia de Person, tan solo su prototipo, vamos a refactorizar la clase Profesor

function Teacher(name, age, subject){ 
   Person.apply(this, arguments); // arguments se puede escribir [name, age, subject]
}

Bien, hemos hecho uso de un método del objeto función de javascript llamado apply, que nos permite hacer una invocación de la función, pasándole un contexto y un array (a diferencia del método call, que recibe el contexto y los argumentos uno a uno).

Ahora validemos que Profesor, realmente esté heredando de Persona.

var profe = new Teacher('Pepito Pérez', 32, 'Español');
console.log(profe instanceof Person); // Devuelve true
console.log(profe instanceof Teacher); // Devuelve true

Ahora, validemos la propiedad __proto__ de la instancia “profe”

console.log(profe.__proto__); // Devuelve las propiedades de Person

La salida de la consola, nos mostrará que Profesor tiene las propiedades “name” y “age”, Aunque no se lo hallamos definido a Profesor, si agregamos un método a Persona, debería quedar accesible al objeto “profe”, que es una instancia de Profesor

Person.prototype.presentation = function(){
  display(`Mi nombre es ${this.name}`);
};

Ahora, podemos usar la función

profe.presentation(); // salida: 'Mi nombre es Pepito Pérez'

 

 

 

Deja un comentario

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.