12 - Objetos

El modelo de objetos en JS
Índice
 Orientación a objeto
 Propiedades y métodos
 Trabajando con objetos
 Relación con la GUI
 Relaciones entre objetos
 Diagrama de clases
 Los prototipos
 NOTA IMPORTANTISIMA
 Concepto de clase

 Ejemplos
 Prácticas

ALBERT BASSONS 2
Orientación a objeto

• La orientación a objeto es un paradigma de programación

que permite modelar con detalle el mundo real.

• Puede representar cualquier entidad física o abstracta que

nos podamos imaginar, ajustando la calidad de representación
al nivel de abstracción con el que queramos trabajar.

NOTA: comprender todos los mecanismos de la orientación a objeto

requiere un curso completo de programación orientada a objetos.

ALBERT BASSONS 3
Orientación a objeto
• Podemos usar los objetos para representar todo tipo de
cosas:

• Entidades físicas: tigre, coche, avión.

• Entidades conceptuales: proceso industrial, partida de

parchís.

• Entidades software: lista, cola, pila, árbol binario.

ALBERT BASSONS 4
 Orientación a objeto

Objeto escenario

Objeto
marcador

Objetos mosca

ALBERT BASSONS 5
 Orientación a objeto Objetos mano

Objeto tapete

Objeto baraja
Objeto
marcador

Objetos carta

ALBERT BASSONS 6
Orientación a objeto
• Los dos ejemplos anteriores son dos juegos realizados con
ActionScript 3 de forma orientada a objeto.

• Además de los tipos mencionados, existen también instancias

de Partida, Jugador, MovieClip…

• Los objetos, además de representar entidades del mundo real,

pueden estar relacionados entre sí e interactuar.

• Como iremos diciendo en estas transparencias, los objetos

disponen de propiedades (la carta tiene número, color,
imagen…) y de métodos (la carta se puede tirar, de la baraja se
puede robar o la mano se puede ordenar).

ALBERT BASSONS 7
Orientación a objeto en JS

• En JavaScript, todo se representa mediante objetos: una

cadena de texto, un array, un número, una fecha, incluso
una función.

• También veremos que los objetos HTML que recuperamos

desde el documento también son objetos, así como los
estilos de dichos objetos (la propiedad style).

ALBERT BASSONS 8
Propiedades y métodos
• Todo objeto dispone de propiedades y métodos:

• Las propiedades son los valores asociados al objeto.

• Los métodos son las acciones que pueden realizar.

• Si queremos saber qué podemos hacer con objetos de tipos que

ya vienen con JavaScript, debemos consultar su interfaz.

• En la transparencia siguiente se encuentra la interfaz

HTMLFormElement, indicando qué propiedades y qué métodos
tienen los objetos formulario HTML.

ALBERT BASSONS 9
Propiedades y métodos
Es un tipo de
HTMLElement

propiedades

métodos

ALBERT BASSONS 10
Ejemplo

ALBERT BASSONS 11
Creando nuestros objetos

• Cuando creemos nuestros propios tipos de objeto, tanto las

propiedades como los métodos necesarios para representarlo
dependerán del grado de abstracción que necesitemos.

• Ejemplo: tanto un programa para un concesionario de coches

como un videojuego de carreras trabajan con objetos de tipo
coche. Sin embargo la información que gestionan es diferente.

ALBERT BASSONS 12
Propiedades
• Las propiedades de los objetos de tipo Coche pueden ser:
marca, modelo, peso, longitud…

• Todos los coches tienen las mismas propiedades, pero éstas

tienen valores diferentes.

ALBERT BASSONS 13
Métodos
• Los métodos de los objetos de tipo Coche pueden ser: acelerar,
frenar, girar…

• Todos los coches pueden realizar las mismas acciones, aunque

es posible que las realicen de forma diferente debido a las
diferencias en los valores de sus propiedades (el Ferrari acelera
más rápidamente que el Fiat).

ALBERT BASSONS 14
Construyendo objetos
• En Javascript, generalmente definiremos constructores para
poder crear objetos.

• Sin embargo, JS también nos da la libertad de crear objetos

genéricos y añadir o quitar propiedades y métodos sobre la
marcha (no recomendado).

• En el ejemplo siguiente creamos un objeto genérico ‘coche’ y le

añadimos algunas propiedades y un método. Esto podría servir si
solamente necesitamos un objeto y éste no es muy complejo. No
es la forma ideal de trabajar.

ALBERT BASSONS 15
Construyendo objetos

ALBERT BASSONS 16
Construyendo objetos

• En el ejemplo anterior, el nombre para el método toString()

no ha sido elegido al azar.

• Cuando intentemos imprimir o convertir un objeto a cadena de

texto, se llamará automáticamente al método toString().

