close

JavaScript : Etude de cas, quelle est la valeur de this ?

#1 Introduction open

Dans ce tuto on va examiner la valeur de this dans deux configurations courantes, bien identifiées et qu’il faut connaître.

Précision au niveau du vocabulaire, je dis indifféremment instance ou objet car ça veut dire la même chose et je dis indifféremment référence ou pointeur pour les mêmes raisons.

#2 Cas d'une fonction locale à une autre fonction open

On va examiner le cas d'une fonction locale à une autre fonction et on va regarder ce qui se passe au niveau de leurs this respectifs.

  1. Je vais commencer par déclarer une fonction globale fGlobale. Dans cette fonction je fais un console.dir(this).
  2. Puis dans fGlobale je déclare une fonction locale que j'appelle fLocale. Dans cette fonction je fais aussi un console.dir(this).
  3. Ensuite j'invoque la fonction fLocale.
  4. Enfin j'invoque fGlobale.
Tester le code

J'exécute dans le navigateur et sans surprise si vous avez fait le tuto sur this et bien vous ne serez pas étonné de trouver deux fois l’objet global window comme valeur de this.

Résultat de l'exécution
  1. Maintenant je vais déclarer un objet obj avec un propriété num que j'initialise à 0.
  2. Puis je vais faire un call sur l’appel de fGlobale avec cet objet en argument.
  3. Et je vais me poser la question et c’est là que je voulais en venir : quelle est la valeur de this dans fLocale ?
Tester le code
Résultat de l'exécution

On constate que la valeur de this ne suit pas. Elle n'est pas "transmise" à fLocale. Alors si je veux transmettre la valeur obj au this de fLocale : quelles sont les solutions ?

  1. La première solution serait de mémoriser la valeur de this dans une variable temporaire avec un const tmp = this puis de le récupérer dans fLocale. Ce n'est pas très élégant.
  2. La deuxième solution c'est de refaire un fLocale.call(this). Ca ça fonctionne.
  3. La dernière c'est d'utiliser une fonction fléchée. On va voir ça ci-dessous. Donc je mets en place sur la déclaration de fLocale une fonction fléchée. Dans ces conditions fLocale récupère sa valeur de this dans sa portée englobante soit la valeur obj.
Tester le code
Résultat de l'exécution

#3 Cas d'une fonction locale à la méthode d'un objet open

Maintenant je déclare fGlobale en tant que méthode de l'objet obj et je remets fLocale comme elle était au départ c'est à dire déclarée comme une fonction classique. Je vais voir si dans ce cas le this de fLocale va pointer sur l'instance c'est à dire sur obj. On pourrait quand même espérer que ce soit le cas puisqu'elle est déclarée dans l'instance.

Tester le code
Résultat de l'exécution

On constate que l'on a le même comportement que dans le cas précédent. On se retrouve encore avec un this qui pointe sur window. Et les solutions à mettre en place sont les mêmes si l'on souhaite basculer la valeur de this vers obj.