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

Made with Slides.com