ALBERT BASSONS 17
Construyendo objetos
• Como acabamos de ver, para construir un objeto necesitaremos
el operador new seguido de la llamada al constructor adecuado.

• Ejemplo: var f = new Date(); construye un objeto de tipo

Date con el constructor por defecto (no recibe parámetros). La
variable f contendrá una referencia al objeto creado de tipo
Date.

• En los ejemplos anteriores hemos creado un nuevo Object y un

nuevo Date. ¿Cómo lo hacemos en JS para crear objetos de
nuestros tipos personalizados?.

ALBERT BASSONS 18
Los constructores
• Para poder crear objetos de nuestros propios tipos en
Javascript, necesitamos definir un constructor.

• JavaScript no tiene un sistema completo de clases, usa un

sistema de prototipado que se comenta en estas
transparencias.

• Esto implica que el concepto de ‘clase’ tradicional que podéis

conocer de los lenguajes orientados a objeto no existe como tal
en JS.

ALBERT BASSONS 19
Ejemplo

Todos los coches tendrán las mismas

propiedades y los mismos métodos

ALBERT BASSONS 20
Los constructores

• El constructor de ‘Coche’ recibe todos los datos necesarios

para construir el objeto.

• La palabra this se refiere al objeto que se está creando.

Es una palabra muy habitual cuando trabajamos con objetos y
que iremos viendo repetidamente.

ALBERT BASSONS 21
Los constructores

• this.marca = mar; crea una nueva propiedad para el

objeto que se está creando llamada marca y le pone el valor
del parámetro mar que recibe.

• No es problema si el parámetro que le pasamos al constructor

se llama igual que la propiedad, no se confunde.

ALBERT BASSONS 22
Los constructores

• this.recorrer = function(k){…}; crea un nuevo

método para el objeto que se está creando llamado
recorrer. Además este método recibe un parámetro
(número de kilómetros que se recorren).

El prototipo del método sería: void recorrer(number);

• A diferencia de las funciones, los métodos se aplican

siempre sobre objetos. Por tanto, solamente podremos
aplicar el método recorrer(k) sobre objetos de tipo
Coche.

ALBERT BASSONS 23
Ejemplo

ALBERT BASSONS 24
Los constructores

• Se pueden definir constructores para crear objetos de cualquier

tipo (coches, aviones, peces, cartas, partidas, listas…).

• Lo que tendremos que definir son las propiedades y

métodos que necesitemos en cada caso.

• Se podrían hacer muchísimos ejemplos diferentes. En clase

haremos unos cuantos, pero para trabajar esto más a fondo os
recomiendo el curso de programación orientada a objeto.

ALBERT BASSONS 25
Trabajando con objetos

• Como se puede ver en los ejemplos anteriores, se usa el

operador punto para acceder a las propiedades y métodos
de los objetos en JavaScript.

• La palabra reservada this en un constructor se refiere al

objeto que se está construyendo.

• La palabra reservada this en un método, se refiere al objeto

sobre el que se aplica el método.

• Estos conceptos tendremos que trabajarlos un poco.

ALBERT BASSONS 26
Trabajando con objetos

• A las propiedades se puede acceder para lectura o para

escritura.

ALBERT BASSONS 27
Trabajando con objetos

• En los métodos, hay que tener en cuenta que existe un

argumento implícito, que es el objeto sobre el que se aplica
dicho método. Dentro del método se identificará con la palabra
reservada this.

ALBERT BASSONS 28
Sobrecarga del constructor

• Cuando trabajamos con fechas, tenemos cuatro formas

diferentes de crear fechas, todo depende del número de
parámetros que usemos en la llamada al constructor.

• Este mecanismo es conocido con el nombre de sobrecarga (del

constructor en este caso) y JS no lo puede implementar
directamente (no entro en detalles).

• Sin embargo, podemos hacer “apaños” para poder implementar

la sobrecarga en nuestros constructores. Observa el ejemplo
siguiente:

ALBERT BASSONS 29
Ejemplo (1 de 2)

Lanza una excepción si

faltan argumentos

ALBERT BASSONS 30
Ejemplo (2 de 2)

ALBERT BASSONS 31
Relación con la GUI

• El constructor anterior sirve para construir coches, pero en las

pruebas he escrito directamente los valores para sus
propiedades.

• ¿Cómo podemos construir coches a partir de los datos que

indique el usuario?

• Pues por ejemplo, mediante formularios. El ejemplo siguiente

se implementará en clase.

ALBERT BASSONS 32
Relación con la GUI

ALBERT BASSONS 33
Relación con la GUI
• Los campos se corresponderán con las propiedades a indicar.

• Cuando pulsemos el botón “guardar”, se creará el nuevo objeto

haciendo uso del constructor y se incluirá a un array de coches
(por ejemplo).

• Cuando pulsemos “mostrar” se mostrarán todos los coches del

