Eswgrewg

Programación Orientada a Objetos en Javascript
Febrero 2015
ADC Asturias
Introducción
 Este documento es una introducción a la programación orientada a

Objetos en Javascript
 ¿Qué es JSON (JavaScript Object Notation)?
 Introducción a la programación Orientada a Objetos en Javascript

• Clases en Javascript
• Herencia en Javascript
• Espacios de nombres en Javascript
Curso Devon - Febrero 2015

Página 2
Copyright © Capgemini 2015. All Rights Reserved
Javascript orientado a objetos
¿Qué es JSON (Javascript Object Notation)?

Página 3
JSON (JavaScript Object Notation)
 JSON es un formato ligero para el intercambio de información
 Representa estructuras de datos
 Es una buena alternativa a otros formatos, como xml, en peticiones Ajax
 Veamos un ejemplo sencillo que representa un coche:

 El objeto tiene cuatro propiedades separadas por comas
 Cada propiedad está formada por un par clave-valor
 Una clave y un valor se separan por dos puntos
 Un JSON estará dentro de dos llaves {…}

Página 4
Creando un objeto JSON
 Vamos a crear el JSON anterior

 Arrancamos la aplicación que desarrollamos en el módulo 3, y una vez en
la página de inicio de la aplicación, abrimos la consola de Chrome
 Tras crear el objeto y pulsar en intro, creamos una variable llamada
“coche” que contiene un objeto con las cuatro propiedades que hemos
definido, como podemos ver a continuación

Página 5
JSON complejo
 Un JSON puede tener varias propiedades, que pueden ser numéricas, de

tipo cadena, booleanas, un objeto {…} o una colección de objetos [{…},
{…}, {…}]
 Ejercicio: Crear un JSON complejo que represente un curso

 Tendrá un identificador numérico del curso
 Tendrá un nombre del curso
 Tendrá una colección de alumnos. Cada alumno tendrá tres propiedades
• Un identificador
• Un nombre
• Una lista de teléfonos,. Cada teléfono tendrá un dos propiedades
– Número de teléfono
– Descripción

Página 6
Ejemplo de JSON que representa un curso
 Un JSON puede tener varias propiedades, que pueden ser numéricas, de

tipo cadena, booleanas, un objeto {…} o una colección de objetos [{…},
{…}, {…}]
 Ejercicio: Crear un JSON complejo que represente un curso

 Tendrá un identificador numérico del curso
 Tendrá un nombre del curso
 Un campo booleano para activar o desactivar el curso
 Tendrá una colección de alumnos. Cada alumno tendrá tres propiedades
• Un identificador
• Un nombre
• Una lista de teléfonos,. Cada teléfono tendrá un dos propiedades
– Número de teléfono
– Descripción

Página 7
Ejemplo de JSON que representa un curso

Página 8
Acceso a las propiedades del JSON
 Tras crear la variable curso, veremos cómo

acceder a sus propiedades
 Sobre la consola de Chrome, podemos escribir
el nombre de la variable y pulsar en punto (.),
para que aparezca el asistente
 Para ver sobre la consola el contenido de una
propiedad, únicamente escribiremos
<variable>.<propiedad> y pulsaremos en intro
 También podemos utilizar corcheres,
escribiendo dentro una cadena con la propiedad

Página 9
Acceso a propiedades complejas (objeto o array)
 También podemos acceder a las propiedades de tipo objeto o de tipo

array de un JSON
 Para las propiedades de tipo objeto, añadiremos .<propiedad> las veces

que necesitemos hasta acceder al atributo deseado
 Para las propiedades de tipo array, tendremos que recuperar primero la

posición deseada del array, y después, seguir los pasos del caso anterior
en caso de que sea un objeto

Página 10
Propiedades dinámicas en objetos Javascript
 Es posible añadir nuevas propiedades a un JSON dinámicamente
 La característica anterior nos permite crear, si es necesario, objetos

vacíos, y añadir nuevas propiedades posteriormente
 Si accedemos a la propiedad de una objeto Javascript y le asignamos un

valor, si la propiedad existe se actualiza, y si la propiedad no existe, la
crea y le asigna el valor
 Un objeto Javascript vacío se crea asignando a una variable únicamente

las llaves de apertura y cierre
 Lo veremos a través de un ejemplo

Página 11
Ejemplo de propiedades dinámicas en JSON

