programacion orientada a objetos en javascript

LOGOMsig. Ing. Robert Moreira [email protected]

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 JavaScript15. 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

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 LogoFuente:

https://es.wikipedia.org/wiki/TypeScript

Situación Actual

- Permite la implementación clásicade la POO, pero sin contar con laspalabras reservadas como class,extends, etc. Ni especificadoresde acceso (public, protected yprivate).

- Existe TypeScript que es unlenguaje de programación libre yde código abierto desarrollado porMicrosoft. Es un superconjunto deJavaScript, TypeScript extiende lasintaxis de JavaScript, por tantocualquier código JavaScriptexistente debería funcionar sinproblemas.

Situación Futura

- ECMAScript 6 extenderájavascript, por tanto esimportante estudiar POO basadaen javascript tradicional paraentender el lineamiento futuro dela 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 TypeScriptCó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>

12

34

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 tradicionalAgregació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

https://docs.google.com/document/d/1gpGGXszCd6ouXOLdrQepyQQ-T3IHPpKLVxpGHLs_MYE/edit?usp=sharing

programacion orientada a objetos en javascript

Software