November 30, 2023

Arrow function vs regular function

Remove

En las funciones de flecha (arrow functions), this se refiere al ámbito léxico que rodea a la función de flecha, no necesariamente al objeto global. El ámbito léxico se refiere al ámbito en el que se definió la función de flecha.

En una función regular, this se refiere al objeto que invoca la función. Sin embargo, si una función regular no es invocada por un objeto, this por defecto se referirá al objeto global. Por ejemplo, en un entorno de navegador, el objeto global sería window.

Aquí tienes un ejemplo de cómo funcionan las funciones de flecha:

En este caso, innerFunc es una función de flecha y this se refiere al ámbito que rodea a innerFunc, que en este caso es el método sayName. Como sayName es un método del objeto obj, this se refiere a obj, incluso dentro de la función de flecha.

const obj = {
  name: 'John',
  sayName: function() {
    console.log(this.name); // 'John'
    const innerFunc = () => {
      console.log(this.name); // 'John'
    }
    innerFunc();
  }
};

obj.sayName();

Sin embargo, si innerFunc fuera una función regular, this se referiría al objeto global, ya que la función regular no está siendo invocada por un objeto. A continuación se muestra un ejemplo de esto:

const obj = {
  name: 'John',
  sayName: function() {
    console.log(this.name); // 'John'
    const innerFunc = function() {
      console.log(this.name); // undefined
    }
    innerFunc();
  }
};

obj.sayName();

En este caso, innerFunc es una función regular y this se refiere al objeto que invoca innerFunc. Como innerFunc no es invocado por un objeto, this se refiere al objeto global, que no tiene una propiedad name, por lo que se imprime undefined.

Written by Pol Valle

I am particularly drawn to developing applications that are not only functional but also visually appealing and easy to use. I accomplish this by implementing SOLID principles and clean architecture, and applying testing to ensure quality.