La palabra clave this en JavaScript puede resultar confusa porque se comporta de manera diferente en funciones normales y funciones de flecha. En esta publicación de blog, explicaremos cómo funciona esto en ambos tipos de funciones, exploraremos por qué existen estas diferencias y brindaremos el conocimiento básico que necesita para comprender esto en JavaScript.

Funciones regulares

Las funciones regulares en JavaScript se definen usando la palabra clave function. El valor de this en estas funciones depende de cómo se llama la función. A continuación se muestran varios ejemplos:

1. Contexto global

• Modo no estricto:

  function regularFunction() {
      console.log(this);
  }

  regularFunction(); // Logs the global object (window in browsers)

• Explicación: En modo no estricto, cuando se llama a una función en el contexto global (no como método de un objeto), esto se refiere al objeto global (ventana en navegadores o global en Node .js).

  • Modo estricto:

  'use strict';

  function regularFunction() {
      console.log(this);
  }

  regularFunction(); // Logs undefined

• Explicación: En modo estricto, esto permanece indefinido cuando se llama a una función en el contexto global, lo que proporciona un entorno más seguro al evitar modificaciones accidentales al objeto global.

2. Llamada al método

Cuando se llama a una función como método de un objeto, esto se refiere a ese objeto.

• Ejemplo:

  const obj = {
      method: function() {
          console.log(this);
      }
  };

  obj.method(); // Logs obj

• Explicación: En este caso, esto apunta a obj porque la función se llama como un método de obj.

  • Modo estricto: El comportamiento sigue siendo el mismo en modo estricto.

3. Llamada al constructor

Cuando una función se usa como constructor (llamada con la palabra clave new), esto se refiere a la instancia recién creada.

• Ejemplo:

  function Person(name) {
      this.name = name;
      this.sayHello = function() {
          console.log(`Hello, my name is ${this.name}`);
      };
  }

  const person1 = new Person('Alice');
  person1.sayHello(); // Logs "Hello, my name is Alice"

  const person2 = new Person('Bob');
  person2.sayHello(); // Logs "Hello, my name is Bob"

• Explicación: Cuando se llama con new, esto dentro de la función constructora de Persona se refiere a la nueva instancia que se está creando. Cada nueva instancia (persona1 y persona2) obtiene su propia propiedad de nombre y método sayHello.

  • Modo estricto: El comportamiento sigue siendo el mismo en modo estricto.

4. Vinculación explícita

Puedes vincular esto explícitamente usando call, apply o bind.

• Ejemplo:

  function regularFunction() {
      console.log(this);
  }

  const obj = { value: 42 };

  regularFunction.call(obj);  // Logs obj
  regularFunction.apply(obj); // Logs obj

  const boundFunction = regularFunction.bind(obj);
  boundFunction();            // Logs obj

• Explicación: llamar y aplicar inmediatamente invoca la función con esto configurado en obj, mientras que bind crea una nueva función con esto vinculado permanentemente a obj.

  • Modo estricto: El comportamiento sigue siendo el mismo en modo estricto.

Funciones de flecha

Las funciones de flecha, introducidas en ES6, no tienen su propio contexto. En cambio, heredan esto del ámbito circundante (léxico). Esto hace que las funciones de flecha sean útiles en determinadas situaciones.

1. Léxico esto

Las funciones de flecha heredan esto del alcance en el que están definidas.

• Modo no estricto:

  const arrowFunction = () => {
      console.log(this);
  };

  arrowFunction(); // Logs the global object (window in browsers)

• Explicación: Las funciones de flecha no tienen su propio this; Usan esto desde el alcance circundante. Aquí, se refiere al objeto global porque la función está definida en el ámbito global.

  • Modo estricto:

  'use strict';

  const arrowFunction = () => {
      console.log(this);
  };

  arrowFunction(); // Logs undefined

• Explicación: En modo estricto, si el alcance circundante es global, esto permanece indefinido como heredado del alcance circundante.

2. Llamada al método

A diferencia de las funciones normales, las funciones de flecha no obtienen su propio this cuando se llaman como métodos. Heredan esto del alcance adjunto.

• Ejemplo:

  const obj = {
      method: () => {
          console.log(this);
      }
  };

  obj.method(); // Logs the global object (window in browsers) or undefined in strict mode

• Explicación: Las funciones de flecha no vinculan su propio this sino que lo heredan del alcance léxico. En este ejemplo, esto se refiere al objeto global o indefinido en modo estricto, no a obj.

  • Modo estricto: Registros no definidos, no obj.

3. Función de flecha dentro de otra función

Cuando una función de flecha se define dentro de otra función, la hereda de la función externa.

• Ejemplo:

  function outerFunction() {
      const arrowFunction = () => {
          console.log(this);
      };

      arrowFunction();
  }

  const obj = { value: 42, outerFunction: outerFunction };

  obj.outerFunction(); // Logs obj, because `this` in arrowFunction is inherited from outerFunction

• Explicación: En este caso, esto dentro de la función de flecha se refiere a lo mismo que en la función externa, que es obj.

  • Modo estricto: El comportamiento sigue siendo el mismo en modo estricto.

4. Función de flecha en controladores de eventos

Las funciones de flecha en los controladores de eventos heredan esto del alcance léxico circundante, no del elemento que desencadena el evento.

• Ejemplo:

  const button = document.querySelector('button');

  button.addEventListener('click', () => {
      console.log(this);
  }); // Logs the global object (window in browsers) or undefined in strict mode

• Explicación: La función de flecha no vincula esto al elemento del botón; lo hereda del ámbito circundante, que es el ámbito global o indefinido en modo estricto.

  • Modo estricto: Registros no definidos, no el elemento del botón.

¿Por qué estas diferencias?

La diferencia entre las funciones regulares y las funciones de flecha radica en cómo manejan esto:

• Funciones regulares: El valor de esto es dinámico y está determinado por el sitio de llamada (cómo se llama la función).
• Funciones de flecha: El valor de this es léxico y se establece en el momento en que se define la función, según el valor de this del contexto de ejecución adjunto.

Conceptos clave para comprender

Para comprender el comportamiento de esto en JavaScript, necesitas conocer los siguientes conceptos:

1. Contexto de ejecución: El contexto en el que se ejecuta el código, lo que afecta la forma en que se determina.
2. Sitio de llamada: La ubicación en el código donde se llama a una función, lo que influye en el valor de esto en funciones regulares.
3. Alcance léxico: Cómo se hereda esto en las funciones de flecha del alcance circundante.
4. Modo estricto: Cómo el modo estricto cambia el comportamiento predeterminado de esto en ciertos contextos.

Resumen

• Funciones regulares: esto es dinámico y está determinado por el sitio de la llamada.
• Funciones de flecha: esto es léxico y está determinado por el alcance circundante cuando se define la función.

Comprender estas distinciones le ayudará a escribir código JavaScript más predecible y fácil de mantener. Ya sea que esté utilizando funciones normales o funciones de flecha, saber cómo funciona es crucial para un desarrollo efectivo de JavaScript.