Uso de "this" en Clases y Funciones Constructoras

Clase 42 de 55Curso de Fundamentos de JavaScript

Resumen

¿Qué es la palabra reservada "this" en JavaScript?

La palabra reservada "this" es una de las herramientas más importantes y útiles al trabajar con clases y funciones constructoras en JavaScript. "This" hace referencia directamente al objeto o clase que se está construyendo. En programación orientada a objetos, las clases actúan como plantillas para crear múltiples instancias de objetos, y "this" permite acceder a los parámetros definidos dentro del constructor de una clase para definir propiedades de las instancias.

¿Cómo utilizar "this" dentro de una clase?

Para comprender cómo "this" opera dentro de una clase, vamos a explorar su uso mediante la creación de una clase llamada Persona. Aquí se explica cómo "this" permite interactuar con los valores inyectados en el constructor:

class Persona {
  constructor(nombre, edad) {
    this.nombre = nombre;
    this.edad = edad;
  }
}

En este ejemplo, this.nombre y this.edad indican que cada instancia de Persona tendrá propiedades nombre y edad, cuyas valores serán los que se pasen al crear las instancias.

¿Cómo crear instancias y utilizar "this"?

Para crear una instancia de la clase Persona, utilizamos la palabra reservada new, que construye una nueva instancia de la clase con los valores proporcionados:

let persona1 = new Persona("Alice", 25);

Aquí, al emplear new Persona("Alice", 25), se inyectan "Alice" y 25 como nombre y edad respectivamente, a los parámetros del constructor, asignándolos a las propiedades nombre y edad del objeto persona1.

¿Cómo añadir métodos que utilicen "this"?

Además de establecer propiedades, "this" se utiliza frecuentemente en métodos de una clase para trabajar con las propiedades de instancia. Observe cómo se añade un método a la clase Persona:

Persona.prototype.nuevoMetodo = function() {
  console.log(`Mi nombre es ${this.nombre}`);
};

Este método, al ser llamado, accederá a la propiedad nombre de la instancia a través de this y permitirá imprimir el nombre almacenado:

persona1.nuevoMetodo(); // Salida: Mi nombre es Alice

El uso de this.nombre en el método nuevoMetodo asegura que siempre haga referencia a la propiedad nombre de la instancia actual, encapsulando así correctamente la funcionalidad dentro de la clase.

Recomendaciones al utilizar "this"

  • Claridad y contexto: Asegúrese de comprender en qué contexto se utiliza "this", ya que su valor puede cambiar dependiendo de cómo se llame a una función o método.
  • Constructores y métodos encadenados: Use "this" para retornar el objeto de la instancia misma, lo que permite encadenar métodos y operaciones que siempre refieren al objeto actual.
  • Arrow functions: Tenga cuidado al utilizar funciones flecha (arrow functions) con "this", ya que en este caso "this" no hace referencia al objeto de instancia, sino al "this" del contexto léxico más cercano.

Como conclusión de las instrucciones, hemos visto cómo "this" proporciona una referencia central a las propiedades de las clases y sus instancias, lo que es esencial para la programación orientada a objetos en JavaScript. ¡Sigue practicando y explorando nuevas formas de aplicar "this" en tus proyectos para mejorar tus habilidades de programación!