POO Javascript

LOGO
Msig. Ing. Robert Moreira Centeno
mcrobertw@hotmail.com
Octubre de 2016
TEMA:
«JAVASCRIPT CON METODOLOGÍA ORIENTADA A OBJETOS»
1. Terminología básica de la POO
2. Relación de Javascript con la POO
3. Situación actual y futuro de Javascript
4. Activar la consola de depuración de Javascript
5. Tipos de objetos en Javascript (Notación basada en el constructor y notación literal)
6. EJEMPLO: Dar valores a objetos de javascript en notación basada en el constructor y notación literal
7. EJEMPLO: Clases estáticas en javascript
8. EJEMPLO: Objetos literales en Javascript para implementación de la POO
9. Añadir métodos o propiedades a la instancia y no al prototipo
10. Añadir métodos o propiedades al prototipo y no a la instancia
11. Propiedades estáticas en JavaScript
12. Propiedades públicas en JavaScript
13. Propiedades privadas en JavaScript
14. Métodos estáticos en JavaScript
15. Métodos públicos en JavaScript (definición interesante de método público usando la palabra reservada var)
16. Métodos privados en JavaScript
17. Métodos privilegiados en JavaScript
18. Herencia: ¿Cómo funcionan los prototipos en JavaScript?
19. Herencia en JavaScript con 3 pasos.
20. Polimorfismo en JavaScript.
21. Composición y agregación.
22. Herencia basada en objetos en JavaScript.
Descarga diapositivas y ejercicios en:
http://ouo.io/ZA4dbP

1. Terminología básica de la POO
Company LogoFuente:
https://developer.mozilla.org/es/docs/Web/JavaScript/Introducci%C3%B3n_a_JavaScript_orientado_a_objetos
Término Concepto Ejemplo
Clase Define las características del Objeto. El plano de un tipo de casa.
Objeto Una instancia de una Clase. Número de casas que se
construyan basadas en el plano.
Propiedad Una característica del Objeto, son valores. Color, precio venta, número de puertas.
Método Una capacidad del Objeto, son acciones que
realiza el objeto sobre sus propiedades.
Pintar, vender
Constructor Es un método llamado en el momento de la
creación de instancias.
Número de puertas
Herencia Una Clase puede heredar características de
otra Clase.
La clase casa es heredera de una
clase principal terreno que tiene
otras configuraciones (ubicación, el
tamaño, altimetría, planimetría y
dureza
Encapsulamiento Una Clase sólo define las características del
Objeto, un Método sólo define cómo se
ejecuta el Método.
Tiene que ver con aspectos técnicos
como son los especificadores:
public, private y protected
Abstracción La conjunción de herencia compleja, métodos,
propiedades que un objeto debe ser capaz
de simular en un modelo de la realidad.
Definir métodos y propiedades
adecuadas, por ejemplo no ubicar
el método caminar a una casa.
Existen
propiedades
sobre las que
actúa solamente
el constructor.

2. Relación de Javascript con la POO
Company Logo
Fuente:
http://gnoma.es/blog/programacion-basada-en-prototipos/
https://es.wikipedia.org/wiki/Programaci%C3%B3n_basada_en_prototipos
Hay más tipos de programación orientada a objetos, y es usada por lenguajes muy
conocidos. Es el caso de la programación basada en prototipos, y su lenguaje más conocido
es JavaScript.
Al ser una implementación de la POO basada en prototipos, la implementación clásica de la
POO con palabras reservadas como class y extends no existe, pero se modela para que se
parezca lo más posible.
Según la Wikipedia: Programación basada en prototipos es un estilo de programación
orientada a objetos en el cual, las “clases” no están presentes, y la re-utilización de procesos
(conocida como herencia en lenguajes basados en clases) se obtiene a través de la clonación
de objetos ya existentes, que sirven de prototipos, extendiendo sus funcionalidades.

3. Situación actual y futuro de Javascript
Company Logo
Fuente:
https://es.wikipedia.org/wiki/TypeScript
Situación Actual
- Permite la implementación clásica
de la POO, pero sin contar con las
palabras reservadas como class,
extends, etc. Ni especificadores
de acceso (public, protected y
private).
- Existe TypeScript que es un
lenguaje de programación libre y
de código abierto desarrollado por
Microsoft. Es un superconjunto de
JavaScript, TypeScript extiende la
sintaxis de JavaScript, por tanto
cualquier código JavaScript
existente debería funcionar sin
problemas.
Situación Futura
- ECMAScript 6 extenderá
javascript, por tanto es
importante estudiar POO basada
en javascript tradicional para
entender el lineamiento futuro de
la este lenguaje.
<script>
var fecha=new Date();
console.log(fecha.getFullYear());
function Persona(nom, ed){
this.nombre=nom,
this.edad=ed
}
juanMoreira=new Persona("juan",20);
console.log(juanMoreira);
</script>
El código de POO para JavaScript siempre debe
tener claras 2 cosas.
1) Todo es un objeto que deriva de la clase
genérica Object.
2) Para definir clases se usa function.

