¿Cómo se usa this en JavaScript y para qué sirve?

Resumen: en este artículo, aprenderás sobre la importancia y el uso de "this" en JavaScript. Comprenderás lo que significa "this" y cómo funciona en diferentes contextos, incluyendo funciones globales, funciones dentro de objetos, con el método call() o apply() y con el operador new. Además, tendrás una comprensión más clara y profunda de cómo "this" se utiliza para referirse a objetos y cómo influye en la programación en JavaScript.

Introducción a this en JavaScript

JavaScript es un lenguaje orientado a objetos, lo que significa que gran parte de su funcionamiento se basa en objetos y en cómo estos objetos interactúan entre sí. This es una palabra clave en JavaScript que se refiere al objeto en el contexto actual de la ejecución del código. Pero, ¿qué significa eso exactamente? ¿Cómo funciona this en JavaScript y para qué se utiliza? En este artículo, vamos a desentrañar el concepto de this y ver algunos ejemplos de cómo se utiliza en el código.

¿Qué significa this exactamente?

La palabra clave this es una referencia dinámica al objeto que está siendo invocado en el momento en que se ejecuta el código. En otras palabras, this hace referencia al objeto al que pertenece la función o método que está siendo invocado en ese momento. El valor de this puede cambiar dependiendo del contexto en el que se invoca una función o método, y esto puede llevar a algunas confusiones entre los desarrolladores. Es importante entender cómo funciona this en diferentes contextos para utilizarlo de manera efectiva en el código.

¿Cómo funciona this en JavaScript y para qué se utiliza?

Como ya comenté, this en JavaScript es una palabra clave que se utiliza para hacer referencia al objeto que está siendo invocado en el momento en que se ejecuta el código. El valor de this puede cambiar dependiendo del contexto en el que se invoca una función o método.

Hay cuatro contextos principales en los que se puede utilizar this en JavaScript:

• En una función global: En una función que se ejecuta en el contexto global, this hace referencia al objeto window, que es el objeto global en JavaScript.
• En una función dentro de un objeto: Cuando se invoca una función dentro de un objeto, this hace referencia al objeto que contiene la función.
• Con el método call() o apply(): call() y apply() son métodos que permiten invocar una función con un objeto diferente de this. Esto significa que se puede cambiar el contexto de this mediante la llamada a una de estas dos funciones.
• Con el operador new: Cuando se invoca una función con el operador new, this hace referencia al objeto que se está creando.

Para dejarlo más claro veremos un ejemplo para cada uno de los cuatro contextos principales.

Ejemplo de this en una función global

En el siguiente ejemplo, haremos uso de this en una función global, es decir, una función que no se encuentra dentro de otro objeto, this se refiere al objeto window.

// Función global
function saludar() {
  console.log(`Hola, soy ${this.nombre}`);
}

// Asignación de propiedades al objeto window
window.nombre = "Estrada Web Group";

// Llamado a la función global
saludar(); // Output: Hola, soy Estrada Web Group

En este ejemplo, la función saludar es una función global que muestra un saludo utilizando la propiedad nombre del objeto que la llama. Al asignar la propiedad nombre al objeto window, cuando se llama a la función saludar, this se refiere al objeto window, y el saludo se muestra con el valor asignado a nombre.

Ejemplo de this en una función dentro de un objeto

A continuación, te dejo un ejemplo de cómo "this" funciona dentro de una función dentro de un objeto:

let persona = {
  nombre: "Juan",
  edad: 30,
  presentacion: function() {
    console.log(`Hola, mi nombre es ${this.nombre} y tengo ${this.edad} años.`);
  }
};

persona.presentacion();  // Imprime: "Hola, mi nombre es Juan y tengo 30 años."

En este ejemplo, tenemos un objeto "persona" con tres propiedades: "nombre", "edad", y "presentacion". La propiedad "presentacion" es una función que utiliza "this" para acceder a las propiedades "nombre" y "edad" dentro del objeto "persona". Cuando llamamos a persona.presentacion(), la función se ejecuta y "this" se refiere al objeto "persona", por lo que podemos acceder a sus propiedades.

Ejemplo de this con el método call() y apply()

