¿Qué es this? ¿Cómo funciona con los métodos de JavaScript?

Seguimos con los objetos. En este capítulo vas a ver como crear métodos en los objetos y como utilizar sus propiedades. Además, te explico para que sirve this en los objetos de JavaScript.

Acceder a propiedades de objeto en JavaScript

Para poder utilizar individualmente una propiedad dentro de un objeto, hay que hacerlo con el nombre del objeto seguido de un punto . y la propiedad.

let usuario = {
	nombre_completo: ['Enrique', 'Barros', 'Fernández'],
	edad: 30,
	telefono: '0467489304',
	pais_residencia: 'Australia',
	idiomas: ['Español', 'Catalán', 'Inglés', 'Portugués', 'Italiano'],
};

console.log(usuario.nombre_completo);

(3) ['Enrique', 'Barros', 'Fernández']

Si la propiedad a la cual quieres acceder tiene varios elementos, como por ejemplo un array, tendrás que acceder aplicando lo que te he enseñado anteriormente. LLamada a la propiedad del objeto y le escribimos entre corchetes la posición en el array:

console.log(usuario.nombre_completo[2]);

Fernández

Como crear un método en un objeto de JavaScript

Ahora que ya sabes acceder y utilizar las propiedades de los objetos de forma individual, es el momento de que crees tu primer método. Recuerda que los métodos son funciones que están dentro de un objeto.

Escribamos un método que sea capaz de hacer algo sencillo, un saludo al usuario con su nombre.

let usuario = {
	// Propiedades.
	nombre_completo: ['Enrique', 'Barros', 'Fernández'],
	edad: 30,
	telefono: '0467489304',
	pais_residencia: 'Australia',
	idiomas: ['Español', 'Catalán', 'Inglés', 'Portugués', 'Italiano'],

	// Métodos.
	saludar: function() {
		alert('Hola, ' + this.nombre_completo[0] + '.');
	}
};

usuario.saludar();

Al cargar la página, se efectúa esta llamada al método. Lo hacemos igual que llamando a una función, solo que esta vez, hay que indicar primero a que objeto pertenece. La llamada está en la línea 15.

Si no has programado nunca, que no te preocupe el this de la línea 11. Ahora lo explico.

¿Qué es y para qué sirve this de JavaScript?

El uso de this puede abrumar un poco cuando no has programado antes en otros lenguajes de programación. Ahora verás, que no es para nada algo complicado de entender.

Palabra del lenguaje nº 49 encontrada.
this es una referencia al objeto actual.

Como curiosidad, la palabra this que se ve en otros lenguajes de programación, en Python es self.

this es una palabra clave que hace referencia al objeto en el que está escrito. Esto tendrá más sentido cuando empecemos con la programación orientada a objetos.
Este this lo puedes traducir en este objeto como usuario, así hacemos la referencia al propio objeto dentro de él mismo. Desde fuera, cuando llames al objeto, no podrás utilizar this, deberás utilizar el nombre del propio objeto.
Para que te hagas una idea, fíjate en la línea 11, he sustituido el this por el nombre del objeto. El resultado es el mismo, pero cuando trabajemos con clases, le verás la importancia que tiene, ya que sacaremos varios objetos de una misma clase y no podremos utilizar esta forma:

let usuario = {
	// Propiedades.
	nombre_completo: ['Enrique', 'Barros', 'Fernández'],
	edad: 30,
	telefono: '0467489304',
	pais_residencia: 'Australia',
	idiomas: ['Español', 'Catalán', 'Inglés', 'Portugués', 'Italiano'],

	// Métodos.
	saludar: function() {
		alert('Hola, ' + usuario.nombre_completo[0] + '.');
	}
};

usuario.saludar();

Ejercicios de JavaScript

69. A partir del objeto del ejercicio anterior (nº68) del capítulo anterior, añade un método que muestre en un alert() la siguiente frase utilizando los valores de las propiedades:
• El vehículo con marca ____ de color ____ tiene un coste de ____ $.
• Los espacios de la frase deberán ser rellenados con los valores de tus propiedades.
• Ejemplo: El vehículo con marca Opel de color negro tiene un coste de 2000 $.

La solución la encontrarás aquí: Soluciones de ejercicios de JavaScript.