May 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'm particularly drawn to building apps that are not only functional but also visually appealing and easy to use. I do it by applying SOLID principles, clean architecture and testing to ensure quality.