10. this en JavaScript

La palabra reservada this es una característica central y a menudo confusa en Javascript. Es un concepto fundamental que juega un papel crucial en la programación orientada a objetos y en la forma en que se refieren y manipulan los objetos en Javascript. En este capítulo, exploraremos en detalle qué es la palabra reservada this, cómo se comporta en diferentes contextos y cómo se puede utilizar de manera efectiva en el desarrollo de aplicaciones Javascript.

¿Qué es la palabra reservada «this»?

En JavaScript, this es una palabra reservada que se utiliza para hacer referencia al objeto actual, al objeto que está ejecutando el código actualmente. En cada contexto de ejecución, el valor de this puede ser diferente y está determinado por cómo se invoca una función.

El valor de this en Javascript puede variar según el contexto en el que se utilice la función y la forma en que se la invoque. En general, this siempre hace referencia al objeto que posee el código que se está ejecutando actualmente.

Comportamiento de «this» en Diferentes Contextos

El valor de this puede cambiar dependiendo de cómo se invoque una función. A continuación, se explican los diferentes contextos en los que se puede utilizar la palabra reservada this y cómo se comporta en cada caso.

1. En el Contexto Global

Cuando se utiliza this en el contexto global (fuera de cualquier función), su valor se refiere al objeto global. En los navegadores, el objeto global es window. Por ejemplo:

console.log(this); // Muestra el objeto global "window" en el navegador

2. En una Función Normal

Cuando this se utiliza dentro de una función normal, su valor depende de cómo se llama la función.

2.1. Función en Modo Estricto

En el modo estricto (use strict), si la función se llama sin un contexto específico, el valor de this será undefined.

function miFuncion() {
  "use strict";
  console.log(this); // Muestra "undefined"
}

miFuncion();

2.2. Función en Modo No Estricto

En el modo no estricto, si la función se llama sin un contexto específico, el valor de this será el objeto global.

const miObjeto = {
  nombre: "John",
  saludar: function() {
    console.log("Hola, mi nombre es " + this.nombre);
  }
};

miObjeto.saludar(); // Muestra "Hola, mi nombre es John"

3. En una Función de Flecha

Las funciones flecha (=>) en Javascript tienen un comportamiento diferente con respecto a this. En una función flecha, this mantiene el valor del contexto léxico (el valor de this fuera de la función flecha).

const miObjeto = {
  nombre: "John",
  saludar: function() {
    setTimeout(() => {
      console.log("Hola, mi nombre es " + this.nombre);
    }, 1000);
  }
};

miObjeto.saludar(); // Muestra "Hola, mi nombre es John" después de 1 segundo

En este ejemplo, this en la función flecha dentro del setTimeout hace referencia al mismo this que en la función saludar.

4. En un Constructor

Cuando se utiliza this dentro de un constructor (una función constructora que se invoca con el operador new para crear objetos), this hace referencia al objeto que se está creando.

function Persona(nombre) {
  this.nombre = nombre;
}

const persona1 = new Persona("John");
console.log(persona1.nombre); // Muestra "John"

5. Utilizando «call», «apply» o «bind»

JavaScript proporciona los métodos call, apply y bind que permiten establecer explícitamente el valor de this en una función. Estos métodos son útiles cuando se necesita cambiar el valor de this en una función.

function saludar() {
  console.log("Hola, mi nombre es " + this.nombre);
}

const persona = {
  nombre: "John"
};

saludar.call(persona); // Muestra "Hola, mi nombre es John"
saludar.apply(persona); // Muestra "Hola, mi nombre es John"

const saludarPersona = saludar.bind(persona);
saludarPersona(); // Muestra "Hola, mi nombre es John"

En el ejemplo anterior, al utilizar call y apply, el valor de this se establece explícitamente en el objeto «persona», mientras que bind crea una nueva función con this establecido en el objeto «persona», que luego se puede llamar como cualquier otra función.

Mejores prácticas al utilizar «this»

El comportamiento de this en Javascript puede ser complejo y propenso a errores si no se comprende adecuadamente. A continuación, se presentan algunas mejores prácticas para utilizar this de manera efectiva:

  1. Entender el contexto: Es fundamental comprender el contexto en el que se invoca una función para determinar el valor de this. Prestar atención a cómo se llama la función y dónde se define.
  2. Usar Funciones flecha con cuidado: Las funciones flecha pueden ser útiles para mantener el valor de this consistente con el contexto léxico, pero es importante tener en cuenta que pueden no comportarse como se espera en ciertos escenarios, como al definir métodos de objetos.
  3. Evitar el uso de «this» en funciones anidadas: Cuando se utilizan funciones anidadas, es posible que this se refiera a un objeto diferente al esperado. En estos casos, se puede almacenar this en una variable local y utilizar esa variable en lugar de this.
const miObjeto = {
  nombre: "John",
  saludar: function() {
    const self = this;
    setTimeout(function() {
      console.log("Hola, mi nombre es " + self.nombre);
    }, 1000);
  }
};

miObjeto.saludar(); // Muestra "Hola, mi nombre es John" después de 1 segundo
  1. Utilizar call, apply o bind cuando sea necesario: Estos métodos proporcionan una forma explícita de establecer el valor de this en una función, lo que puede ser útil en ciertos escenarios.

Conclusiones

La palabra reservada this en Javascript es un concepto fundamental que permite referenciar al objeto actual en diferentes contextos de ejecución. Su valor puede variar según cómo se invoque una función y en qué contexto se encuentre.

Comprender el comportamiento de this en Javascript es esencial para escribir código limpio y eficiente. Al utilizar this de manera efectiva, los desarrolladores pueden acceder y manipular objetos de manera dinámica y crear aplicaciones más sofisticadas y orientadas a objetos.

Si bien this puede resultar confuso en algunos casos, se vuelve más claro y fácil de manejar con la práctica y una comprensión sólida de los diferentes contextos en los que se puede utilizar. Con la práctica y la atención a las mejores prácticas, los desarrolladores pueden aprovechar al máximo la palabra reservada this y escribir código más legible y mantenible en Javascript.

Scroll al inicio