Forums : Xul, Xbl, JS...

Aller à la discussion : Plus récente Plus ancienne

# Référence de this

Envoyé par : thefab

Date : 14/08/2006 15:03

Je commence à remplacer l'attribut onload par addEventListener et je me retrouve face à un comportement curieux: this ne fait pas référence au même objet selon que l'appel se fait depuis l'attribut ou addEventListener !

Exemple, j'ai un objet global qui représente ma fenêtre:

var gWindow =
    {
    param: "gWindow",

    onLoad: function(e)
        {
        alert(this);
        alert(this.param);
        }
    };

Si je lie l'évènement load via l'attribut onload:

<window onload="gWindow.onLoad(event);">

this fait bien référence à l'objet où il se trouve (gWindow) et affiche:

[object Object]
gWindow

Alors que si le lie l'évènement load via addEventListener

window.addEventListener("load", gWindow.onLoad, false);

this fait référence à l'objet qui ajoute l'écouteur (window) et affiche:

[object ChromeWindow]
undefined

Je poste ce message pour éviter à d'autre de chercher, mais si quelqu'un sait pourquoi je suis preneur ?

# Re: Référence de this

Envoyé par : laurentj

Date : 16/08/2006 14:30

c'est normal. La valeur de this ne represente pas obligatoirement l'objet dont dépend initialement la méthode dans laquelle le this est utilisé, mais du contexte dans lequel la méthode est executée.

En effet, une fonction, peut être executée comme étant la méthode de n'importe quel objet. (rappel : une fonction, c'est un objet de type Function). Exemple :

 myFunc.call(anObj, arg1, arg2);

Cela execute le code de myFunc dans le contexte de anObj, avec les arguments arg1, arg2.

Or, c'est exactement ce qui se passe dans le gestionnaire d'évènement. Quand il y a un évènement, il execute chaque fonction listener dans le contexte de l'objet de la balise qui reçoit la balise, pour que ce genre de truc fonctionne :

<window onload="this.title ='bar'" />

Or ceci, je ne te cache pas qu'en fait gecko, en voyant cet attribut, fait l'équivalent de :

 window.addEventListener('load', new Function("event", "this.foo =bar"));

Et lors de l'execution, pour que this correspondent à l'objet window, le gestionnaire d'évènement :

 laFunctionDonnée.call(window,event);

Et c'est exactement ce qui se passe avec ton truc. gWindow.onLoad renvoi un objet de type Function. Et lors de l'évènement, cette fonction est executée ici au niveau de la window. Donc le this dans cette fonction represente l'objet window.

Bref, faut faire gaffe avec le this. Ce n'est pas comme en C++, java ou autre..

Pour solutionner ton problème :

window.addEventListener("load", function(){ gWindow.onLoad(); }, false);

# [Résolu] Re: Référence de this

Envoyé par : thefab

Date : 16/08/2006 14:46

Merci bien Laurent pour cette explication détaillée.

Il n'est plus possible de poster des messages dans ce forum.