open

Javascript : Qu'est ce que this ? Que vaut this ?

#1 Qu'est ce que this ? open

This est un opérateur. Il retourne une valeur qui dépend de deux choses :

  1. L'endroit où l'opérateur est évalué dans le script.
  2. L'utilisation ou pas du mode strict.

This est souvent utilisé dans des fonctions que celles-ci soient de simples fonctions ou des méthodes. La valeur de this dépend de l'endroit où sont invoquées ces fonctions. Ce qui fait que this est souvent décrit comme étant un contexte d'exécution.

Néanmoins on peut voir this comme une "sorte de paramètre implicite" qui est passé à une fonction lorsque celle ci est invoquée. C'est en effet une valeur qui va être transmise à la fonction un peu comme les arguments qu'on lui passe.

Sauf pour le mode strict, this prend la valeur d'un objet. C'est donc une référence et vous entendrez souvent dire que this pointe vers tel ou tel autre objet.

#2 This pour une fonction dans la portée globale open

On va commencer par le cas le plus simple, celui d'une fonction déclarée et invoquée dans la portée globale. On va demander à cette fonction de nous retourner sa valeur de this.

Peu importe la manière dont la fonction est déclarée. Elle peut être déclarée comme une fonction classique, ou comme une expression ou être une fonction auto invoquée. Cela ne change rien à la valeur de this.

Faisons un test avec une fonction qui nous retourne sa valeur de this.

this dans la portée globale
Tester le code

On constate que this vaut la valeur window, un objet global qui appartient à l'environnement "navigateur" du moteur Javascript.

Dans ces conditions il est logique de se poser une question : Que donnera ce code si je l'exécute sous node.js puisque sous node.js nous avons un environnement "serveur" et que window n'existe pas ?

On fait un test et là on constate qu'il s'agit aussi d'une valeur globale Object [global] qui dépend de l'environnement. Voir ci-dessous le résultat d'une exécution sous node.js depuis VS Code.

Exemple de valeur de this du côté de node

Maintenant on continue nos tests en exécutant les mêmes codes mais cette fois ci en mode strict. Et dans ce cas, des deux cotés, this prend la valeur undefined.

this en mode strict
Tester le code

Tous ces petits tests vous permettent de constater que même pour cet exemple qui est ultra simple et bien il faut être précis tant les situations sont nombreuses.

#3 This pour un gestionnaire d'événement open

Quand un gestionnaire d'événement invoque son callback, this pointe sur l'élément sur lequel le gestionnaire est posé.

this est une référence. Si on regarde de près, le console.log(this) va afficher le contenu pointé par la référence c'est à dire le code HTML du bouton. Quand on prend comme ça le contenu pointé par un pointeur on dit qu'on déréférence le pointeur.

Pour ceux qui ont fait du C ou C++ on met l'opérateur * devant le pointeur pour prendre le contenu et déréférencer. Ici en Javascript c'est le console.log qui fait ce déréférencement de manière implicite.

this pour un gestionnaire
Tester le code

#4 This pour une méthode d'un objet open

Dans l'exemple ci-dessous, on crée un objet, on appelle une méthode et on regarde la valeur de this. Dans ce cas this pointe sur l'instance qui est créée.

this pour un objet
Tester le code

Maintenant on va ajouter un bouton avec un gestionnaire d'événement sur ce bouton. On va intercepter un clic sur ce bouton.

On va mettre la méthode obj.set de l'objet comme callback du gestionnaire. Au moment de l'appel du callback c'est un this qui pointe sur l'élément button qui est passé au callback. Il va garder cette valeur dans l'instance de l'objet obj si bien que c'est sur l'élément button que va être exécuté un this.click=true et pas sur l'instance de l'objet.

Tester le code

This pointe sur une instance button qui est accrochée dans l'arbre DOM. La constante but aussi. Vous pouvez voir la valeur de click en dépliant button ou en examinant but.click. Ici j'ai fait un console.dir pour avoir une notation Json de l'objet pointé.

Exécution

Le debugger nous permet aussi de voir la valeur de this facilement. Il suffit de mettre un point d'arrêt dans la méthode set et vous pouvez voir la valeur de this.

Vous pouvez même voir beaucoup plus que cela puisque vous pouvez voir pour chaque portée, on dit aussi pour chaque scope, l'ensemble des "variables" qui sont visibles à ce point de l'exécution du script.

On peut voir this au debugger

Ce problème peut être facilement résolu en appliquant la fonction bind au callback qui est passé au gestionnaire. Nous allons détailler cela dans le tuto qui suit dans lequel nous étudieront les fonctions call apply et bind dont le but est la maîtrise de la valeur de this.

#5 This avec un fonction fléchée open

Maintenant dans la déclaration de notre classe on modifie la méthode set et on remplace par une fonction fléchée.

Tester le code

On constate que le this reste pointé sur l'objet ce qui est logique car une fonction fléchée hérite du this de la portée englobante au moment de sa déclaration. Ici, dans l'objet, this pointe sur l'instance. La fonction fléchée est déclarée dans l'instance donc elle hérite de ce this et au moment de l'invocation elle se le garde.

Vous pouvez constater ci-dessous que la valeur a été mémorisée dans l'objet bien que la fonction ait été invoquée dans le gestionnaire.

this avec des fonctions fléchées