C’est le premier article d’une série que je fais qui se concentre sur l’apprentissage de ce que this est vraiment en JS. Afin de déterminer correctement à quoi this se lie, nous devons d’abord comprendre quelques concepts de base dont nous aurons besoin pour déterminer la liaison this dans JS et savoir quel est le site d’appel d’une fonction est l’un de ces concepts cruciaux.

Avant de plonger dans CE qu’est le site d’appel d’une fonction, essayons d’abord de comprendre POURQUOI nous devons connaître le site d’appel en premier lieu. Les raisons sont les suivantes:

1. C’est probablement quelque chose de très facile à « site » dans un morceau de code. Cependant, parfois, certains modèles de codage peuvent masquer le site d’appel réel. Ainsi, pour lever toute ambiguïté liée à ce sujet, vous devez comprendre call-site (très clairement).
2. C’est la seule chose qui compte si vous voulez comprendre comment fonctionne la liaison this.

Ceci étant dit, comprenons maintenant le site d’appel d’une fonction.

Généralement, le site d’appel d’une fonction est « l’endroit d’où la fonction particulière est appelée dans un morceau de code donné ». Ainsi, allez à cet emplacement et vous savez où se trouve le site d’appel de cette fonction!

Maintenant, à travers l’extrait de code suivant, repérez où se trouvent les sites d’appel des fonctions :

C’était facile! Mais il y a un léger problème avec cette façon de trouver le site d’appel : parfois, il peut être difficile de le repérer manuellement (par exemple : imaginez 1000 lignes de code et vous devez trouver le site d’appel manuellement!).

C’est là que la pile d’appels entre en jeu. Qu’est-ce qu’une pile d’appels ? C’est une pile (comme son nom l’indique). De quoi ? Des fonctions. Quelles fonctions ? De toutes les fonctions qui ont été invoquées. Pour quoi faire? Pour vous amener là où vous en êtes en ce moment dans votre exécution (c’est-à-dire le moment actuel de l’exécution).

Si vous regardez votre pile d’appels, le site d’appel réel se TROUVE DANS l’appel de la fonction AVANT la fonction en cours d’exécution.

Maintenant, utilisons la pile d’appels pour trouver les sites d’appels des fonctions dans le même code utilisé ci-dessus :

ASTUCE RAPIDE: Plutôt que de déterminer manuellement l’ordre dans lequel les fonctions ont été appelées (c’est sujet aux erreurs et fastidieux), vous devez utiliser l’outil de débogage dans votre navigateur pour voir la pile d’appels. Le débogueur s’arrêtera à la ligne que vous définissez votre point d’arrêt et vous montrera la pile d’appels, c’est-à-dire qu’il vous montrera toutes les fonctions qui ont été invoquées pour vous amener à cet emplacement dans le code. Par conséquent, le site d’appel réel est la deuxième fonction de haut dans cette pile d’appels (c’est-à-dire DANS l’invocation de la fonction AVANT la fonction en cours d’exécution).

Ainsi, vous pouvez trouver le site d’appel d’une fonction de 2 manières:

1. en repérant manuellement l’emplacement où la fonction a été invoquée dans un morceau de code donné, ou
2. en regardant la pile d’appels (de préférence en utilisant des outils de débogage).

En cas de doute (et en général aussi), utilisez toujours la pile d’appels pour identifier correctement le site d’appel d’une fonction.

C’est tout! C’est tout ce que vous devez savoir pour trouver le site d’appel d’une fonction!

Prochaines étapes:

Le prochain article de cette série, JavaScript: Apprenez ‘ceci’ – alors qu’est-ce qu’un CONSTRUCTEUR de toute façon?, se concentre sur la compréhension des constructeurs en JS.

Merci d’avoir lu. 🙂