Función flecha vs función regular

Question

Siguiendo un tutorial de Vue, en el que se hace un fetch a una API que regresa una imagen de gatos, llegué de pronto a una situación curiosa.

new Vue({
  el: '#app',
  data: {   
    catSrc: null,
  },

...

this.catSrc = null;
let res = fetch("https://api.thecatapi.com/v1/images/search",{
    method: "GET",
    headers: {
      "x-api-key": API_KEY,
      "Accept":"application/json",
      },
    })
    .then(function(response) {
      return response.json();
    })
    .then(function(data){
      return data[0].url;
   });
      
 let getImg = () => {
   res.then((result) => {
   this.catSrc = result;
   });
 };

getImg();

Lo anterior hace el fetch y logro devolver el valor de la promesa a la variable dinamica de Vue, pero como primero se me ocurrió "convertir" la función flecha, la alternativa nunca me regresó el valor que sí regresa la función flecha.

¿Alguien puede explicarme por qué de esto?

La función "normal" que traté de utilizar fue:

let getImg = function () {
  res.then(function (result) {
    this.catSrc = result;
  });
};

getImg();

Básicamente a que el ámbito al que se refiere `this` cuando usas la función tradicional, es el de esa función. Y en las funciones flecha `this` proviene del contexto léxico circundante, o sea el ámbito en que se crean. Te sugiero leer https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Functions/Arrow_functions#comparaci%C3%B3n_de_funciones_tradicionales_con_funciones_flecha — porloscerros Ψ, Aug 15 '21 at 23:33

ivanph · Accepted Answer · 2021-08-15T23:52:34.937

2

Es por cómo cambia el contexto de this en una función normal y en una función flecha. El contexto de ejecución cambia mucho.

La propiedad this.catSrc pertenece al contexto del objeto vue, cuando se declaran nuevas funciones con function() que no son propiedades de un objeto estas funciones tienen su propio contexto. Por lo que dentro de ellas this ya no pertenece al objeto vue si no que pertenece al contexto de la function() que puede ser el objeto window por defecto o undefined en el modo estricto de js.

Las funciones flecha no declaran nuevos contextos y por tanto cualquier this dentro de ellas hace referencia al contexto padre, en este caso el objeto vue que es el que tiene la propiedad que interesa.

edited Aug 15 '21 at 23:52

answered Aug 15 '21 at 23:26

ivanph

417
4

Como podria hacer la llamada al this del entorno de Vue dentro de la funcional regular? – AugustoM Aug 15 '21 at 23:58
1

Dentro de un objeto Vue puedes declarar dentro de la propiedad methods nuevas funciones que pueden ser llamadas manteniendo el contexto this al ser propiedades de un objeto (https://v1.vuejs.org/guide/events.html). Sin embargo, la función del then no veo forma que pueda funcionar sin función flecha. – ivanph Aug 16 '21 at 00:17
gracias por contestar – AugustoM Aug 16 '21 at 00:24

Función flecha vs función regular

1 Answers1