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
 1. Terminología básica de la POO

Término Concepto Ejempl Existen

propiedades
Clase Define las características del Objeto. El plano de o
un tipo de sobre las
casa. que actúa
Objeto Una instancia de una Clase. Número de casas que solamente el
se construyan basadas en el constructor.
plano.
Propiedad Una característica del Objeto, son
valores. Color, precio venta, número de
Métod Una capacidad del Objeto, son acciones Pintar,
puertas.
o que realiza el objeto sobre sus vender
propiedades.
Construct Es un método llamado en el momento Número de
or de la creación de instancias. puertas
Herenci Una Clase puede heredar características La clase casa es heredera de una
a de otra Clase. clase principal terreno que tiene
otras configuraciones (ubicación, el
tamaño, altimetría, planimetría y
dureza
Encapsulamient Una Clase sólo define las características Tiene que ver con aspectos
o del Objeto, un Método sólo define cómo técnicos como son los
se ejecuta el Método. especificadores: public, private
y protected
Abstracción La conjunción de herencia compleja, Definir métodos y propiedades
métodos, propiedades que un objeto debe adecuadas, por ejemplo no
ser capaz de simular en un modelo de la ubicar el método caminar a
realidad. una casa.
2. Relación de Javascript con la POO

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.

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

Situación Actual Situación Futura

- Permite la implementación clásica - ECMAScript 6 extenderá
de la POO, pero sin contar con las javascript, por tanto es
palabras reservadas como class, importante estudiar POO basada
extends, etc. Ni especificadores en javascript tradicional para
de acceso (public, protected y entender el lineamiento futuro de
private). la este lenguaje.
- Existe TypeScript que es un
lenguaje de programación libre y
de código abierto desarrollado por <script>
var fecha=new Date();
Microsoft. Es un superconjunto de
console.log(fecha.getFullYear());
JavaScript, TypeScript extiende la
sintaxis de JavaScript, por tanto function Persona(nom, ed){
cualquier código JavaScript this.nombre=nom,
existente debería funcionar sin this.edad=ed
}
problemas.
juanMoreira=new Persona("juan",20);
console.log(juanMoreira);

</script >

El código de POO para JavaScript siempre

debe
tenerTodo
1) claras
es2uncosas.
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

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 OPERA

MOZILLA
FIREFOX
 5. Tipos de objetos en Javascript (Notación basada en el
constructor y notación literal)

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(); var objeto_literal={'nombre':'Robert',edad:33};

objeto_constructor.nombre='Robert';
objeto_constructor.edad=33;
Date var ahora=new Date();

La notación literal es una

Temas relacionados: forma
de tener datos complejos, sin
- Tema 8: Objetos literales
identificar a que clase en
particular pertenecen.
 6. EJEMPLO: Dar valores a objetos de JavaScript en
notación basada en el constructor y notación literal
<!DOCTYPE html>
<html>
index.php <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> Presionando la tecla F12 en el navegador, no
//Objetos asociados a los tipos primitivos
var cadena="Esto es una cadena";
distingue tipo de datos primitivos ni para array ni
var cadena_obj=new String("Esto es una cadena");
console.log(cadena);
para object.
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>
7. EJEMPLO: Clases estáticas en javascript

<!DOCTYPE html> index.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());
Las clases estáticas como Math están definidas
//Clases estáticas para no instanciarse, se usan sus métodos
var valorPi=Math.PI; directamente como en este caso: Math.floor y
var valor=30.89; Math.pi
var parteEntera=Math.floor(valor);
console.log("La parte entera de "+valor+" es "+ parteEntera);
</script>