El método call() y apply() son dos funciones que permiten ejecutar una función con un this específico. Ambas funciones reciben como primer argumento el objeto que se desea usar como this dentro de la función y el segundo argumento (en el caso de call()) o un array de argumentos (en el caso de apply()) que se pasarán a la función.

Con el método call

Veamos un ejemplo:

let persona = {
  nombre: "Juan",
  edad: 30,
  presentarse: function() {
    return "Hola, mi nombre es " + this.nombre + " y tengo " + this.edad + " años.";
  }
};

let otraPersona = {
  nombre: "María",
  edad: 25
};

// Usamos el método call para llamar a la función presentarse de persona y especificar otraPersona como "this"
console.log(persona.presentarse.call(otraPersona));
// Salida: "Hola, mi nombre es María y tengo 25 años."

En este ejemplo, estamos llamando a la función presentarse desde el objeto persona pero usando el método call() para especificar que this dentro de la función debe ser otraPersona. Al ejecutar el código, la función devuelve una salutación que muestra el nombre y la edad de otraPersona en lugar de persona.

El uso de call() y apply() es útil cuando necesitamos reutilizar una función en diferentes objetos, especificando cual objeto debe ser usado como this en cada invocación.

Con el método apply

Ahora veamos un ejemplo de cómo utilizar el método apply() para establecer el valor de this:

let obj = {name: "Juan"};

let saludar = function(edad, trabajo) {
  console.log("Hola, mi nombre es " + this.name + ", tengo " + edad + " años y trabajo como " + trabajo + ".");
};

saludar.apply(obj, [25, "desarrollador web"]);
// Output: "Hola, mi nombre es Juan, tengo 25 años y trabajo como desarrollador web."

En este ejemplo, creamos un objeto obj con una propiedad name. Luego, definimos una función saludar que imprime un saludo basado en this.name, la edad y el trabajo. Finalmente, llamamos a saludar.apply(obj, [25, "desarrollador web"]) para establecer el valor de this dentro de la función como obj. Como resultado, se imprime el saludo esperado, que incluye el nombre "Juan".

Ejemplo de this con el operador new

El operador "new" en JavaScript es utilizado para crear una nueva instancia de un objeto a partir de una función constructora. Cuando se utiliza "new" antes de llamar a una función constructora, se crea un nuevo objeto que es una instancia de la función constructora y se asigna a la variable "this" dentro de la función constructora. El nuevo objeto hereda todas las propiedades y métodos de la función constructora. Finalmente, el objeto devuelto por la función constructora es el objeto creado por el operador "new". Este es un ejemplo de código para ilustrar el uso de "this" con el operador "new":

function Person(name, age) {
  this.name = name;
  this.age = age;
}

var john = new Person("John", 30);
console.log(john.name); // "John"
console.log(john.age); // 30

En este ejemplo, la función "Person" es un constructor que se utiliza con el operador "new". Cuando se invoca el constructor con "new", se crea un nuevo objeto y se asigna a la variable "john". Además, dentro del constructor, "this" se refiere al objeto recién creado y se utiliza para asignar propiedades como "name" y "age".

Resumen

En resumen, el valor this en JavaScript es una palabra clave que hace referencia al objeto que llama a la función o método en el que se encuentra. Este valor puede ser asignado de manera diferente en función del contexto en el que se invoca la función. En una función global, this hace referencia al objeto global, en una función dentro de un objeto, this hace referencia a ese objeto, mientras que en una función invocada con el método call() o apply(), this puede ser asignado a cualquier objeto deseado. Con el operador new, this hace referencia a una nueva instancia del objeto creado con el constructor. Es importante tener en cuenta que el valor de this puede ser manipulado y es importante comprender cómo funciona para escribir código JavaScript más eficiente y confiable.

Si te ha gustado este artículo y has encontrado útil la información que te hemos proporcionado, por favor compártelo con tus amigos y colegas en las redes sociales. ¡Tu apoyo es muy valioso para nosotros y nos ayuda a seguir creando contenido de calidad! Además, si tienes algún comentario o pregunta, por favor déjanos saber en la sección de comentarios abajo. <¡Estamos aquí para ayudarte!/>