Brevemente sobre esto en funciones javascript

Prefacio

Hay mucha información en Internet sobre cómo funciona esto, pero todo el tiempo no tuve suficiente literalmente un poquito para entenderlo por completo.



Recientemente, sin embargo, según me parece, hice esto y me gustaría compartirlo con ustedes.

Sin muchas palabras

Cubriremos ejemplos simples y complejos, para que todos estén interesados.



Hay dos puntos principales que veremos:



(1) Para las funciones declaradas mediante la función () {}, esto se calcula en el momento de la llamada.

(2) Para las funciones de flecha, esto se define cuando se crea la función.



Comencemos con algunos ejemplos simples.

function globalFunc() {
  console.log(this);
}
const globalArrowFunc = () => {
  //      ,  this - window/undefined
  //   ,   use strict   this === undefined
  console.log(this);
}

globalFunc(); // undefined
globalArrowFunc(); // undefined

¿Qué pasa si agregamos estas funciones al objeto:

const cat = {
  name: 'Pirate',
  globalFunc,
  globalArrowFunc
};

cat.globalFunc(); // { name: 'Pirate', ... }
cat.globalArrowFunc(); // undefined

Vamos a averiguarlo.



Llamar a cat.globalFunc () nos devolvió un objeto cat. Para facilitar la comprensión, puede pensar en ello así "esto, cuando se llaman funciones declaradas a través de la función () {}, será igual al objeto antes del punto".



Entonces, ¿por qué cat.globalArrowFunc () regresó indefinido para nosotros? El hecho es que el valor this para una función de flecha se determina en el momento de su creación, y cuando lo creamos, este valor no estaba definido.



Ahora creemos un objeto con un par de métodos:

const dog = {
  name: 'Viking',
  //        
  //       
  localFunc: function() {
    console.log(this);
  },
  localArrowFunc: () => {
    console.log(this);
  }
};

dog.localFunc(); // { name: 'Viking', ... }
dog.localArrowFunc(); // undefind

¿Porqué es eso?



dog.localFunc () - porque el objeto antes del punto dog.

dog.localArrowFunc () - porque dentro del objeto también es un objeto global, lo que significa que no estamos definidos.



Compliquemos un poco nuestro ejemplo.

const dog = {
  name: 'Viking',
  localFunc: function() {
    const arrowFuncInLocalFunc = () => {
      console.log(this);
    };
    function funcInLocalFunc() {
      console.log(this);
    };
    arrowFuncInLocalFunc(); // 1
    funcInLocalFunc(); // 2
  },
  localArrowFunc: () => {
    const arrowFuncInLocalArrowFunc = () => {
      console.log(this);
    };
    function funcInLocalArrowFunc() {
      console.log(this);
    };
    arrowFuncInLocalArrowFunc(); // 3
    funcInLocalArrowFunc(); // 4
  }
};

dog.localFunc();
// 1 - { name: 'Viking', ... }
// 2 - undefind
dog.localArrowFunc();
// 3 - undefind
// 4 - undefind

¡Vamos a resolverlo!



(1) arrowFuncInLocalFunc () // {nombre: 'Viking',…}



¿Por qué sucede esto?



Porque cuando creamos el objeto, lo escribimos en la función localFunc. Y, como recordamos de los ejemplos anteriores, para ella este es el objeto antes del punto, es decir, {nombre: 'Viking', ...}. Ahora hablemos de la función arrowFuncInLocalFunc en sí: se crea inmediatamente cuando se llama a localFunc y recuerda el valor this que estaba en el lugar de su creación. Así obtenemos que arrowFuncInLocalFunc nos devuelve {nombre: 'Viking',…}.



(2) funcInLocalFunc () // undefind



¿ Por qué sucede esto?



Como dijimos antes, para las funciones declaradas mediante function () {}, este valor se determina en el momento de la llamada y es igual al objeto antes del punto. En este caso, no tenemos un objeto delante del punto, lo que significa que este es un objeto global o, en nuestro caso, indefinido.



(3) arrowFuncInLocalArrowFunc () // undefined



¿Por qué sucede esto?



Este ejemplo es muy similar a (1), solo nuestra función arrowFuncInLocalArrowFunc se crea dentro de la misma función de flecha. También recordamos que las funciones de flecha en el momento de su declaración escriben en este valor desde su entorno. Sin embargo, nuestra función se creó dentro de localArrowFunc, por lo que esto no está definido. Esto significa que para arrowFuncInLocalArrowFunc esto no estará definido.



(4) funcInLocalArrowFunc () // indefinido



¿Por qué sucede esto?



Exactamente la misma razón que en (2) para funcInLocalFunc



Veamos otro ejemplo:

const cat = {
  name: 'Tom',
  getFuncWithTomName: function() {
    return () => {
      console.log(this.name);
    }
  }
};

const mouse = {
  name: 'Jerry',
  logName: cat.getFuncWithTomName()
};

mouse.logName(); // Tom o_O !?

Esto se debe a que getFuncWithTomName crea y devuelve una función de flecha, y cuando se crea la función de flecha, es la misma que la de getFuncWithTomName. Y para getFuncWithTomName, este es el objeto antes de dot (cat).

Total

El contexto de las funciones de flecha se determina cuando se crean.



El contexto de la función () {} se define cuando se llaman y es igual al objeto antes del punto.