Prototype

LUISA VACA  

Front-End Developer 

 

@luisafvaca

Herencia con prototype

 

Ejemplos de la vida real

👤

Persona

  • Nombre: Luisa

  • Apellido: Vaca

  • Edad: 25

Persona es un concepto genérico

 

Ahora escribamos esto en Javascript


function Persona(nombre, apellido, edad){
  this.nombre = nombre;
  this.apellido = apellido;
  this.edad = edad;
}

Persona.prototype.presentarse = function(){
 console.log( 
    `Hola mi nombre es ${this.nombre} ${this.apellido} 
     tengo ${this.edad} de edad`
 );
}

¿Pero qué fue lo que escribimos? Hablemos de constructores!

Los constructores los podemos ver como:

  • Molde

  • Plano

  • Sello

Un constructor es una funcion que retorna objetos nuevos cada vez que es invocada

Las propiedades de dichos objetos son predefinidas en el constructor.

¿Cómo usar el constructor Persona?


function Persona(nombre, apellido, edad){
  this.nombre = nombre;
  this.apellido = apellido;
  this.edad = edad;
}

var persona1 = new Persona('Luisa', 'Vaca', 25); 
//{ nombre:'Luisa', apellido:'Vaca', edad:25 }

var persona2 = new Persona('Andres', 'Carreño', 26);
//{ nombre:'Andres', apellido:'Carreño', edad:26 }


var persona1 = new Persona('Luisa', 'Vaca', 25); 
//{ nombre:'Luisa', apellido:'Vaca', edad:25 }

persona1.presentarse();
// Hola mi nombre es Luisa Vaca 
// tengo 25 años de edad.


Operador new

Esto le dice al motor de Javascript que la función debe ejecutarse de una manera constructora

¿Pero qué está haciendo Javascript con el New?

function Persona(nombre, apellido, edad){
  //var this = {};
  this.nombre = nombre;
  this.apellido = apellido;
  this.edad = edad;
  //return this
}

var ob = {};

ob.name = 'Luisa';
ob.apellido = 'Vaca';
ob.edad = 25;

// console.log(ob);
//{name:'Luisa', apellido: 'Vaca', edad: 25}

Pero las personas podrían tener profesiones, esto es algo mas especifico...

 Profesiones :

 

  • 👷🏼  Bombero

  • 👮🏾  Policia

  • 💂🏻  Militar

Ahora escribamos esto en Javascript

Pero no olvidemos que los bomberos tambien son personas.

Title Text

function Bombero(nombre, apellido, edad, experiencia){
  Persona.call(this, nombre, apellido, edad);
  this.experiencia = experiencia
}

Bombero.prototype = Object.create(Persona.prototype);

var bombero1 = new Bombero('Paquita', 'Gallego', 25, 4)
/*{
    nombre:'Paquita', 
    apellido:'Gallego', 
    edad:25, 
    experiencia:4
   }
*/

¡Pero recuerden que Bombero tambien es una persona por ende se puede presentar!

Title Text

var bombero1 = new Bombero('Paquita', 'Gallego', 25, 4)
/*{
    nombre:'Paquita', 
    apellido:'Gallego', 
    edad:25, 
    experiencia:4
   }
*/

bombero1.presentarse()
// Hola mi nombre es Paquita Gallego 
// tengo 25 años de edad.

Presentacion

del bombero:

bombero1.presentarse()

Motor de JS:

¿Bombero tiene el metodo

presentarse?

Respuesta: No

Motor de JS:

¿El prototype de Bombero tiene el metodo

presentarse?

Respuesta: Si

Title Text

/*function Bombero(nombre, apellido, edad, experiencia){
  Persona.call(this, nombre, apellido, edad);
  this.experiencia = experiencia
}*/

Bombero.prototype = Object.create(Persona.prototype);

//var bombero1 = new Bombero('Paquita', 'Gallego', 25, 4)
/*{
    nombre:'Paquita', 
    apellido:'Gallego', 
    edad:25, 
    experiencia:4
   }
*/

Presentacion

del bombero:

bombero1.presentarse()

Motor de JS:

¿Bombero tiene el metodo

presentarse?

Respuesta: No

Motor de JS:

¿El prototype de Bombero tiene el metodo

presentarse?

Respuesta: Si

Esto es conocido como herencia encadenada o delegación

Creemos un metodo para bombero

Bombero.prototype.apagarFuego = function(){
    console.log(`
       👷🏼 ${this.nombre} está apagando el fuego 🚒  🔥  💦`
    )
}
Bombero.prototype.apagarFuego = function(){
    console.log(`
       👷🏼 ${this.nombre} está apagando el fuego 🚒  🔥  💦`
    )
}

var bombero2 = new Bombero('Camila', 'Díaz', 25, 4)
/*{
    nombre:'Camila', 
    apellido:'Díaz', 
    edad:25, 
    experiencia:4
   }
*/

bombero2.apagarFuego()
// 👷🏼 Camila está apagando el fuego 🚒  🔥  💦

Class ES6

class Persona{
 constructor(nombre, apellido, edad){
   this.nombre = nombre;
   this.apellido = apellido;
   this.edad = edad;
 }
 presentarse(){
  console.log(`hola mi nombre es ${this.nombre} 
    ${this.apellido} y tengo ${this.edad} de edad`
  );
 }
}

var persona1 = new Persona('Luisa', 'Vaca', 29)
/*{
 nombre: 'Luisa',
 apellido: 'Vaca',
 edad: 29
}*/
class Bombero extends Persona{
    constructor(nombre, apellido, edad, experiencia){
      super(nombre, apellido, edad);
      this.experiencia = experiencia;
    }

  apagarFuego(){
    console.log(`👷🏼 ${this.nombre} está apagando el fuego 🚒  🔥  💦`);
  }
}

var bombero1 = new Bombero('Paquita', 'Gallego', 25, 4);

bombero1.presentarse()
//Hola mi nombre es Paquita Gallego y tengo 25 años de edad

bombero1.apagarFuego()
// `👷🏼 Paquita está apagando el fuego 🚒  🔥  💦`

New

Sugar syntax o sintaxis de azucar

Class ES6 y Prototype, se comportan igual ✨

📕 Recursos para estudiar prototype:

 
  • https://github.com/getify/You-Dont-Know-JS/tree/master/this%20%26%20object%20prototypes​
  • ​https://medium.com/javascript-scene/common-misconceptions-about-inheritance-in-javascript-d5d9bab29b0a
  • https://www.youtube.com/watch?v=GhbhD1HR5vk&list=PL65pp6Tpk691OOxrSF9ZR9rw2ti3e8qwR

Done!

🚀