En bref à ce sujet dans les fonctions javascript

Préface

Il y a beaucoup d’informations sur Internet sur la façon dont cela fonctionne, mais je n’ai toujours pas eu assez de littéralement un peu pour le comprendre.



Récemment, je l'ai néanmoins fait, il me semble, et je voudrais partager avec vous.

Sans beaucoup de mots

Nous couvrirons à la fois des exemples simples et complexes - ainsi tout le monde sera intéressé.



Il y a deux points principaux que nous allons examiner:



(1) Pour les fonctions déclarées via function () {}, ceci est calculé au moment de l'appel.

(2) Pour les fonctions fléchées, ceci est défini lors de la création de la fonction.



Commençons par quelques exemples simples.

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

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

Et si nous ajoutions ces fonctions à l'objet:

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

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

Découvrons-le.



L'appel de cat.globalFunc () nous a renvoyé un objet cat. Pour faciliter la compréhension, vous pouvez le considérer comme ceci: "ceci, lors de l'appel de fonctions déclarées via function () {}, sera égal à l'objet avant le point".



Alors pourquoi cat.globalArrowFunc () a-t-il renvoyé undefined pour nous? Le fait est que la valeur this pour une fonction de flèche est déterminée au moment de sa création, et lorsque nous l'avons créée, cette valeur n'était pas définie.



Créons maintenant un objet avec quelques méthodes:

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

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

Pourquoi donc?



dog.localFunc () - parce que l'objet avant le chien de point.

dog.localArrowFunc () - car à l'intérieur de l'objet, il s'agit également d'un objet global, ce qui signifie que nous ne sommes pas définis.



Compliquons un peu notre exemple.

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

Découvrons-le!



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



Pourquoi cela se produit-il?



Parce que lorsque nous avons créé l'objet, nous l'avons écrit la fonction localFunc. Et, comme nous nous en souvenons des exemples précédents, pour elle c'est l'objet avant le point, c'est-à-dire {name: 'Viking', ...}. Parlons maintenant de la fonction arrowFuncInLocalFunc elle-même - elle est créée immédiatement lorsque localFunc est appelé et se souvient de la valeur this qui était à l'endroit de sa création. Nous obtenons donc que arrowFuncInLocalFunc nous renvoie {name: 'Viking',…}.



(2) funcInLocalFunc () // undefind



Pourquoi cela se produit-il?



Comme nous l'avons dit précédemment, pour les fonctions déclarées via function () {}, cette valeur est déterminée au moment de l'appel et est égale à l'objet avant le point. Dans ce cas, nous n'avons pas d'objet devant le point, ce qui signifie qu'il s'agit d'un objet global, ou, dans notre cas, indéfini.



(3) arrowFuncInLocalArrowFunc () // undefined



Pourquoi cela se produit-il?



Cet exemple est très similaire à (1), seule notre fonction arrowFuncInLocalArrowFunc est créée à l'intérieur de la même fonction de flèche. Nous rappelons également que les fonctions fléchées au moment de leur déclaration écrivent cette valeur depuis leur environnement. Cependant, notre fonction a été créée à l'intérieur de localArrowFunc, pour lequel cela n'est pas défini. Cela signifie que pour arrowFuncInLocalArrowFunc, cela ne sera pas défini.



(4) funcInLocalArrowFunc () // undefined



Pourquoi cela se produit-il?



Exactement la même raison que dans (2) pour funcInLocalFunc



Regardons un autre exemple:

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

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

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

Cela est dû au fait que getFuncWithTomName crée et renvoie une fonction de flèche et que lorsque la fonction de flèche est créée, il s'agit du même que celui de getFuncWithTomName. Et pour getFuncWithTomName, il s'agit de l'objet avant dot (cat).

Total

Le contexte des fonctions fléchées est déterminé lors de leur création.



Le contexte de function () {} est défini lors de leur appel et est égal à l'objet avant le point.