Página 12
Clase JSON: métodos stringify y parse
 En Javascript tendremos disponible una clase llamada JSON que nos

proporcionará dos métodos de apoyo para trabajar con JSON
 JSON.stringify(objeto): método que recibe un objeto de Javascript y retorna una cadena
de texto que representa dicho objeto
 JSON.parse(string): método que recibe una cadena de texto que representa un objeto de
Javascript, y retorna el objeto asociado

Página 13
Javascript orientado a objetos
Introducción a la programación Orientada a

Objetos en Javascript

Página 14
Introducción a la POO en Javascript
 Javascript es un lenguaje orientado a objetos basado en prototipos
 Los objetos en Javascript no son creados mediante instancias de clases

sino mediante la clonación de otros objetos
 Un lenguaje basado en clases hace distinción entre “clases” e “instancias”
 Un lenguaje basado en prototipos no hace esa distinción, sólo hay objetos
 Cualquier objeto puede ser utilizado como prototipo de otro
 Un prototipo puede ser modificado dinámicamente

Página 15
Crear un prototipo en Javascript
 Aunque en clase trabajaremos sobre la consola de Chrome, es

recomendable crearse una página HTML que tenga enlazado un fichero
de Javascript con el código de los ejemplos
 En Javascript los prototipos se crean a través de funciones
 A continuación crearemos un prototipo para un “Producro” que tenga dos

propiedades “id” y “referencia”
 Una vez creado el “Producto”, crearemos dos nuevos objetos a partir del
prototipo anterior

Página 16
Prototipo en Javascript de un producto
 Creamos una función que actúa

como constructor
 El prototipo “Producto” tiene dos

propiedades, creados utilizando la
palabra reservada “this”
 Las propiedades tienen por ahora un

valor fijo, que serán asignados a
todos los objetos creados
 Después creamos dos nuevas

instancias de un producto, utilizando
para ello la palabra reservada “new”
Página 17
Constructor con parámetros
 Como hemos visto, las funciones sirven como constructores
 En el ejemplo anterior, se asignaban valores fijos a las propiedades del

producto
 En esta segunda versión la función “Producto” recibirá esos valores como

parámetro, permitiendo así inicializar los objetos creados

Página 18
Parámetros opcionales en las funciones
 Una diferencia entre Javascript y Java, es que a pesar de que un método

en Javascript tenga definidos varios parámetros, se puede realizar la
llamada pasándole un número distinto de parámetros
 Si le pasamos menos parámetros, los que no se reciban tendrán el valor

“undefined”
 Si le pasamos más parámetros, se inicializarán los que estén definidos. El

resto de parámetros estarán accesibles a través de “arguments”
 “arguments” es una variable de tipo Array disponible en todos los

métodos, que contiene todos los parámetros que se le pasan a la función

Página 19
Ejemplo de parámetros opcionales en las funciones
 Creamos tres instancias de la clase “Producto” pasando distintos

parámetros, y visualizando en cada caso el valor de “arguments”

Página 20
Métodos en los prototipos en Javascript
 Las propiedades son específicas para cada objeto, pero sin embargo los
métodos deberían ser compartidos entre todas las instancias
 Cada vez que hacemos “new”, se hace una copia en memoria de todo el
código de la función para definir un nuevo objeto
 Por este motivo, los métodos no estarán definidos dentro de la función,

sino que se definirán de forma genérica a nivel de prototipo
 Para eso, se utiliza la propiedad “prototype” que nos ofrecen todos los
objetos en Javascript
 Vamos a crear a continuación un método llamado “get” que reciba el

nombre de una propiedad y retorne su valor
Página 21
Ejemplo de métodos en los prototipos en Javascript