</body>
</html>
8. EJEMPLO: Objetos literales en Javascript para implementación
de la POO
index.html
<!DOCTYPE html>
<html> Temas relacionados:
<head> - Tema 5: Tipos de objetos
<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> Aunque este bloque de código es
<body> funcional , no representa en forma
<script> estricta las características de la
var objetoGenerico={ POO, debido a:
nombre:'Robert', - No hay instanciación de
edad:33, objetoGenerico.
objeto
saludar: function(nombrePila){ - No existen especificadores
console.log("Que hubo amigo "+nombrePila) acceso (public, private, protected)
de
} para los campos nombre, edad,
} saludar.
console.log(objetoGenerico); - Acceso y muestra de la
objetoGenerico.saludar("Cachete"); nombrePila que no esta definida
variable
</script> en
o instancia,
ninguna como
parte una se de
variable
</body> clase
normalmente
definiría en otros lenguajes de
</html> programación basados en POO.
9. Añadir métodos o propiedades a la instancia y no al
prototipo
<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); Se esta añadiendo propiedad a un
profesorx.poder="telepatía"; objeto no a un prototipo, así el
var marvelgirl=new Persona("Jean","Grey",1963); profesorx tiene poder asignado, pero
console.log(profesorx.poder); no marvelgirl.
console.log(marvelgirl.poder);
Se esta añadiendo método a un
marvelgirl.nacimiento=function(){ objeto no a un prototipo, así el
return "Año de nacimiento: "+this.anionacimiento; marvelgirl tiene método para mostrar
} su año de nacimiento, pero no
profesorx.
console.log(marvelgirl.nacimiento()); La salida mostrada en pantalla mediante
console.log(profesorx.nacimiento()); el
</script>
inspector de consola de navegador es:
 10. Añadir métodos o propiedades al prototipo y no a la
instancia
<script>
function Persona(nom,ape,anio){ Un prototipo es un objeto del cual
this.nombre=nom; otros objetos heredan propiedades
this.apellido=ape;
this.anionacimiento=anio;
this.nombreCompleto = function(){
return this.nombre+" "+this.apellido; FORMA 1. Añadiendo métodos o
} propiedades en el prototipo de la
} función (el constructor)

