JavaScript
De Hack-it.org.
(this) |
|||
| Ligne 29 : | Ligne 29 : | ||
Dans la fonction ''g'', la référence est trouvée dans la portée de ''g'', et masque celle du ''Global Object''. | Dans la fonction ''g'', la référence est trouvée dans la portée de ''g'', et masque celle du ''Global Object''. | ||
| + | |||
| + | = What the hell is '''this'''??? = | ||
| + | |||
| + | En voilà un mot qui fait peur. Quand utiliser this ? Que représente-t-il ? | ||
| + | |||
| + | '''this''' dans le ''Global Scope'' fait référence au ''Global Object'' (l'objet ''window'' dans un navigateur) | ||
| + | |||
| + | '''this''', utilisé au sein d'une fonction, fait référence à l'objet sur lequel a été appelée la fonction. | ||
| + | |||
| + | <javascript>Tablo = { _tab: [1, 2, 3, 'soleil'] }; | ||
| + | Tablo.getVal = function(index){ return this._tab[index]; } | ||
| + | Tablo.getVal(3); // return 'soleil' :)</javascript> | ||
| + | '''this''' fait référence à l'objet ''Tablo'' sur lequel à été appelée la fonction ''getVal''. | ||
| + | |||
| + | Définissons maintenant une référence vers la fonction : | ||
| + | <javascript>fn = Tablo.getVal; | ||
| + | fn(3); // Erreur: this._tab is undefined :(</javascript> | ||
| + | Comme on l'a vu plus haut, ''fn'' est une propriété du ''Global Object''. '''this''' fait donc ici référence au ''Global Object'' ! Et le ''Global Object'' n'a aucune propriété ''_tab''. | ||
| + | |||
| + | Heureusement, '''this''' peut être redéfini à la main avec ''call'' (ou ''apply'') : | ||
| + | <javascript>// Appeller fn dans le contexte de Tablo (pour que this = Tablo) : | ||
| + | fn.call(Tablo, 3); // return 'soleil' :D</javascript> | ||
| + | |||
| + | Dans les ''EventListener'' appelés depuis la page web, '''this''' fait référence à l'objet DOM ayant reçu l'évènement : | ||
| + | <javascript>document.body.addEventListener('click', function(evt){ alert(this.nodeName); }; | ||
| + | // un clic sur la page affichera "body"</javascript> | ||