Página 22
Comentarios sobre la propiedad “prototype”
 Como hemos visto, las propiedades las creamos a nivel de objeto (dentro
de la función
 Sin embargo los métodos los creamos a nivel de prototipo, a través de la

propiedad “prototype” de los objetos
 Vamos a utilizar los métodos creados en el ejemplo anterior sobre una

instancia de un objeto

Página 23
Ejercicio: Crear un prototipo para un Vehículo
 Propiedades:  Métodos:
 Identificador  get: Permite recuperar un atributo de un vehiculo
 Número de serie  set: Permite modificar un atributo de un vehiculo
 Número de ruedas  mostrarVehiculo: Permite visualizar un vehículo
 Investigar cómo crear un método estático dentro de la clase “Vehiculo”

que reciba un Array de vehículos y los muestre
 Ejemplo de llamada a un método estático para visualizar productos

Página 24
Herencia de prototipos en Javascript
 La herencia es una característica fundamental de los lenguajes de

programación orientados a objetos
 Javascript nos permite simular la herencia entre objetos a través de los

prototipos
 Veremos la herencia a través de ejemplos, como hemos hecho en los

apartados anteriores
 Partimos del prototipo anterior “Producto”, dos propiedades (identificador

y referencia), y dos métodos (get y mostrarProducto)
 Crearemos un nuevo prototipo “ProductoVendible”

Página 25
Prototipo ProductoVendible
 El nuevo prototipo “ProductoVendible” heredará del prototipo “Producto”, y

después ampliará tanto sus propiedades como sus métodos
 Crearemos por tanto el nuevo prototipo “ProductoVendible”
 Utilizamos el constructor de la clase “Producto” para inicializar las

propiedades que se heredarán, mientras que las nuevas se inicializarán
dentro del constructor de “ProductoVendible”

Página 26
ProductoVendible hereda de Producto
 Hasta ahora hemos creado únicamente un prototipo nuevo, pero aún no

hay “herencia” entre prototipos
 Únicamente hemos indicado “ProductoVendible” tendrá tres propiedades
 Para similar la herencia, tenemos que indicar que “ProductoVendible” es

un prototipo de “Producto” a través de la propiedad “prototype”
 En ese momento, que “ProductoVendible” será un prototipo de “Producto”

y tendremos disponibles los métodos “get” y “mostrarProducto” definidos
para el prototipo “Producto”
 Realmente, al indicar que “es un prototipo”, lo que hace es copiar las

características de “producto” y ampliarlas después en “ProductoVendible”
Página 27
Visualizando ProductoVendible

Página 28
Comentarios sobre el prototipo ProductoVendible
 Tras indicar que un “ProductoVendible” es un prototipo de “Producto”, se

copian sus métodos en el nuevo objeto
 Vemos que ni el método “get” ni el método “mostrarProducto” conocen

aún la propiedad “precio” ya que en el prototipo “Producto” no existía
 Tendremos que ampliar estos métodos para tener en cuenta el “precio”

Página 29
Ejercicio: Crear un prototipo para un Coche
 Crear un nuevo prototipo “Coche” que herede de “Vehiculo”
 Propiedades:  Métodos:
 Identificador  get: Permite recuperar una propiedad de un coche
 Número de serie  set: Permite modificar una propiedad de un coche
 Número de ruedas  mostrarCoche: Permite visualizar un coche
 Número de plazas
 Crear un método estático dentro de la clase “Coche” que reciba un Array

de coches y los muestre

Página 30
Espacios de nombres en Javascript
 Al igual que Java nos permite agrupar las clases en paquetes, en

Javascript podemos hacer algo similar con los espacios de nombres
 Además, en Javascript es aconsejable utilizar estos espacios de nombres

para no sobrescribir variables generales, ya que por defecto, cualquier
variable global pasa a ser hija de la clase Window
 Como ejemplo vamos a crear una variable llamada “pruebaAmbito”:

pruebaAmbito = "general";
 Accedemos desde la consola de Chrome a la variable de dos formas:

pruebaAmbito y window.pruebaAmbito

Página 31
Espacio de nombres cursoJavascript
 Se recomienda crear, al menos, un espacio de nombres en cada proyecto

con los métodos y/o atributos específicos para evitar conflictos
 Como podemos ver en el ejemplo siguiente, un espacio de nombres se

simula a través de un objeto de Javascript
 Por tanto, cada propiedad o método va separado por “comas”, y la

asignación del valor se hace a través de “dos puntos”

Página 32
Métodos de los prototipos con espacios de nombres
 Dentro del espacio de nombres se definen únicamente los métodos

globales y las funciones (ya sean globales o prototipos)
 Si tenemos un prototipo y queremos añadirle métodos, no se definirán

dentro del espacio de nombres
 En este caso, accederemos al prototipo del producto utilizando el espacio

de nombres, y después realizamos los mismos pasos vistos hasta ahora

Página 33
Ejercicio: Vehículo y Coche en espacio de nombres
 Actualizar los prototipos “Vehiculo” y “Coche” para que estén dentro de un

espacio de nombres
 Crear dos vehículos y dos coches para verificar que todos los métodos
funcionan correctamente

Página 34
Información de contacto
Luis Fernandez Palacio Jorge Méndez Rodríguez

luis.fernandez-palacio@capgemini.com jorge.mendez-rodriguez@capgemini.com
ADC Asturias ADC Asturias

Página 35
About Capgemini
With more than 130,000 people in 44 countries, Capgemini is one
of the world's foremost providers of consulting, technology and
outsourcing services. The Group reported 2012 global revenues
of EUR 10.3 billion.
Together with its clients, Capgemini creates and delivers
business and technology solutions that fit their needs and drive
the results they want. A deeply multicultural organization,
Capgemini has developed its own way of working, the
Collaborative Business ExperienceTM, and draws on Rightshore ®,
its worldwide delivery model.
www.capgemini.com
The information contained in this presentation is proprietary.

© 2013 Capgemini. All rights reserved. Rightshore® is a trademark belonging to Capgemini.

Eswgrewg

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Eswgrewg

Cargado por

Copyright:

Formatos disponibles

Programación Orientada a Objetos en Javascript

 Este documento es una introducción a la programación orientada a

 ¿Qué es JSON (JavaScript Object Notation)?

 Introducción a la programación Orientada a Objetos en Javascript

Curso Devon - Febrero 2015

¿Qué es JSON (Javascript Object Notation)?

Curso Devon - Febrero 2015

 JSON es un formato ligero para el intercambio de información

 Representa estructuras de datos

 Es una buena alternativa a otros formatos, como xml, en peticiones Ajax

 Veamos un ejemplo sencillo que representa un coche:

Curso Devon - Febrero 2015

 Vamos a crear el JSON anterior

Curso Devon - Febrero 2015

 Un JSON puede tener varias propiedades, que pueden ser numéricas, de

 Ejercicio: Crear un JSON complejo que represente un curso

Curso Devon - Febrero 2015

 Un JSON puede tener varias propiedades, que pueden ser numéricas, de

 Ejercicio: Crear un JSON complejo que represente un curso

Curso Devon - Febrero 2015

Curso Devon - Febrero 2015

 Tras crear la variable curso, veremos cómo

Curso Devon - Febrero 2015

 También podemos acceder a las propiedades de tipo objeto o de tipo

 Para las propiedades de tipo objeto, añadiremos .<propiedad> las veces

 Para las propiedades de tipo array, tendremos que recuperar primero la

Curso Devon - Febrero 2015

 Es posible añadir nuevas propiedades a un JSON dinámicamente

 La característica anterior nos permite crear, si es necesario, objetos

 Si accedemos a la propiedad de una objeto Javascript y le asignamos un

 Un objeto Javascript vacío se crea asignando a una variable únicamente

 Lo veremos a través de un ejemplo

Curso Devon - Febrero 2015

 En Javascript tendremos disponible una clase llamada JSON que nos

Curso Devon - Febrero 2015

Introducción a la programación Orientada a

Curso Devon - Febrero 2015

 Javascript es un lenguaje orientado a objetos basado en prototipos

 Los objetos en Javascript no son creados mediante instancias de clases

 Un lenguaje basado en clases hace distinción entre “clases” e “instancias”

 Un lenguaje basado en prototipos no hace esa distinción, sólo hay objetos

 Cualquier objeto puede ser utilizado como prototipo de otro

 Un prototipo puede ser modificado dinámicamente

Curso Devon - Febrero 2015

 Aunque en clase trabajaremos sobre la consola de Chrome, es

 En Javascript los prototipos se crean a través de funciones

 A continuación crearemos un prototipo para un “Producro” que tenga dos

Curso Devon - Febrero 2015

 Creamos una función que actúa

 El prototipo “Producto” tiene dos

 Las propiedades tienen por ahora un

 Después creamos dos nuevas

 Como hemos visto, las funciones sirven como constructores

 En el ejemplo anterior, se asignaban valores fijos a las propiedades del

 En esta segunda versión la función “Producto” recibirá esos valores como

Curso Devon - Febrero 2015

 Una diferencia entre Javascript y Java, es que a pesar de que un método

 Si le pasamos menos parámetros, los que no se reciban tendrán el valor

 Si le pasamos más parámetros, se inicializarán los que estén definidos. El

 “arguments” es una variable de tipo Array disponible en todos los

Curso Devon - Febrero 2015

 Creamos tres instancias de la clase “Producto” pasando distintos

Curso Devon - Febrero 2015