Persona.prototype.estado="vivo";
Persona.prototype.modoAndar=function(medio){
return "Depende, si es el profesorX anda en silla de
ruedas...";
} FORMA 2. Añadir usando la
var profesorx=new Persona("Charles","Xavier",1963); palabra reservada prototype en el
var marvelgirl=new Persona("Jean","Grey",1963); formato:
<nombreprototipo>.prototype.propiedad_o_m
console.log("El modo de andar del personaje es: étodo …
"+profesorx.modoAndar());
</script> 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.
11. Propiedades estáticas en JavaScript
Al agregar un método público es correcto hacerlo así
también:

this.calculoArea=function(){
<script> return radio*Esfera.pi*Esfera.pi;
function Esfera(radio){ }
this.radio=radio;
La forma anterior se denomina “Creación de función Fuera de la
Esfera.prototype.calculoArea=function(){ 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
return radio*Esfera.pi*Esfera.pi;
Esfera. En contraparte, lo marcado en rojo hace que cada
} instancia comparta la misma función.
}
Esfera.forma="Redonda";
FORM D
Esfera.pi=3.1416;
A E
PROPIED
CREAR UN
circulo1=new Esfera(4);
ESTÁTIC
AD A
console.log(circulo1.calculoArea());
A.
console.log(Esfera.forma);
</script> Para acceder a un método o
propiedad estático se usa el nombre
del prototipo, en este caso Esfera.
12. Propiedades públicas en JavaScript (PARTE 1 DE 2)

PROCESO DE JAVASCRIPT AL CREAR UNA CLASE E INSTANCIARLA

<script>
function persona(){

}
var yo=new Persona();
</script>
1. new Persona() Esta creando un objeto genérico de la clase object, esto se puede
demostrar
ejecutando ifel(explosivo4
siguiente código.
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.
 12. Propiedades públicas en JavaScript (PARTE 2 DE 2)
<script>
function Explosivo(parametros){ Propiedades y métodos públicos se añaden
this.nombre=parametros.nombre; a través de la palabra reservada this.
this.componente=parametros.componente;
} Añadir métodos públicos con this no tiene
sentido para la eficiencia, pues lo que da
var explosivo1=new caracterización a cada instancia es
Explosivo({nombre:'dinamita',componente:'nitroglicerina'}); sus propiedades, en tanto que los métodos
var explosivo2=new deben ser compartidos. La definición
Explosivo({nombre:'geles',componente:'nitrocelulosa'}); correcta es algo como:
explosivo2['nombre']="Otro"; Explosivo.prototype.detonar=function(){
explosivo1.nombre="Quien sabe"; return “Boom";
}
console.log(explosivo1);
console.log(explosivo2); Un objeto también puede ser tratado
</script> como un array asociativo:
nombreObjeto['nombrePropiedad']
 13. Propiedades privadas en JavaScript (parte 1 de
2)
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.

Código retornado en
Código ingresado en
JavaScript en el sitio
TypeScript
class Persona{ typescriptlang.org
private edad:number=0; var Persona = (function () {
function Persona(dni, nombre) {
dni:string; this.edad = 0;
nombre:string; this.dni = dni;
this.nombre = nombre;
constructor(dni:string, nombre:string){ }
this.dni=dni; return Persona;
this.nombre=nombre; }());
} var yo = new Persona("1", "Romeo");
} var tu = new Persona("2", "Julieta");

var yo:Persona = new Persona("1","Romeo");

var tu:Persona = new Persona("2","Julieta");

Fuente:
http://www.typescriptlang.org/play/index.html
 13. Propiedades privadas en JavaScript (parte 2 de
2)
<script> Definición de
function Explosivo(){ propiedad privada Salida en
var maneraDetonar='correr'; con la palabra
this.maneraDetonar2=''; Pantalla
reservada var.
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
this.detonar2=function(){
privada (variable local) Este método puede acceder a la
return "Forma de detonar es: "+maneraDetonar; propiedad maneraDetonar, pues
} esta en la sección del constructor.
}

Explosivo.prototype.detonar=function(){ Este método NO

return "Forma de detonar es: "+maneraDetonar; puede
acceder a la
}
var explosivo1=new Explosivo(); explosivo1.detalleExplosivo("dinamita","nitroglicerina");
propiedad
maneraDetonar, pues
console.log(explosivo1.detonar2()); fuera de la sección
esta
console.log(explosivo1.detonar()); del
constructor.

</script>

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.
 14. Métodos estáticos en JavaScript
<script>
function Persona(){
if (Persona.numeroObjetos)
{Persona.numeroObjetos++;} Método asociado solo a la
else { clase y no a las instancias.
Persona.numeroObjetos = 1;
}

// Metodo estatico de clase Persona Método asociad a las

Persona.getCount = function(){
return 'Numero de personas '+Persona.numeroObjetos;
instancia o
} s.

//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>
 15. Métodos públicos en JavaScript (definición interesante
de método público usando la palabra reservada var)
<script>
function Mama(){
this.ledicetodoelmundo = "Señora"; Todo lo que no esté declarado
var ledicenhijos = "Mamá";
}; en this se ejecuta dentro de la
var Papa=function(){ función pero no es accesible
var _api = {};
_api.ledicetodoelmundo = "Señor"; desde fuera como en el caso de
var ledicenhijos = "Papá"; ledicenhijos.
return _api;
}

var Hermana = function(){

var _api = {};
Hemos creado un objeto vacío llamado
_api.edad;
_api que devuelve la función, y con él
function init(){
_api.edad = 19;
todas las variables (y métodos) que
}
hayamos declarado dentro. El resto de
// Este metodo es publico
_api.metodoPublico = function(){
variables (ledicenhijos) siguen teniendo
}
return "trae integrada a un montón de amigas";
como ámbito nuestro nuevo objeto pero no
// Metodo privado, solo accesible desde dentro del objeto
son accesibles desde fuera de este.
function metodoPrivado(){
//
}

init();
es mas que aconsejable utilizar un método
};
return _api; init declarado al principio de nuestra clase
var Auxilia = new Mama();
y llamado justo antes del final. De esta
Aunque en estos ejercicios manera nos aseguramos que cuando
console.log(Auxilia.ledicetodoelmundo);
console.log(Auxilia.ledicenhijos); se demuestra el uso de una accedemos al objeto éste está
var Wilfrido = new Papa(); variable _api para la perfectamente montado y podemos
console.log(Wilfrido.ledicetodoelmundo);
console.log(Wilfrido.ledicenhijos); definición de propiedades y acceder a sus variables y métodos sin
var Jimena = new Hermana(); métodos públicos, otra problemas.
console.log(Jimena.edad);
console.log(Jimena.metodoPublico()); forma sencilla de hacerlo es
</script> con .this.
 16. Métodos privados en JavaScript
Son funcionalidades usadas desde dentro de una clase, sin que forme parte (visible desde
<script> luego, porque esta en el trabajo interno de la misma) del conjunto de métodos a
function PantallaLogueo(){
los cuales puede acceder una instancia de clase.
var _this=this;
var Estado="Sin definir";
Método NO accesible desde instancia (porque no tiene this.
function llamadaMetodoPrivado(){ Al inicio de function), no funcionaria por ejemplo si se prueba:
_this.metodoPublicoAutenticar(); aplicacionX. LLamaraPublicoDesdePrivado();
} En conclusión con esta definición se tiene un método privado.
this.metodoPublicoAutenticar=function (){
Estado="Autenticando clase"; Se esta llamando a un público
} método
metodoPublicoAutenticar desde
privado llamadaMetodoPrivado.
un Estométodo
es posible
this.metodoPublicoAutenticarInstancia=function(){
//Estado="Autenticando instancia...";
por var _this=this; que esta haciendo accesible
llamadaMetodoPrivado(); a this en los métodos privados a través de
} _this.

this.getEstado=function(){ La única forma de que un método público

return Estado; 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:
aplicacionX=new PantallaLogueo();
PantallaLogueo.prototype.metodoPublicoAutenticarInstancia2=function()
{ llamadaMetodoPrivado();
aplicacionX.metodoPublicoAutenticarInstancia(); } métod
console.log(aplicacionX.getEstado()); metodoPublicoAutenticarInstancia2
La llamada al o
</script> error. provocarí
a
 17. Métodos privilegiados en JavaScript

<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;
}
Una representación práctica de los métodos
//Métodos Privilegiado
privilegiados son los métodos getter y setter, lo
this.getEdad = function(){
mismos como en este caso al estar en la definición
return calcularEdad(); //Llamada al método privado
del constructor tienen acceso a métodos y
}
propiedades privadas: calcularEdad, Nombre,
anioNacimiento.
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>
 18. Herencia: ¿Cómo funcionan los prototipos en JavaScript?

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.
1. Cuando se modifica un prototype se
<script> aplica a todos los objetos instanciados.
function Terremoto(){ Siempre que se añade un valor o una
this.intensidad=5; función al prototype de una clase, se añade
} a todas las instancias creadas antes o
Terremoto.prototype.intensidad=7.8; después, tal como se muestra en el siguiente
var abril16Ecuador= new Terremoto(); gráfico, en donde en _proto_ se encuentra
Terremoto.prototype.Pais="Ecuador"; definido como variables país e intensidad.
console.log(abril16Ecuador);
</script>

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
 19. Herencia en JavaScript con 3 pasos.
<script>
function Mascota(nombre){ PASO 1. Línea que permita llamar al
this.nombre=nombre; constructor de la clase padre
}
This esta indicando que son accesibles
Mascota.prototype.comoLLamarlo=function(){ propiedad de una
las instancia Gato
console.log("El nombre es: "+this.nombre); particular, en en
} horasQueDuermeAlD
este caso: nombre,
ia.
function Gato(nombre,horasQueDuermeAlDia)
{ Mascota.prototype.constructor.call(this, nombre, horasQueDuermeAlDia);
this.horasQueDuermeAlDia=horasQueDuermeAlDia;
} PASO 2. Para cuando un objeto del tipo
Gato.prototype=new Mascota(); Gato no encuentre un método dentro de su
Gato.prototype.constructor=Gato; definición de constructor suba al prototype y
Gato.prototype.jugar=function(){ busque ese método.
console.log("roer el mueble");
Esta línea debe estar justos después de
}
definir la clase, sino no funciona el código
var gato1 = new Gato("Cochan",5);
gato1.jugar(); gato1.comoLLamarlo();

console.log(gato1.constructor);
</script> 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.
20. Polimorfismo en JavaScript (PARTE 1 DE 3).
index.php
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script src="js/miapp_actualizar_estado_carro.js"></script> 1
<script src="js/carro.js"></script> 2
<script src="js/carro_automovil.js"></script> 3
<script src="js/carro_camioneta.js"></script> 4
<script>
var app=new MiApp();
app.crearCarro();

console.log(app); Salida en
console.log(app.carro); ejecución

app.actualizarEstado(MiApp.CAMIONETA);
console.log(app.carro);
</script>
</body>
</html>
 20. Polimorfismo en JavaScript (PARTE 2 DE 3).
miapp_actualizar_estado_carro.js Este bloque de carro.js
function MiApp(){ código es
polimórfico puesto function Carro(){
this.carro=null;
que llama métodos this._tipoCarro='';
}
para una instancia
MiApp.AUTOMOVIL='AUTOMOVIL' }
de tipo carro sin
;MiApp.CAMIONETA='CAMIONETA'; importar si sean
de la clase Carro.prototype.setTipoCarro=function(tipocarro){
MiApp.prototype.crearCarro=function(){ CarroAutomovil o this._tipoCarro=tipocarro;
this.actualizarEstado(MiApp.AUTOMOVIL); CarroCamioneta. }
}
Carro.prototype.getTipoCarro=function(){
MiApp.prototype.actualizarEstado=function(tipocarro){ return this._tipoCarro;
if(this.carro===null || tipocarro!==this.carro.getTipoCarro()){ }
if(this.carro!=null)
{ Carro.prototype.ingresarDatosCarro=function(){
this.carro.ingresarDatosCarro(); //Codigo con indicaciones para ingresar un carro
this.carro.ingresarDatosMantenimiento(); }
}
Carro.prototype.ingresarDatosMantenimiento=function(){
switch(tipocarro) //Codigo con indicaciones para mantenimiento
{ }
case
MiApp.AUTOMOVIL:
this.carro=new CarroAutomovil(); Carro.prototype.retornarDatosaJason=function(){
break; //Codigo con indicaciones para retornar codigo JASON
case MiApp.CAMIONETA: }
this.carro=new CarroCamioneta();
break; 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
this.carro.retornarDatosaJason(); CarroCamioneta.
}
}
 20. Polimorfismo en JavaScript (PARTE 3 DE 3).

carro_automovil.js

function CarroAutomovil(){

}
CarroAutomovil.prototype = new Carro();
CarroAutomovil.prototype.constructor=CarroAutomovil; 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.
carro_camioneta.js
- retornarDatosaJason.

function CarroCamioneta(){

}
CarroCamioneta.prototype = new Carro();
CarroCamioneta.prototype.constructor=CarroCamioneta;
 21. Composición y agregación (parte 1 de
2).
Agregación
<script>
Definición function Agenda(){
this.contacto1=new Contacto('mama','casa');
Es muy similar a la relación de this.contacto2=new Contacto('papa','casa');
Asociación solo varía en la multiplicidad }
ya que en lugar de ser una relación "uno function Contacto(nombre, direccion){
a uno" es de "uno a muchos". this.nombre=nombre;
Representación UML this.direccion=direccion;
Se representa con una flecha que parte }
de una clase a otra en cuya base hay
var agendaUsuario=new Agenda();
un rombo de color blanco.
console.log(agendaUsuario);
</script>

La herencia, composición y agregación son tipos de

La ClaseA agrupa varios elementos técnicas a las que yo llamo HERMANAS, digo esto,
del tipo ClaseB. porque son los medios de los leguajes extendidos
para POO (javascript) u orientados a POO (java)
Ejemplo para definir relaciones entre clases.

Tenemos una clase Composicióny agregación en general son

Agenda. Tenemos una más sencillas de implementar que la herencia jeje
clase Contacto.
Una Agenda agrupa
varios Contactos.
 21. Composición y agregación (parte 2 de
2).
Composición Si no están
definidas las 4 patas
<script> no se crea la silla.
Definición
function Silla(patas){
Similar a la relación de Agregación solo que la
this.patasSilla=new Array();
Composición es una relación mas fuerte. Aporta
for (var indice in patas)
documentación conceptual ya que es una
{
"relación de vida", es decir, el tiempo de vida de
this.patasSilla[indice]=patas[indice];
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
function Pata(ubicacionPata){
a otra en cuya base hay un rombo de color negro.
this.ubicacionPata=ubicacionPata;
}

La ClaseA agrupa varios elementos del tipo var patas=new Array(

new Pata("frontalizquierda"),
ClaseB. new Pata("frontalderecha"),
El tiempo de vida de los objetos de tipo ClaseB está
new Pata("traseraizquierda"),
condicionado por el tiempo de vida del objeto de tipo ClaseA.
new Pata("traseraderecha")
Ejemplo
);
var sillaSala=new Silla(patas);
Tenemos una clase Silla.
console.log(sillaSala);
Un objeto Silla está a su vez compuesto por cuatro objetos
</script>
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.
 22. Herencia basada en objetos en JavaScript – (parte 1 de
2) Agregación: Aproximación usando Object.create, de esta forma
Código 1: Aproximación tradicional no es necesario usar el operador new
<script>
<script> var mujer={
function Mujer(nombre){ nombre: '',
this.nombre=nombre;
} init: function(nombre){
this.nombre=nombre;
Mujer.prototype.presentarse=function(){ },
console.log("Hola me llaman " +this.nombre);
} presentarse: function(){
console.log("Hola me llaman "+this.nombre);
function Mama(nombre, numeroHijos){ }
Mujer.prototype.constructor.call(this, };
nombre);
this.numeroHijos=numeroHijos; var mami= Object.create(m ujer);
} mami.numeroHijos='';
Mama.prototype=new Mujer(); mami.init=function(nombre,numeroHijos){ Este método nos
Mama.prototype.constructor=Mama; mujer.init.call(this,nombre); permite trabajar
Mama.prototype.cuantosHijos=function(){ this.numeroHijos=numeroHijos; con objetos a
console.log(" tengo "+this.numeroHijos+" modo de clase y
Hijos"); return this; crear copias a
} } través de el.
var miMami=new Mama("Mamita",3); mami.cuantosHijos=function(){
miMami.presentarse(); console.log(" tengo "+this.numeroHijos+" Hijos");
miMami.cuantosHijos(); }

</script> var Object.create( mami).init("Mamita",3);

miMami=
miMami.presentarse();
Al tratarse de una implementación basada en miMami.cuantosHijos();
objetos, no estoy representado clases, por ello no
inicio con mayúscula el nombre, sino en minúscula a </script>
diferencia del código 1
22. Herencia basada en objetos en JavaScript (usando las
2 formas de Object.create) – (parte 2 de 2)
Forma 1 Forma 2

<script> <script>
var mujer={ var mujer={
nombre: '', nombre: '',

init: function(nombre){ init: function(nombre){

this.nombre=nombre; this.nombre=nombre;
}, },

presentarse: function(){
Usa object.create presentarse: function(){
console.log("Hola me llaman "+this.nombre); totalmente para la console.log("Hola me llaman "+this.nombre);
} }
};
herencia };

var mami=Object.create(mujer,{ var mami=Object.create(mujer);

numeroHijos:{ mami.numeroHijos='';
get: function(){ mami.init=function(nombre,numeroHijos){
return this.value; mujer.init.call(this,nombre);
}, this.numeroHijos=numeroHijos;
set: function(newValue){
this.value=newValue; return this;
} }
},
mami.cuantosHijos=function(){
init:{ console.log(" tengo "+this.numeroHijos+" Hijos");
value: function(nombre,numeroHijos){ }
mujer.init.call(this,nombre);
Usa object.create
this.numeroHijos=numeroHijos; parcialmente para var miMami=Object.create(mami).init("Mamita",3);
return this; miMami.presentarse();
}
la herencia miMami.cuantosHijos() ;
},
</script>
cuantosHijos:{ value:
function(){
console.log(" tengo
"+this.numeroH
ijos+" Hijos");
}); }
}
var miMami=Object.create(mami).init("Mamita",3);
miMami.presentarse();
miMami.cuantosHijos();
</script>