4. Activar la consola de depuración de Javascript
Company Logo
Con la tecla F12 en GOOGLE CHROME y MOZILLA, en OPERA en el menú “más
herramientas”->”Mostrar menú de desarrollo” para que aparezca la opción “desarrollo
en el menú.
GOOGLE CHROME
MOZILLA FIREFOX
OPERA

5. Tipos de objetos en Javascript (Notación basada en el constructor
y notación literal)
Company Logo
Objeto Notación con constructor Notación literal (tipos primitivos)
String var cadena_obj=new String("Esto es una cadena"); var cadena="Esto es una cadena";
Number var numero_obj= new Number(21); var numero=21;
Boolean var logico_obj=new Boolean(true); var logico=true;
Array var lista_obj=new Array(1,2,3,4); var lista=[1,2,3,4];
Object var objeto_constructor=new Object();
objeto_constructor.nombre='Robert';
objeto_constructor.edad=33;
var objeto_literal={'nombre':'Robert',edad:33};
Date var ahora=new Date();
La notación literal es una forma
de tener datos complejos, sin
identificar a que clase en
particular pertenecen.
Temas relacionados:
- Tema 8: Objetos literales

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tipos de objetos en javascript</title>
<link rel="stylesheet"
href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600"
type="text/css">
</head>
<body>
<script>
//Objetos asociados a los tipos primitivos
var cadena="Esto es una cadena";
var cadena_obj=new String("Esto es una cadena");
console.log(cadena);
console.log(cadena_obj);
var numero=21;
var numero_obj= new Number(21);
console.log(numero);
console.log(numero);
var logico=true;
var logico_obj=new Boolean(true);
console.log(logico);
console.log(logico_obj);
//Objetos compuestos
var lista=[1,2,3,4];
var lista_obj=new Array(1,2,3,4);
console.log(lista);
console.log(lista_obj);
var objeto_literal={'nombre':'Robert',edad:33};
var objeto_constructor=new Object();
objeto_constructor.nombre='Robert';
objeto_constructor.edad=33;
console.log(objeto_literal);
console.log(objeto_constructor);
//Objetos predefinidos del lenguaje
var ahora=new Date();
console.log(ahora);
console.log(Math);
</script>
</body>
</html>
6. EJEMPLO: Dar valores a objetos de JavaScript en notación
basada en el constructor y notación literal
Company Logo
index.php
Presionando la tecla F12 en el navegador, no
distingue tipo de datos primitivos ni para array ni
para object.

<!DOCTYPE html>
<html>
<head>
<title>Uso de clases estáticas</title>
href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600" type="text/css">
</head>
<body>
<script>
var ahora=new Date();
//Métodos
console.log('Año: '+ahora.getFullYear());
//Clases estáticas
var valorPi=Math.PI;
var valor=30.89;
var parteEntera=Math.floor(valor);
console.log("La parte entera de "+valor+" es "+ parteEntera);
</script>
</body>
</html>
7. EJEMPLO: Clases estáticas en javascript
Company Logo
index.php
Las clases estáticas como Math están definidas
para no instanciarse, se usan sus métodos
directamente como en este caso: Math.floor y
Math.pi