array en un output u otro elemento preparado para tal
efecto.

• Cuando pulsemos “borrar” se eliminarán todos los coches de la

lista.

ALBERT BASSONS 34
El método toString()
• Si intentamos imprimir un objeto de un tipo creado por nosotros
mismos, JavaScript no sabe cómo debe mostrarlo, así que el
resultado es que nos dice simplemente que es un objeto.

• Para indicar cómo se debe mostrar el objeto, tenemos que

definir un método que se llame toString();

ALBERT BASSONS 35
El método toString()
• toString() es el método predeterminado para convertir
un objeto a texto.

• Este método no recibe parámetros y simplemente retorna una

cadena de texto con la descripción del objeto.

• Los objetos de clases de JavaScript ya hechas (String, Array,

Date, RegExp…) tienen todas este método.

• Es conveniente poner ese método a nuestros constructores.

ALBERT BASSONS 36
El método toString()
• Si tenemos el método toString() podemos hacer:

document.write(objeto);
o bien:
document.write(objeto.toString());

• En cambio, si al mismo método lo llamáramos de otra manera,

por ejemplo aTexto() tendremos que hacer
obligatoriamente:

document.write(objeto.aTexto());

ALBERT BASSONS 37
Relaciones entre objetos
• Los objetos se relacionan entre sí, por ejemplo:
• Un polígono está formado por puntos.
• Un curso tiene un listado de alumnos.
• Un profesor trabaja en una universidad.
• Un tigre es un tipo de animal.
• …

• Las relaciones entre objetos pueden ser de: asociación,

agregación, composición, generalización o dependencia.

• Esto se trabaja en profundidad en el curso de programación en

lenguajes orientados a objetos, pero aquí lo resumiremos.

ALBERT BASSONS 38
Relaciones entre objetos
• Asociación: tipo de relación en que dos elementos se
relacionan entre sí, por ejemplo un profesor trabaja en una
universidad.

• Agregación: es una forma de asociación en la que un

elemento contiene elementos de otro tipo: un polígono está
formado por puntos.

• Composición: es parecido a la agregación pero las partes no

pueden existir sin el todo. Ejemplo: agenda y contactos, si se
elimina la agenda se eliminan los contactos puesto que no
pueden existir fuera de una agenda.

ALBERT BASSONS 39
Relaciones entre objetos
• Generalización o herencia: relación en la que un objeto es
un tipo de otro objeto: el tigre es un tipo de animal.

• Dependencia: los objetos no se relacionan directamente pero

puede haber dependencia de uso. Por ejemplo, un método del
objeto de tipo1 usa localmente un objeto de tipo2. Si tipo2 no
existiera, el método no funciona.

ALBERT BASSONS 40
Ejemplo (1 de 2)

ALBERT BASSONS 41
Ejemplo (2 de 2)

ALBERT BASSONS 42
Objetos dinámicos
• En JavaScript, los objetos son dinámicos.

• Esto quiere decir que se les pueden añadir o quitar propiedades

sobre la marcha, así como sustituir sus métodos por otros en
tiempo de ejecución.

• En este sentido, cualquier objeto individual puede tener más o

menos propiedades o métodos que los otros objetos de su tipo.
También puede tener métodos que se comporten de forma
diferente.

ALBERT BASSONS 43
Ejemplo 1

ALBERT BASSONS 44
Ejemplo 2

ALBERT BASSONS 45
Los prototipos

• Como acabamos de ver, añadir propiedades o métodos a los

objetos sobre la marcha, solamente añade la propiedad o
método al objeto actual.

• Si queremos añadir, quitar o modificar propiedades o métodos

para todos los objetos del tipo, debemos modificar el
prototipo.

• Esto se hace usando la propiedad estática prototype que

tienen por defecto todos los tipos en JavaScript.

ALBERT BASSONS 46
Ejemplo 1

ALBERT BASSONS 47
Ejemplo 2

ALBERT BASSONS 48
Los prototipos

• Viendo el ejemplo anterior, pensaréis que es una tontería

modificar el prototipo. Para hacer eso, hubiéramos incluido
directamente los métodos necesarios en el constructor de
Coche.

• La gracia es que también se puede modificar el prototipo

para los tipos de objeto que ya existen en JavaScript. Mirad
los ejemplos con prototipos que hay un poco más abajo.

ALBERT BASSONS 49
Notación de objeto
• En JS podemos crear objetos genéricos usando la notación de
objetos de JavaScript (JSON: JavaScript Object Notation).

• Esta notación además es utilizada frecuentemente como

notación de intercambio de datos en sistemas distribuidos, en
sustitución de otras como XML (módulo 2, tercera unidad
formativa).

• En el siguiente ejemplo se muestra esta notación, con la que

trabajaremos más profundamente en el segundo módulo.

