Introducción a los Objetos en JavaScript: Concepto, Creación y Acceso, Apuntes de Informática

¡Descarga Introducción a los Objetos en JavaScript: Concepto, Creación y Acceso y más Apuntes en PDF de Informática solo en Docsity!

JSON

Implantación de Aplicaciones Web

Curso 2019/

IES MIGUEL ROMERO ESTEO

ÍNDICE 1.- Concepto de Objetos 2.- Notación de punto 3.-Notación de corchetes 4.-Establecer miembros de objetos 5.- La palabra reservada "this" (este) 1.- Concepto de Objetos Un objeto es una colección de datos relacionados y/o funcionalidad (que generalmente consta de varias variables y funciones, que se denominan propiedades y métodos cuando están dentro de objetos. Vamos a trabajar a través de un ejemplo para mostrarnos cómo son. Al igual que con muchas cosas en JavaScript, la creación de un objeto a menudo comienza con la definición e inicialización de una variable. var persona = {}; Acabamos de crear el primer objeto. ¡Trabajo hecho! Pero este es un objeto vacío, por lo que realmente no podemos hacer mucho con él. Actualicemos nuestro objeto para que se vea así: var persona = { nombre: [‘Juan’, 'Smith'], edad: 32, genero: 'masculino', intereses: ['música', 'esquí'], bio: function () { alert(this.nombre[0] + '' + this.nombre[1] + ' tiene ' + this.edad + ' años. Le gusta ' + this.intereses[0] + ' y ' + this.intereses[1] + '.'); }, saludo: function() { alert('Hola, Soy '+ this.nombre[0] + '. '); } }; Tema 1 – Objetos en Javascript

Un objeto como este se conoce como un objeto literal — literalmente hemos escrito el contenido del objeto tal como lo fuimos creando. Esto está en contraste con los objetos instanciados de las clases, que veremos más adelante. Es muy común crear un objeto utilizando un objeto literal cuando se desea transferir una serie de elementos de datos relacionados y estructurados de alguna manera, por ejemplo, enviando una solicitud al servidor para ponerla en una base de datos. Enviar un solo objeto es mucho más eficiente que enviar varios elementos individualmente, y es más fácil de procesar que con una matriz, cuando desea identificar elementos individuales por nombre. 2.- Notación de punto Arriba, accediste a las propiedades y métodos del objeto usando notación de punto (dot notation). El nombre del objeto (persona) actúa como el espacio de nombre (namespace); al cual se debe ingresar primero para acceder a cualquier elemento encapsulado dentro del objeto. A continuación, se escribe un punto y luego el elemento al que se desea acceder: puede ser el nombre de una simple propiedad, un elemento de una propiedad de matriz o una llamada a uno de los métodos del objeto, por ejemplo: persona.edad persona.intereses[1] persona.bio() Incluso es posible hacer que el valor de un miembro del objeto sea otro objeto. Por ejemplo, intente cambiar el miembro nombre de nombre: ['Juan', 'Smith'], a nombre : { pila: 'Juan', apellido: 'Smith' }, Aquí estamos creando efectivamente un espacio de nombre secundario (sub- namespace). Esto suena complejo, pero en realidad no es así: para acceder a estos elementos solo necesitas un paso adicional que es encadenar con otro punto al final. En nuestro caso, la forma de acceder sería: function mostrar(){ alert(persona.nombre.pila) }

3.-Notación de corchetes Hay otra manera de acceder a las propiedades del objeto, usando la notación de corchetes. En lugar de usar estos: persona.edad persona.nombre.pila Puedes usar persona['edad'] persona['nombre']['pila'] Esto se ve muy similar a cómo se accede a los elementos en una matriz, y básicamente es lo mismo: en lugar de usar un número de índice para seleccionar un elemento, se está utilizando el nombre asociado con el valor de cada miembro. No es de extrañar que los objetos a veces se denominen arreglos asociativos: mapean cadenas de texto a valores de la misma manera que los arreglos mapean números a valores. 4.-Establecer miembros de objetos Hasta ahora solo hemos buscado recuperar (u obtener) miembros del objeto: también puede establecer (actualizar) el valor de los miembros del objeto simplemente declarando el miembro que desea establecer (usando la notación de puntos o corchetes), de esta manera: function mostrar(){ persona.nombre.pila="Antonio"; alert(persona.nombre.pila) } El resultado sería el siguiente:

Un aspecto útil de la notación de corchetes es que se puede usar para establecer dinámicamente no solo los valores de los miembros, sino también los nombres de los miembros. Digamos que queríamos que los usuarios puedan almacenar tipos de valores personalizados en sus datos personales, escribiendo el nombre y el valor del miembro en dos entradas de texto. Podríamos obtener esos valores de esta manera: var nombrePerzonalizado = entradaNombre.value; var valorPerzonalizado = entradaValor.value; entonces podríamos agregar este nuevo miembro nombre y valor al objeto persona de esta manera: persona[nombrePerzonalizado] = valorPerzonalizado; Para probar esto, intente agregar las siguientes líneas en su código, justo debajo de la llave de cierre del objeto persona: var nombrePerzonalizado = 'altura'; var valorPerzonalizado = '1.75m'; persona[nombrePerzonalizado] = valorPerzonalizado; Ahora intenta guardar y actualizar y realizar la siguiente llamada: persona.altura Agregar una propiedad a un objeto no es posible con la notación de puntos, que solo puede aceptar un nombre de miembro literal , no un valor variable que apunte a un nombre. 5.- La palabra reservada "this" (este) Es posible que hayas notado algo un poco extraño en nuestros métodos. Mira esto, por ejemplo: saludo: function() { alert('¡Hola!, Soy '+ this.nombre.pila + '.'); }

Probablemente te estés preguntando qué es "this". La palabra clave this se refiere al objeto actual en el que se está escribiendo el código, por lo que en este caso this es equivalente a la persona. Entonces, ¿por qué no escribir persona en su lugar?. La palabra reservada this es muy útil: siempre asegurará que se usen los valores correctos cuando cambie el contexto de un miembro (por ejemplo, dos instancias de objetos persona diferentes) puede tener diferentes nombres, pero querrá usar su propio nombre al decir su saludo). Vamos a ilustrar lo que queremos decir con un par de objetos persona simplificados: var persona1 = { nombre: 'Chris', saludo: function() { alert('¡Hola!, Soy '+ this.nombre + '.'); } } var persona2 = { nombre: 'Brian', saludo: function() { alert('¡Hola!, Soy '+ this.nombre + '.'); } } En este caso, persona1.saludo() mostrará "¡Hola!, Soy Chris"; persona2.saludo() por otro lado mostrará "¡Hola!, Soy Brian", aunque el código del método es exactamente el mismo en cada caso. Como dijimos antes, this es igual al objeto en el que está el código; esto no es muy útil cuando se escriben objetos literales a mano, pero realmente se vuelve útil cuando se generan objetos dinámicamente (por ejemplo, usando constructores