<!DOCTYPE html>
<html>
<head>
<title>Uso de objetos literales</title>
href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,4
00,600" type="text/css">
</head>
<body>
<script>
var objetoGenerico={
nombre:'Robert',
edad:33,
saludar: function(nombrePila){
console.log("Que hubo amigo "+nombrePila)
}
}
console.log(objetoGenerico);
objetoGenerico.saludar("Cachete");
</script>
</body>
</html>
8. EJEMPLO: Objetos literales en Javascript para implementación de
la POO
Company Logo
index.php
Aunque este bloque de código es
funcional , no representa en forma
estricta las características de la
POO, debido a:
- No hay instanciación de objeto
objetoGenerico.
- No existen especificadores de
acceso (public, private, protected)
para los campos nombre, edad,
saludar.
- Acceso y muestra de la variable
nombrePila que no esta definida en
ninguna parte una variable de clase
o instancia, como se definiría
normalmente en otros lenguajes de
programación basados en POO.
Temas relacionados:
- Tema 5: Tipos de objetos

12. Propiedades públicas en JavaScript (PARTE 1 DE 2)
Company Logo
1. new Persona() Esta creando un objeto genérico de la clase object, esto se puede demostrar
ejecutando el siguiente código.
if (explosivo4 instanceof Object)
alert ('ok');
En JavaScript todas las instancias no dejan de ser objetos del mismo tipo, pero lo que cambian es
el prototipo de cada una.
2. Esta asignando el prototipo de ese objeto creado la clase Persona (Persona.prototype). El
prototipo es algo que comparten todas las instancias de la misma clase.
Esa vinculación del prototipo de un objeto a la función constructora es la que va a permitir que la
instancia tenga que acceso a las propiedades y métodos de clase.
3. Se esta ejecutando la función constructora de la clase Persona.
4. Devuelve el objeto creado que de tipo object pero cuyo prototipo es de la clase constructora:
function persona(){
}
De manera que en la instancia ‘yo’, ya existe una referencia a ese nuevo objeto.
<script>
function persona(){
}
var yo=new Persona();
</script>
PROCESO DE JAVASCRIPT AL CREAR UNA CLASE E INSTANCIARLA

13. Propiedades privadas en JavaScript (parte 1 de 2)
Fuente:
http://www.typescriptlang.org/play/index.html
class Persona{
private edad:number=0;
dni:string;
nombre:string;
constructor(dni:string, nombre:string){
this.dni=dni;
this.nombre=nombre;
}
}
var yo:Persona = new Persona("1","Romeo");
var tu:Persona = new Persona("2","Julieta");
Código ingresado en TypeScript
Código retornado en JavaScript
en el sitio typescriptlang.org
var Persona = (function () {
function Persona(dni, nombre) {
this.edad = 0;
this.dni = dni;
this.nombre = nombre;
}
return Persona;
}());
var yo = new Persona("1", "Romeo");
var tu = new Persona("2", "Julieta");
La traducción realizada por lenguajes de Microsoft como TypeScript
acepta la escritura de métodos privados, aunque como se ve en el
ejemplo a la hora de traducirlo a javascript lo transforma en público a
través de this.

13. Propiedades privadas en JavaScript (parte 2 de 2)
Información adicional: Se pueden definir las variables que son pensadas como privadas con una nomenclatura
como: this._maneraDetonar, el guion bajo da a entender que su propósito es privado aunque a nivel técnico en
realidad es una propiedad pública.
<script>
function Explosivo(){
var maneraDetonar='correr';
this.maneraDetonar2='';
this.nombre='';
this.componentePrincipal='';
this.detalleExplosivo=function(nombre,componente){
this.nombre=nombre;
this.componentePrincipal=componente;
}
//Cualquier método que este fuera de esta sección no podrá acceder a la propiedad privada (variable local)
this.detonar2=function(){
return "Forma de detonar es: "+maneraDetonar;
}
}
Explosivo.prototype.detonar=function(){
return "Forma de detonar es: "+maneraDetonar;
}
var explosivo1=new Explosivo(); explosivo1.detalleExplosivo("dinamita","nitroglicerina");
console.log(explosivo1.detonar2());
console.log(explosivo1.detonar());
</script>
Salida en Pantalla
Este método puede acceder a la
propiedad maneraDetonar, pues
esta en la sección del constructor.
Este método NO puede
acceder a la propiedad
maneraDetonar, pues esta
fuera de la sección del
constructor.
Definición de
propiedad privada con
la palabra reservada
var.

