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!
🚀
PROTOTYPE
By LUISA FERNANDA VACA CORREA
PROTOTYPE
- 1,952