Curso de JavaScript desde cero

Acceder y modificar objetos en JavaScript

Capítulo 39: Acceso y modificaciones en objetos instanciados

Seguimos con las funciones constructoras en este capítulo.
Para empezar, veamos como acceder a las propiedades de los objetos instanciados. Seguramente te haces una idea de como hacerlo.

¿Cómo acceder a propiedades de objetos instanciados?

La forma de acceder a las propiedades de objetos instanciados es la misma que para los objetos literales. objeto.propiedad.

//Función constructora Usuario
function Usuario(nombre, apellidos, edad, telefono, pais_residencia, idiomas) {
this.nombre_completo = {
		'nombre' : nombre,
		'apellidos' : apellidos
	}
	this.edad = edad;
	this.telefono = telefono;
	this.pais_residencia = pais_residencia;
	this.idiomas = idiomas;
}

// Instanciaciones de la clase Usuario
let usuario1 = new Usuario(
	'Enrique',
	'Barros Fernández',
	30,
	'0467489304',
	'Australia',
	['español', 'catalán', 'inglés', 'portugués', 'italiano']
);

let usuario2 = new Usuario(
	'Andrea',
	'Gomila Venegas',
	24,
	'5565784356',
	'México',
	['español', 'portugués', 'inglés', 'chino', 'francés']
);

Aquí tienes el ejemplo de como se accede a cualquiera de las propiedades del objeto usuario1:

/*Se accede al namespace (propiedad - objeto) nombre_completo
dentro del namespace (objeto) usuario1*/
console.log(usuario1.nombre_completo);

//Se accede a la propiedad nombre de nombre_completo de usuario1
console.log(usuario1.nombre_completo.nombre);

//Se accede a la propiedad apellidos de nombre_completo de usuario1
console.log(usuario1.nombre_completo.apellidos);

//Se accede a la propiedad edad del objeto usuario1
console.log(usuario1.edad);

//Se accede a la propiedad telefono del objeto usuario1
console.log(usuario1.telefono);

//Se accede a la propiedad telefono del objeto usuario1
console.log(usuario1.pais_residencia);

//Se accede a la propiedad entera de idiomas
console.log(usuario1.idiomas);

//Se accede a cada una de las posiciones del array de la propiedad idiomas
console.log(usuario1.idiomas[0]);
console.log(usuario1.idiomas[1]);
console.log(usuario1.idiomas[2]);
console.log(usuario1.idiomas[3]);
console.log(usuario1.idiomas[4]);
{nombre: 'Enrique', apellidos: 'Barros Fernández'}
Enrique
Barros Fernández
30
0467489304
Australia
['español', 'catalán', 'inglés', 'portugués', 'italiano']
español
catalán
inglés
portugués
italiano

¿Cómo se añaden propiedades a los objetos instanciados?

Más de lo mismo. Para añadir propiedades a los objetos instanciados, tienes que poner en práctica lo aprendido con los objetos literales.

usuario2.direccion = 'C/República de el Salvador 117 CP 37360';
	
console.log(usuario2.direccion);
C/República de el Salvador 117 CP 37360

Aquí es donde puedes empezar a apreciar el hecho de tener clases constructoras. Los dos objetos instanciados ahora tienen las mismas propiedades, excepto la que le acabo de añadir al objeto usuario2, la cual, no existe ni en la función constructora ni en el resto de objetos instanciados. De hecho, si creo un tercer objeto, no va a tener la propiedad direccion, puesto que esta es una característica encapsulada en el objeto usuario2, pero que no está en la función constructora.

¿Cómo se eliminan propiedades a los objetos instanciados?

Para eliminar propiedades de los objetos instanciados, lo haremos igual que con los literales.

delete usuario1.edad;
	
console.log(usuario1);
idiomas: (5) ['español', 'catalán', 'inglés', 'portugués', 'italiano']
nombre_completo: {nombre: 'Enrique', apellidos: 'Barros Fernández'}
pais_residencia: "Australia"
telefono: "0467489304"

Como puedes ver, todo lo que te he estado enseñando con los objetos literales, ha sido una preparación para que entendieras mucho más fácil el tema de la programación orientada a objetos.


Ejercicios de JavaScript

  1. Accede y muestra en la consola la propiedad edad del usuario2.
  2. Accede y muestra en la consola la posición 2 de la propiedad idiomas del usuario2.
  3. Añade dos nuevas propiedades al objeto usuario1.
  4. Elimina una propiedad del objeto usuario1 y otra de usuario2.

La solución la encontrarás aquí: Ejercicios resueltos de JavaScript.


Comentarios

Si te quedan dudas sobre el temario, sobre JavaScript o cualquier otra cosa relacionada o simplemente quieres agradecer, aquí tienes tu sitio para dejar tu granito de arena. Gracias por tus comentarios y por darle vida a este sitio web.

Twitter

Programación Fácil YouTube

Suscríbete

Si te ha gustado este curso y crees que el trabajo merece la pena, te agradeceré eternamente que te suscribas a mi canal de YouTube para apoyarme y que pueda seguir haciendo cursos gratuitos.

Además, si te encanta la programación, tienes un montón más de cursos gratuitos para ver.

No solo eso, podrás participar enviándome comentarios con tus sugerencias para temas específicos o cursos completos o incluso las dudas que tengas y las intentaré ir resolviendo en los cursos que estén todavía abiertos.