14. Métodos estáticos en JavaScript
Fuente:
http://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=829:static-javascript-propiedades-y-
metodos-estaticos-de-clase-ejercicio-codigo-ejemplos-basicos-cu01148e&catid=78:tutorial-basico-programador-web-javascript-desde-
&Itemid=206
<script>
function Persona(){
if (Persona.numeroObjetos)
{Persona.numeroObjetos++;}
else {
Persona.numeroObjetos = 1;
}
// Metodo estatico de clase Persona
Persona.getCount = function(){
return 'Numero de personas '+Persona.numeroObjetos;
}
//Métodos de instancia
this.saluda=function(){
return 'Hola soy la persona Nro.: '+Persona.numeroObjetos;
}
};
// Acceso a método de instancia
var manolo = new Persona();
console.log(manolo.saluda());
var pepe = new Persona();
console.log(manolo.saluda());
// Acceso a método de clase
console.log(Persona.getCount());
</script>
Método asociado solo a la clase
y no a las instancias.
Método asociado a las
instancias.

20. Polimorfismo en JavaScript (PARTE 1 DE 3).
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script src="js/miapp_actualizar_estado_carro.js"></script>
<script src="js/carro.js"></script>
<script src="js/carro_automovil.js"></script>
<script src="js/carro_camioneta.js"></script>
<script>
var app=new MiApp();
app.crearCarro();
console.log(app);
console.log(app.carro);
app.actualizarEstado(MiApp.CAMIONETA);
console.log(app.carro);
</script>
</body>
</html>
1
2
3
4
index.php
Salida en ejecución

carro_automovil.js
carro_camioneta.js
function CarroAutomovil(){
}
CarroAutomovil.prototype = new Carro();
CarroAutomovil.prototype.constructor=CarroAutomovil;
function CarroCamioneta(){
}
CarroCamioneta.prototype = new Carro();
CarroCamioneta.prototype.constructor=CarroCamioneta;
Estas funciones son hechas nada más
para demostrar la capacidad de
instancias de estas clases en usar
métodos de la clase padre como:
- ingresarDatosCarro
- ingersarDatosMantenimiento.
- retornarDatosaJason.

21. Composición y agregación (parte 1 de 2).
Agregación
Definición
Es muy similar a la relación de Asociación
solo varía en la multiplicidad ya que en
lugar de ser una relación "uno a uno" es de
"uno a muchos".
Representación UML
Se representa con una flecha que parte de
una clase a otra en cuya base hay un
rombo de color blanco.
La ClaseA agrupa varios elementos del
tipo ClaseB.
Ejemplo
Tenemos una clase Agenda.
Tenemos una clase Contacto.
Una Agenda agrupa varios Contactos.
Fuente:
http://www.didierperez.com/2012/02/diagrama-de-clases-uml-agregacion-y-composicion/
<script>
function Agenda(){
this.contacto1=new Contacto('mama','casa');
this.contacto2=new Contacto('papa','casa');
}
function Contacto(nombre, direccion){
this.nombre=nombre;
this.direccion=direccion;
}
var agendaUsuario=new Agenda();
console.log(agendaUsuario);
</script>
La herencia, composición y agregación son tipos de
técnicas a las que yo llamo HERMANAS, digo esto,
porque son los medios de los leguajes extendidos
para POO (javascript) u orientados a POO (java)
para definir relaciones entre clases.
Composición y agregación en general son más
sencillas de implementar que la herencia jeje

21. Composición y agregación (parte 2 de 2).
Composición
Definición
Similar a la relación de Agregación solo que la
Composición es una relación mas fuerte. Aporta
documentación conceptual ya que es una "relación de
vida", es decir, el tiempo de vida de un objeto está
condicionado por el tiempo de vida del objeto que lo
incluye.
Representación UML
Se representa con una flecha que parte de una clase a
otra en cuya base hay un rombo de color negro.
La ClaseA agrupa varios elementos del tipo
ClaseB.
El tiempo de vida de los objetos de tipo ClaseB está condicionado
por el tiempo de vida del objeto de tipo ClaseA.
Ejemplo
Tenemos una clase Silla.
Un objeto Silla está a su vez compuesto por cuatro objetos del
tipo Pata.
El tiempo de vida de los objetos Pata depende del tiempo de
vida de Silla, ya que si no existe una Silla no pueden existir sus
Patas.
<script>
function Silla(patas){
this.patasSilla=new Array();
for (var indice in patas)
{
this.patasSilla[indice]=patas[indice];
}
}
function Pata(ubicacionPata){
this.ubicacionPata=ubicacionPata;
}
var patas=new Array(
new Pata("frontalizquierda"),
new Pata("frontalderecha"),
new Pata("traseraizquierda"),
new Pata("traseraderecha")
);
var sillaSala=new Silla(patas);
console.log(sillaSala);
</script>
Si no están
definidas las 4
patas no se crea la
silla.

