Vous êtes ici : Accueil des cours Misfu > Informatique > 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.
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.
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.
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().
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 | | | ----------------------------------------------------------
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.
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';">
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.
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';
}