ALBERT BASSONS 50
Ejemplo

ALBERT BASSONS 51
Conclusiones
• La orientación a objeto es muy útil y potente… pero la creación
y manipulación de objetos en JavaScript es limitada debido a
que no usa un sistema completo de clases.

• Nos será útil conocer los conceptos mencionados para

manipular los objetos del DOM (Document Object Model) y
comprender su estructura y funcionamiento.

• También nos será útil conocer los conceptos de programación

orientada a objeto para la parte de programación en el servidor
con PHP:

ALBERT BASSONS 52
NOTA IMPORTANTISIMA
• En ES6 (2015) se ha introducido el modelo completo de
clases a JavaScript (con herencia, constructores, llamadas a
super(), métodos estáticos…).

• De momento no funciona en todos los navegadores pero ya os

podéis imaginar que en unos meses será la forma adecuada de
trabajar con JS.

• Para aquellos que hayáis cursado el curso de programación en

lenguajes orientados a objeto os viene perfecto, para el resto
esperad a una nueva actualización de transparencias 

https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Classes

ALBERT BASSONS 53
NOTA IMPORTANTISIMA

• Como ya os habré ido diciendo… tanto PHP como JS como

ActionScript y otros lenguajes, se han ido transformando
desde sus orígenes a lenguajes con un sistema completo de
clases.

• La programación orientada a objetos es el presente y el

futuro de la programación, puesto que permite modelar con
la fidelidad necesaria la realidad y trabajar de forma
organizada en grandes proyectos y aplicaciones.

ALBERT BASSONS 54
Concepto de clase
• Todos los coches pertenecen a la clase coche.

• Un coche concreto (el Fiat Panda) es una instancia concreta

de la clase coche.

• La clase es la representación abstracta de un objeto:

1. Define la estructura y el comportamiento de cada uno de

los objetos de la clase.

2. Sirve como patrón para la creación de objetos.

ALBERT BASSONS 55
Concepto de clase

• La clase Coche se representa así en un diagrama de clases.

• Arriba se indica el nombre de la clase, a continuación las

propiedades y finalmente los métodos.

ALBERT BASSONS 56
Concepto de clase
• En la mayoría de lenguajes como Java, C++, C#, PHP,
ActionScript 3... se definen las clases con la palabra reservada
class.

• Como hemos visto, en JavaScript usamos los constructores

para indicar la estructura que tendrán los objetos. Además
en JS no existen todos los mecanismos de que dispone un
sistema completo de clases.

• Sin embargo, debido a las nuevas especificaciones de

ECMAScript 6 (2015), se está introduciendo el modelo de
clases a JavaScript, con lo que en breve podremos trabajar
como con los otros lenguajes.

ALBERT BASSONS 57
Ejemplo
(solamente funciona en Chrome en modo strict)

ALBERT BASSONS 58
Diagrama de clases
• El diagrama de clases es un diagrama estático que se usa
para representar la estructura de clases de un programa.

• Al verlo ya podemos saber qué tipos de objeto habrá, qué

propiedades y métodos tienen y cómo interactúan entre ellos.

• En este curso solamente lo mencionaremos pero no vamos a

trabajar con él en profundidad.

• Para más información, apuntaros al curso de programación en

lenguajes orientados a objeto 

ALBERT BASSONS 59
Ejemplo

ALBERT BASSONS 60
Ejemplo constructores
Cartas de la baraja

61
Repartir cartas (1 de 5)

ALBERT BASSONS 62
Repartir cartas (2 de 5)

ALBERT BASSONS 63
Repartir cartas (3 de 5)

ALBERT BASSONS 64
Repartir cartas (4 de 5)

ALBERT BASSONS 65
Repartir cartas (5 de 5)

ALBERT BASSONS 66
Repartir cartas (resultado)

ALBERT BASSONS 67
Ejemplos con prototipos
Ejemplo 1: modifica toString() de Array

ALBERT BASSONS 69
Ejemplo 2: creando un método para Date

ALBERT BASSONS 70
Ejemplo 3: creando un método para Date

ALBERT BASSONS 71
Ejemplo 4: crea un método para String

ALBERT BASSONS 72
Ejemplo 5: crea un método para String

ALBERT BASSONS 73
Prácticas
Objetos
Ejercicios

1. Añade un método getHora() al prototipo de la clase Date

para obtener la hora en formato hh:mm:ss

2. Modifica el método toString() de la clase Date, de forma

que al imprimir una fecha aparezca una cadena de texto en
castellano o catalán.

ALBERT BASSONS 75
Ejercicios

3. Modifica el prototipo para los Array, añadiendo dos métodos

nuevos:

sumar(); que suma todos los elementos numéricos del

Array.

promedio(); que calcula el promedio de los elementos

numéricos del array.

ALBERT BASSONS 76