22. Herencia basada en objetos en JavaScript – (parte 1 de 2)
<script>
function Mujer(nombre){
this.nombre=nombre;
}
Mujer.prototype.presentarse=function(){
console.log("Hola me llaman " +this.nombre);
}
function Mama(nombre, numeroHijos){
Mujer.prototype.constructor.call(this,
nombre);
this.numeroHijos=numeroHijos;
}
Mama.prototype=new Mujer();
Mama.prototype.constructor=Mama;
Mama.prototype.cuantosHijos=function(){
console.log(" tengo "+this.numeroHijos+"
Hijos");
}
var miMami=new Mama("Mamita",3);
miMami.presentarse();
miMami.cuantosHijos();
</script>
<script>
var mujer={
nombre: '',
init: function(nombre){
this.nombre=nombre;
},
presentarse: function(){
console.log("Hola me llaman "+this.nombre);
}
};
var mami=Object.create(mujer);
mami.numeroHijos='';
mami.init=function(nombre,numeroHijos){
mujer.init.call(this,nombre);
return this;
}
mami.cuantosHijos=function(){
console.log(" tengo "+this.numeroHijos+" Hijos");
}
var miMami=Object.create(mami).init("Mamita",3);
</script>
Código 1: Aproximación tradicional
Agregación: Aproximación usando Object.create, de esta
forma no es necesario usar el operador new
Al tratarse de una implementación basada en objetos,
no estoy representado clases, por ello no inicio con
mayúscula el nombre, sino en minúscula a diferencia
del código 1
Este método nos
permite trabajar
con objetos a
modo de clase y
crear copias a
través de el.

22. Herencia basada en objetos en JavaScript (usando las 2
formas de Object.create) – (parte 2 de 2)
Forma 1 Forma 2
<script>
var mujer={
nombre: '',
this.nombre=nombre;
},
}
};
var mami=Object.create(mujer,{
numeroHijos:{
get: function(){
return this.value;
},
set: function(newValue){
this.value=newValue;
}
},
init:{
value: function(nombre,numeroHijos){
return this;
}
},
cuantosHijos:{
value: function(){
}
}
});
</script>
<script>
var mujer={
nombre: '',
this.nombre=nombre;
},
}
};
var mami=Object.create(mujer);
mami.numeroHijos='';
mami.init=function(nombre,numeroHijos){
return this;
}
mami.cuantosHijos=function(){
}
</script>
Referencia adicional:
https://www.youtube.com/watch?v=UekLVqLQ24E
Usa object.create
totalmente para la
herencia
Usa object.create
parcialmente para
la herencia

LIBROS PARA LEER
https://docs.google.com/document/d/1gpGGXszCd6ouXOLdrQepyQQ-
T3IHPpKLVxpGHLs_MYE/edit?usp=sharing
Buscar en la columna FECHA la cadena “OCTUBRE DE 2016”
CONCLUSIÓN.
En este estudio de aproximadamente 1 mes, por fin entendí que javascript no es un lenguaje con
las características estrictas de un lenguaje de programación orientada a objetos (POO), sino que
tiene compatibilidades con la POO basadas en herencia simple, pues no permite herencia
múltiple.
Es bueno saber que existe la implementación tradicional a través de function y la implementación
usando el mecanismo object.create de javascript.
No existen implementaciones para herencia múltiple como los trait de php, todo se basa en
funciones.
Gratificantes temas!!!!, definitivamente la ingeniería en sistemas es un camino que se hará
gratificante caray… full tiempo en este curso jaja
26 de octubre del 2016

POO Javascript

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie POO Javascript

Ähnlich wie POO Javascript (20)

Mehr von Robert Moreira

Mehr von Robert Moreira (11)

POO Javascript