JSIII - Class + Prototype
Clases
En informática, una clase es una plantilla para la creación de objetos de datos según un modelo predefinido. Las clases se utilizan para representar entidades o conceptos, como los sustantivos en el lenguaje.
// Definición Literal de un Objeto
var objeto = {
propiedad1: valor1,
...
propiedadN: valorN,
}
// Ejemplo
var instructor = {
nombre: 'Wanda',
apellido: 'Cirone',
edad: 26,
saludar: function() {
console.log('Hola, Wan');
},
hobbies: ['Fotografia', 'Dar clases']
}
Creación
function Persona() {
this.firstname = 'Wan';
this.lastname = 'Cirone';
}
var instructora = new Persona();
console.log(instructora);
¿Qué ven de raro en la función Persona()?
Por empezar no retorna nada, y además no está claro a qué hace referencia el keyword this.
Función constructora
function Persona(nombre, apellido){
this.nombre = nombre || 'Wanda'; // default operator
this.apellido = apellido || 'Cirone';
}
var sele = new Person('Selene', 'Bruno');
var ele = new Person('Elena', 'Gonzalez');
var wan1 = new Person('Wanda');
var wan2 = new Persona();
No pierdan de vista que estamos invocando una función, asi que podemos utilizar adentro todo los que sabemos de funciones.
Función constructora
Prototype
Todos los objetos tienen una referencia a otro objeto llamado proto
Prototype
var persona = {
nombre: 'Default',
apellido: 'Default',
getNombre: function() {
return this.nombre + ' ' + this.apellido;
}
}
var wan = {
nombre: 'Wanda',
apellido: 'Cirone'
}
// NO hacer esto en producción es sólo para demostración
// hay otras formas de asiganar prototipos.
wan.__proto__ = persona;
// Ahora podemos usar los métodos de `persona`
wan.getNombre();
Prototype
function Persona(nombre, apellido){
this.nombre = nombre || 'Wanda';
this.apellido = apellido || 'Cirone';
}
Persona.prototype.getNombre = function () {
return this.nombre + ' ' + this.apellido;
}
var sele = new Person('Sele', 'Bruno');
var ele = new Person('Ele', 'Gonzalez');
var wan = new Person('Wan');
sele.getNombre();
ele.getNombre();
wan.getNombre();
ES6 y Clases
class Persona {
constructor (nombre, apellido){
this.nombre = nombre,
this.apellido = apellido
}
saludar() {
console.log('Hola' + this.nombre);
}
}
var instructora = new Persona('Wan', 'Cirone');
instructora.saludar();
class Empleado extends Persona {
constructor (nombre, apellido, empleo, sueldo){
super(nombre, apellido);
this.empleo = empleo;
this.sueldo = sueldo;
}
}
var instructora = new Empleado('Wan', 'Cirone', 'Instructor', 100);
instructora.saludar();
El método super nos permite usar el constructor de la clase de la cual estamos heredando, en este caso de la clase Persona.
Herencia
WWC - 03 - JSIII - Class + Prototype
By Henry
WWC - 03 - JSIII - Class + Prototype
- 510