Vous êtes ici : Accueil des cours Misfu > Apprendre la programmation > Cours Javascript > Le mot-clé this

Traduction de la page The this keyword rédigée par Peter-Paul Koch et traduite par Christophe Bruggeman

La traduction est en cours, si vous trouvez une erreur sur une page ou si vous souhaitez suggérer une amélioration, n'hésitez pas à utiliser le forum.

Le mot-clé this

Un des mots-clés les plus puissant de JavaScript est this. Malheureusement il est difficile de l'employer si vous ne savez pas exactement comment il fonctionne.

Au-dessous j’explique comment l'employer dans le traitement d'événement (event handling). Plus tard j'ajouterai quelques informations sur d'autres utilisations de this.
Voyez également le code source de mon exemple d'événement pour un exemple pratique de l'utilisation de this.

Propriétaire

La question dont nous allons discuter dans le reste de la page est: A quoi ce réfère this dans notre fidèle fonction doSomething()?

function doSomething()
{
   this.style.color = '#cc0000';
}

En JavaScript this se rapporte toujours au « propriétaire » de la fonction que nous exécutons, ou plutôt, à l'objet dont la fonction est une méthode. Quand nous définissons notre fidèle fonction doSomething() dans une page, son propriétaire est la page, ou plutôt, l’objet window (ou objet global) de Javascript. Le code HTML prend déjà en compte la propriété onclick.

Cette "propriété" est le résultat de l'approche du JavaScript orientée objet. Voyez la page Objets en tant que tableaux associatifs pour encore plus d'information.

------------ window --------------------------------------
|                                          / \           |
|                                           |            |
|                                          this          |
|   ----------------                        |            |
|   | HTML element | <-- this         -----------------  |
|   ----------------      |           | doSomething() |  |
|               |         |           -----------------  |
|          --------------------                          |
|          | onclick property |                          |
|          --------------------                          |
|                                                        |
----------------------------------------------------------

Si nous exécutons doSomething() sans plus de préparation, alors le mot-clé this se réfère à window et la fonction essaye de changer le style.color de window. Puisque window n'a pas d’objet style la fonction échoue misérablement et produit des erreurs JavaScript.

Reproduction

Ainsi si nous voulons employer this à son maximum, nous devons faire attention que la fonction qui l’utilise soit "possédé" par le bon élément HTML. En d'autres termes, nous devons copier la fonction dans la propriété de notre onclick. Traditional event registration faites attention à lui.

element.onclick = doSomething;

La fonction est copiée dans sa totalité dans la propriété onclick (qui devient maintenant une méthode). Ainsi si le traiteur d'événement (event handler) est exécuté this se réfère à l'élément HTML et sa couleur color est changée.

------------ window --------------------------------------
|                                                        |
|                                                        |
|                                                        |
|   ----------------                                     |
|   | HTML element | <-- this         -----------------  |
|   ----------------      |           | doSomething() |  |
|               |         |           -----------------  |
|          -----------------------          |            |
|          |copy of doSomething()|  <-- copy function    |
|          -----------------------                       |
|                                                        |
----------------------------------------------------------

Le principe bien sûr c’est que nous pouvons copier la fonction dans plusieurs traiteurs d’événements (event handlers). A chaque fois this se réfèrera au bon élément HTML:

------------ window --------------------------------------
|                                                        |
|                                                        |
|                                                        |
|   ----------------                                     |
|   | HTML element | <-- this         -----------------  |
|   ----------------      |           | doSomething() |  |
|               |         |           -----------------  |
|          -----------------------          |            |
|          |copy of doSomething()|  <-- copy function    |
|          -----------------------          |            |
|                                           |            |
|   -----------------------                 |            |
|   | another HTML element| <-- this        |            |
|   -----------------------     |           |            |
|               |               |           |            |
|          -----------------------          |            |
|          |copy of doSomething()|  <-- copy function    |
|          -----------------------                       |
|                                                        |
----------------------------------------------------------

De cette façon vous employez this à son maximum. Chaque fois que la fonction est appelé, this se réfère à l'élément HTML qui est en train de traiter l'événement, l'élément HTML qui est "propriétaire" de la copie de doSomething().

Référence

Cependant, si vous employez inline event registration

<element onclick="doSomething()">

vous ne devez pas copiez la fonction! A la place, vous devez vous y référer, et la différence est cruciale. La propriété onclick ne contient pas la fonction actuelle, mais simplement un appel de fonction:

doSomething();

Et elle indique “Go to doSomething() and execute it.” quand nous arrivons à doSomething() le mot-clé this réfère à nouveau à l'objet global window et la fonction retourne des messages d'erreur.

------------ window --------------------------------------
|                                          / \           |
|                                           |            |
|                                          this          |
|   ----------------                        |            |
|   | HTML element | <-- this         -----------------  |
|   ----------------      |           | doSomething() |  |
|               |         |           -----------------  |
|          -----------------------         / \           |
|          | go to doSomething() |          |            |
|          | and execute it      | ---- reference to     |
|          -----------------------       function        |
|                                                        |
----------------------------------------------------------

La différence

Si vous voulez employer this pour accéder à l'élément HTML qui manipule l'événement, vous devez vous assurer que le mot-clé this est réellement écrit dans la propriété onclick. C’est seulement dans ce cas qu’elle se réfèrera à l'élément HTML, et que le event handler sera enregistré. Ainsi si vous faites

element.onclick = doSomething;
alert(element.onclick)

vous obtenez

function doSomething()
{
	this.style.color = '#cc0000';
}

Comme vous pouvez le voir, le mot-clé this est présent dans la méthode onclick. Par conséquent elle se réfère à l'élément HTML.

Mais si vous faites

<element onclick="doSomething()">
alert(element.onclick)

vous obtenez

function onclick()
{
	doSomething()
}

C'est simplement une référence à la fonction doSomething(). Le mot-clé this n'est pas présent dans la méthode onclick donc il ne se réfère pas à l'élément HTML.

Exemples - reproduction

this est écrit dans la méthode onclick dans les cas suivants:

element.onclick = doSomething
element.addEventListener('click',doSomething,false)
element.onclick = function () {this.style.color = '#cc0000';}
<element onclick="this.style.color = '#cc0000';">

Exemples - référant

Dans les cas suivants this se réfère à window:

element.onclick = function () {doSomething()}
element.attachEvent('onclick',doSomething)
<element onclick="doSomething()">

Notez la présence de attachEvent(). L'inconvénient principal du modèle d'enregistrement d'évènement de Microsoft(Microsoft event registration model) est que attachEvent() crée une référence à la fonction et ne la copie pas. Par conséquent il est parfois impossible de connaître quel HTML manipule l’évènement actuellement.

Combinaison

En utilisant l'enregistrement intégré d'événement (inline event registration) vous pouvez également envoyer this à la fonction de sorte que vous puissiez encore l'utiliser:

<element onclick="doSomething(this)">

function doSomething(obj)
{
	// ceci est présent dans le event handler et est envoyé à la fonction
	// se réfère maintenant à l'élément HTML, donc nous pouvons faire
	obj.style.color = '#cc0000';
}

Cours JavaScript : Introduction Javascript Ajouter du Javascript Détection d'objet Déclarations Fontions String DOM Accessibilité Booléen DOM intermédiaire Objets This MouseOver Imprimer Détection navigateur