El documento describe los conceptos básicos de programación orientada a objetos en JavaScript. Explica que JavaScript implementa la POO basada en prototipos en lugar de clases. También incluye ejemplos de cómo crear objetos literales y mediante constructores, añadir métodos y propiedades a instancias y prototipos, y usar propiedades y métodos estáticos. Finalmente, proporciona enlaces a diapositivas y ejercicios sobre estos temas de POO en JavaScript.
BREEAM ES Urbanismo como herramienta para un planeamiento sostenible - Miguel...
POO Javascript
1. 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
2. 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.
3. 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.
4. 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.
5. 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
6. 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
7. <!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.
8. <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Uso de clases estáticas</title>
<link rel="stylesheet"
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
9. <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Uso de objetos literales</title>
<link rel="stylesheet"
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
10. <script>
function Persona(nom,ape,anio){
this.nombre=nom;
this.apellido=ape;
this.anionacimiento=anio;
this.nombreCompleto = function(){
return this.nombre+" "+this.apellido;
}
}
var profesorx=new Persona("Charles","Xavier",1963);
profesorx.poder="telepatía";
var marvelgirl=new Persona("Jean","Grey",1963);
console.log(profesorx.poder);
console.log(marvelgirl.poder);
marvelgirl.nacimiento=function(){
return "Año de nacimiento: "+this.anionacimiento;
}
console.log(marvelgirl.nacimiento());
console.log(profesorx.nacimiento());
</script>
9. Añadir métodos o propiedades a la instancia y no al prototipo
Se esta añadiendo propiedad a un
objeto no a un prototipo, así el
profesorx tiene poder asignado, pero
no marvelgirl.
Se esta añadiendo método a un objeto
no a un prototipo, así el marvelgirl
tiene método para mostrar su año de
nacimiento, pero no profesorx.
La salida mostrada en pantalla mediante el
inspector de consola de navegador es:
Fuente:
https://www.youtube.com/watch?v=08-eG5De-kI
11. <script>
function Persona(nom,ape,anio){
this.nombre=nom;
this.apellido=ape;
this.anionacimiento=anio;
this.nombreCompleto = function(){
return this.nombre+" "+this.apellido;
}
}
Persona.prototype.estado="vivo";
Persona.prototype.modoAndar=function(medio){
return "Depende, si es el profesorX anda en silla de ruedas...";
}
var profesorx=new Persona("Charles","Xavier",1963);
var marvelgirl=new Persona("Jean","Grey",1963);
console.log("El modo de andar del personaje es:
"+profesorx.modoAndar());
</script>
10. Añadir métodos o propiedades al prototipo y no a la instancia
FORMA 1. Añadiendo métodos o
propiedades en el prototipo de la
función (el constructor)
FORMA 2. Añadir usando la palabra
reservada prototype en el formato:
<nombreprototipo>.prototype.propiedad_o_m
étodo …
Al añadir la función a prototype se optimiza el
uso de memoria por cada instancia que se
cree, ya que todas compartirán a la misma
función.
Fuente:
https://www.youtube.com/watch?v=08-eG5De-kI
http://www.programania.net/diseno-de-software/entendiendo-los-prototipos-en-javascript/
Un prototipo es un objeto del cual
otros objetos heredan propiedades
12. <script>
function Esfera(radio){
this.radio=radio;
Esfera.prototype.calculoArea=function(){
return radio*Esfera.pi*Esfera.pi;
}
}
Esfera.forma="Redonda";
Esfera.pi=3.1416;
circulo1=new Esfera(4);
console.log(circulo1.calculoArea());
console.log(Esfera.forma);
</script>
11. Propiedades estáticas 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
FORMA DE
CREAR UNA
PROPIEDAD
ESTÁTICA.
Al agregar un método público es correcto hacerlo así también:
this.calculoArea=function(){
return radio*Esfera.pi*Esfera.pi;
}
La forma anterior se denomina “Creación de función Fuera de la
definición del prototipo”, es correcta pero no eficiente pues se
crea un copia de la función en cada instancia que se cree de
Esfera. En contraparte, lo marcado en rojo hace que cada
instancia comparta la misma función.
Para acceder a un método o
propiedad estático se usa el nombre
del prototipo, en este caso Esfera.
13. 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
14. <script>
function Explosivo(parametros){
this.nombre=parametros.nombre;
this.componente=parametros.componente;
}
var explosivo1=new
Explosivo({nombre:'dinamita',componente:'nitroglicerina'});
var explosivo2=new
Explosivo({nombre:'geles',componente:'nitrocelulosa'});
explosivo2['nombre']="Otro";
explosivo1.nombre="Quien sabe";
console.log(explosivo1);
console.log(explosivo2);
</script>
12. Propiedades públicas en JavaScript (PARTE 2 DE 2)
Propiedades y métodos públicos se añaden a
través de la palabra reservada this.
Añadir métodos públicos con this no tiene
sentido para la eficiencia, pues lo que da
caracterización a cada instancia es sus
propiedades, en tanto que los métodos deben
ser compartidos. La definición correcta es algo
como:
Explosivo.prototype.detonar=function(){
return “Boom";
}
Un objeto también puede ser tratado como
un array asociativo:
nombreObjeto['nombrePropiedad']
15. 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.
16. 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.
17. 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.
18. <script>
function Mama(){
this.ledicetodoelmundo = "Señora";
var ledicenhijos = "Mamá";
};
var Papa=function(){
var _api = {};
_api.ledicetodoelmundo = "Señor";
var ledicenhijos = "Papá";
return _api;
}
var Hermana = function(){
var _api = {};
_api.edad;
function init(){
_api.edad = 19;
}
// Este metodo es publico
_api.metodoPublico = function(){
return "trae integrada a un montón de amigas";
}
// Metodo privado, solo accesible desde dentro del objeto
function metodoPrivado(){
//
}
init();
return _api;
};
var Auxilia = new Mama();
console.log(Auxilia.ledicetodoelmundo);
console.log(Auxilia.ledicenhijos);
var Wilfrido = new Papa();
console.log(Wilfrido.ledicetodoelmundo);
console.log(Wilfrido.ledicenhijos);
var Jimena = new Hermana();
console.log(Jimena.edad);
console.log(Jimena.metodoPublico());
</script>
15. Métodos públicos en JavaScript (definición interesante de
método público usando la palabra reservada var)
Fuente:
http://www.yporqueno.es/blog/programacion-orientada-a-objetos-en-javascript
Todo lo que no esté declarado
en this se ejecuta dentro de la
función pero no es accesible
desde fuera como en el caso de
ledicenhijos.
Hemos creado un objeto vacío llamado
_api que devuelve la función, y con él
todas las variables (y métodos) que
hayamos declarado dentro. El resto de
variables (ledicenhijos) siguen teniendo
como ámbito nuestro nuevo objeto pero no
son accesibles desde fuera de este.
es mas que aconsejable utilizar un método
init declarado al principio de nuestra clase
y llamado justo antes del final. De esta
manera nos aseguramos que cuando
accedemos al objeto éste está
perfectamente montado y podemos
acceder a sus variables y métodos sin
problemas.
Aunque en estos ejercicios
se demuestra el uso de una
variable _api para la
definición de propiedades y
métodos públicos, otra
forma sencilla de hacerlo es
con .this.
19. <script>
function PantallaLogueo(){
var _this=this;
var Estado="Sin definir";
function llamadaMetodoPrivado(){
_this.metodoPublicoAutenticar();
}
this.metodoPublicoAutenticar=function (){
Estado="Autenticando clase";
}
this.metodoPublicoAutenticarInstancia=function(){
//Estado="Autenticando instancia...";
llamadaMetodoPrivado();
}
this.getEstado=function(){
return Estado;
}
}
aplicacionX=new PantallaLogueo();
aplicacionX.metodoPublicoAutenticarInstancia();
console.log(aplicacionX.getEstado());
</script>
16. Métodos privados en JavaScript
Fuente:
http://www.yporqueno.es/blog/programacion-orientada-a-objetos-en-javascript
Son funcionalidades usadas desde dentro de una clase, sin que forme parte
(visible desde luego, porque esta en el trabajo interno de la misma) del
conjunto de métodos a los cuales puede acceder una instancia de clase.
Método NO accesible desde instancia (porque no tiene this. Al
inicio de function), no funcionaria por ejemplo si se prueba:
aplicacionX. LLamaraPublicoDesdePrivado();
En conclusión con esta definición se tiene un método privado.
Se esta llamando a un método público
metodoPublicoAutenticar desde un método
privado llamadaMetodoPrivado. Esto es posible
por var _this=this; que esta haciendo accesible
a this en los métodos privados a través de _this.
La única forma de que un método público acceda
a un método privado, es que este dentro del
contexto del constructor, es decir si fuera de las
llaves de PantallaLogueo se indica:
PantallaLogueo.prototype.metodoPublicoAutenticarInstancia2=function(){
llamadaMetodoPrivado();
}
La llamada al método
metodoPublicoAutenticarInstancia2 provocaría
error.
20. <script>
var Persona = function(options){
//Propiedades privadas
var nombre = options.name;
var anioNacimiento = options.birthYear;
//Método privado
var calcularEdad = function(){
var fecha = new Date();
return fecha.getFullYear() - anioNacimiento;
}
//Métodos Privilegiado
this.getEdad = function(){
return calcularEdad(); //Llamada al método privado
}
this.getNombre=function(){
return nombre;
}
}
//Instancia de persona
var p = new Persona({name:'Robert', birthYear:1983});
console.log('Hola '+p.getNombre()+' Tienes la tierna edad de '+p.getEdad()+' Años');
</script>
17. Métodos privilegiados en JavaScript
Fuente:
https://quizzpot.com/courses/aprendiendo-ext-js-3/articles/metodos-privados-y-metodos-privilegiados
Una representación práctica de los métodos
privilegiados son los métodos getter y setter, lo
mismos como en este caso al estar en la definición
del constructor tienen acceso a métodos y
propiedades privadas: calcularEdad, Nombre,
anioNacimiento.
21. <script>
function Terremoto(){
this.intensidad=5;
}
Terremoto.prototype.intensidad=7.8;
var abril16Ecuador= new Terremoto();
Terremoto.prototype.Pais="Ecuador";
console.log(abril16Ecuador);
</script>
18. Herencia: ¿Cómo funcionan los prototipos en JavaScript?
Fuente:
https://quizzpot.com/courses/aprendiendo-ext-js-3/articles/metodos-privados-y-metodos-privilegiados
1. Cuando se modifica un prototype se
aplica a todos los objetos instanciados.
Siempre que se añade un valor o una función
al prototype de una clase, se añade a todas
las instancias creadas antes o después, tal
como se muestra en el siguiente gráfico, en
donde en _proto_ se encuentra definido como
variables país e intensidad.
1. Cuando se modifica un prototype se aplica a todos los objetos instanciados.
Siempre que se añade un valor o una función al prototype de una clase, se añade a todas las
instancias creadas antes y después.
2. Al invocar un método o variable dentro del ámbito tiene más
prioridad lo que esta definido en el ámbito del constructor, sino lo
encuentra allí subirá al prototype a conseguir el método o variable,
por ejemplo, si se comenta la línea:
//this.intensidad=5;
Y se hace un
console.log(abril16Ecuador.intensidad);
Imprimirá por pantalla 7,8 pues buscará el valor en el prototipo
22. <script>
function Mascota(nombre){
this.nombre=nombre;
}
Mascota.prototype.comoLLamarlo=function(){
console.log("El nombre es: "+this.nombre);
}
function Gato(nombre,horasQueDuermeAlDia){
Mascota.prototype.constructor.call(this, nombre, horasQueDuermeAlDia);
this.horasQueDuermeAlDia=horasQueDuermeAlDia;
}
Gato.prototype=new Mascota();
Gato.prototype.constructor=Gato;
Gato.prototype.jugar=function(){
console.log("roer el mueble");
}
var gato1 = new Gato("Cochan",5);
gato1.jugar();
gato1.comoLLamarlo();
console.log(gato1.constructor);
</script>
19. Herencia en JavaScript con 3 pasos.
PASO 2. Para cuando un objeto del tipo Gato
no encuentre un método dentro de su
definición de constructor suba al prototype y
busque ese método.
Esta línea debe estar justos después de definir
la clase, sino no funciona el código
PASO 1. Línea que permita llamar al
constructor de la clase padre
This esta indicando que son accesibles las
propiedad de una instancia Gato en
particular, en este caso: nombre,
horasQueDuermeAlDia.
PASO 3. Si no se ubica esta línea con cada
instancia de la clase Gato usará el constructor
de la clase Mascota.
Justo después de sobreescribir el prototype
es donde hay que hacer esa corrección.
24. 20. Polimorfismo en JavaScript (PARTE 2 DE 3).
function MiApp(){
this.carro=null;
}
MiApp.AUTOMOVIL='AUTOMOVIL';
MiApp.CAMIONETA='CAMIONETA';
MiApp.prototype.crearCarro=function(){
this.actualizarEstado(MiApp.AUTOMOVIL);
}
MiApp.prototype.actualizarEstado=function(tipocarro){
if(this.carro===null || tipocarro!==this.carro.getTipoCarro()){
if(this.carro!=null)
{
this.carro.ingresarDatosCarro();
this.carro.ingresarDatosMantenimiento();
}
switch(tipocarro)
{
case MiApp.AUTOMOVIL:
this.carro=new CarroAutomovil();
break;
case MiApp.CAMIONETA:
this.carro=new CarroCamioneta();
break;
}
this.carro.retornarDatosaJason();
}
}
miapp_actualizar_estado_carro.js
function Carro(){
this._tipoCarro='';
}
Carro.prototype.setTipoCarro=function(tipocarro){
this._tipoCarro=tipocarro;
}
Carro.prototype.getTipoCarro=function(){
return this._tipoCarro;
}
Carro.prototype.ingresarDatosCarro=function(){
//Codigo con indicaciones para ingresar un carro
}
Carro.prototype.ingresarDatosMantenimiento=function(){
//Codigo con indicaciones para mantenimiento
}
Carro.prototype.retornarDatosaJason=function(){
//Codigo con indicaciones para retornar codigo JASON
}
carro.js
El polimorfismo asegura que todos los métodos que se
van a usar siempre van a estar disponibles, en este caso
los métodos están disponibles para instancias de tipo
CarroAutomovil y CarroCamioneta.
Este bloque de
código es
polimórfico puesto
que llama métodos
para una instancia
de tipo carro sin
importar si sean
de la clase
CarroAutomovil o
CarroCamioneta.
25. 20. Polimorfismo en JavaScript (PARTE 3 DE 3).
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.
26. 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
27. 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.
28. 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);
this.numeroHijos=numeroHijos;
return this;
}
mami.cuantosHijos=function(){
console.log(" tengo "+this.numeroHijos+" Hijos");
}
var miMami=Object.create(mami).init("Mamita",3);
miMami.presentarse();
miMami.cuantosHijos();
</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.
29. 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: '',
init: function(nombre){
this.nombre=nombre;
},
presentarse: function(){
console.log("Hola me llaman "+this.nombre);
}
};
var mami=Object.create(mujer,{
numeroHijos:{
get: function(){
return this.value;
},
set: function(newValue){
this.value=newValue;
}
},
init:{
value: function(nombre,numeroHijos){
mujer.init.call(this,nombre);
this.numeroHijos=numeroHijos;
return this;
}
},
cuantosHijos:{
value: function(){
console.log(" tengo "+this.numeroHijos+" Hijos");
}
}
});
var miMami=Object.create(mami).init("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);
this.numeroHijos=numeroHijos;
return this;
}
mami.cuantosHijos=function(){
console.log(" tengo "+this.numeroHijos+" Hijos");
}
var miMami=Object.create(mami).init("Mamita",3);
miMami.presentarse();
miMami.cuantosHijos();
</script>
Referencia adicional:
https://www.youtube.com/watch?v=UekLVqLQ24E
Usa object.create
totalmente para la
herencia
Usa object.create
parcialmente para
la herencia
30. 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