POO en JS
Programación Orientada a Objetos
¿Qué saben de POO?
JSON (Repaso)
JavaScript Object Notation
Formato ligero para el intercambio de datos.
Alternativa a XML como representación de objetos.
let objeto =
{
"propiedad": valor,
"propiedad2": valor2,
"arreglo": [val1, val2]
}
Programación Estructurada
En Programación Estructurada
POO
POO
Los programadores que emplean POO primero definen objetos para luego enviarles mensajes solicitándoles que realicen sus métodos por sí mismos.
Los objetos son entidades que tienen un determinado "estado", "comportamiento (métodos)" e "identidad".
Java
Objetos en JS
Cómo encarar un problema con POO
Javascript - Creemos un objeto
let dado = {}; //dado es un objeto
Les podemos agregar miembros dinámicamente.
dado.valor = 5;
En JS los objetos son como arreglos (el índice es un string)
console.log(dado["valor"]);//5
Objeto
Un objeto encapsula datos y comportamiento.
¿Dónde está el comportamiento?
dado.Tirar = function(){
this.valor = Math.floor((Math.random() * 6) + 1);}
https://codepen.io/webUnicen/pen/MoYmqz
Palabra this
La palabra clave this hace referencia al mismo objeto.
let dado1 = …
let dado2 = …
dado1.tirar() ;
dado2.tirar() ;
this en el código de tirar es “dado1” y “dado2” respectivamente.
Diseñando con POO
Diagramas
Los diagramas se utilizan para
Diagrama de Clases
Diagrama de UML.
Muestra las clases, sus atributos, operaciones (o métodos), y las relaciones entre los objetos.
Métodos
Miembros (atributos)
Clase
Clases
TBC...
Dado
Factory Functions
Funciones fábrica
Ok! Tengo un objeto con comportamiento. Pero yo tenía dos dados, no voy a copiar el JSON entero muchas veces!
Hago una función que me fabrica dados:
function crearDado() {
let d = {
"value":1,
"Tirar" : function() {
this.value...;
return this.value;
}
};
return d;
};
let d1 = crearDado();
d1.Tirar();
https://codepen.io/webUnicen/pen/MoYvaj
Let’s Work
Re armemos el juego de dados
Función constructora
Otra forma de escribir lo mismo
Función Constructora
Función Constructora
let Dado = function (initial) {
this.value = initial;
this.Tirar = function() {
this.value...;
return this.value;
};
};
let d1 = new Dado(1);
d1.Tirar(); // "Nacho"
No olvidar el new!!!
Siempre usar this!
https://codepen.io/webUnicen/pen/eRmRwd
Let’s Work
Re armemos el juego de dados
Prototipo
Otra forma de escribir lo mismo
Repetición de código
Prototipo
Prototipo
Agregamos los miembros y métodos al prototipo.
function Dado () {
this.value = 1;
};
/*No hacer así. Tiene efectos colaterales difíciles de encontrar si value es un objeto (tipo no primitivo).
Dado.prototype.value = 1; //NO!
*/
Dado.prototype.Tirar = function() {
this.value = ...;
return this.value;
};
https://codepen.io/webUnicen/pen/gRbxry
Sólo a tus objetos
No modificar prototipos que no posees vos
Let’s Work
Re armemos el juego de dados
Closures (para tener privacidad)
Otra forma de escribir lo mismo
Usar JSON como clase
Usar JSON como clase
Podemos crear objetos JSON y devolverlos en el “constructor”.
function Dado (name) {
let value = 1; //variable dentro de este scope
return {
getValue: function() {return value;},
Tirar: function() {
value = Math.floor((Math.random() * 6) + 1);
...getElementById(name).src = "..."+value+"...";
}
}
};
https://codepen.io/webUnicen/pen/MoYvbJ
Let’s Work
Re armemos el juego de dados
Class (ES6)
Otra forma de escribir lo mismo
Creemos un objeto (ES6)
class Dado {� constructor(valor) {� this.valor = valor;� }�}�let dado = new Dado(5);�console.log(dado.valor);
Comportamiento
Un objeto encapsula datos y comportamiento.
¿Dónde está el comportamiento?
class Dado {� constructor(valor) {� this.valor = valor;� }� tirar(){� this.valor = Math.floor((Math.random() * 6) + 1);� }�}
https://codepen.io/webUnicen/pen/BZydxN
Instancias de Dado
Para crear dados tengo que llamar a new.
Esto llama al constructor, que en nuestro caso asigna el valor por parámetro a la variable valor del objeto.
let dado1 = new Dado(5);�let dado2 = new Dado(6);�console.log(dado1.valor);�console.log(dado2.valor);
Llamando funciones
let dado = new Dado(5);�dado.tirar();�console.log(dado.valor);
Let’s Work
Re armemos el juego de dados
Bibliografía
AHORA LES TOCA PRACTICAR :D