Pork Center
Voir le texte source
Page
Discussion
Voir le texte source
Historique
Rechercher
Navigation
Accueil
Communauté
Modifications récentes
Page au hasard
Chat
Aide
sitesupport
Outils personnels
18.188.50.29
Discussion avec cette adresse IP
Connexion
Boîte à outils
Pages liées
Suivi des pages liées
Pages spéciales
Voir le texte source
De Hack-it.org.
pour
JavaScript
JavaScript est décrit comme un des langages les plus difficiles à maîtriser. D'un autre coté, son modèle objet est d'une simplicité et d'une puissance remarquable. A la base des sites web dynamiques, c'est un outil indispensable pour faire plein de zolis trucs tout mignons. Cet article s'adresse à des personnes qui connaissent les bases de JavaScript, et qui souhaitent le maîtriser d'avantage. = ''Global Object'' et ''Global Scope'' = Le ''Global Object'' est, dans le contexte d'une page web, l'objet ''window''. Toute propriété ou méthode utilisée sans avoir spécifié son objet fait référence au ''Global Object'' : <javascript>hello_world = "Bonjour"; obj = {f:function() { return hello_world; }}; alert(obj.f()); // affiche "Bonjour"</javascript> ''hello_world'' et ''obj'' deviennent des propriétés de ''window''. ''alert'' est une méthode de window. Le ''Global Scope'' est la portée la plus large d'un programme. Toute variable déclarée en dehors d'une fonction est dans le ''Global Scope''. <javascript>var hello_world = "Bonjour"; obj = {f:function() { return hello_world; } g:function() { var hello_world = "Salut"; return hello_world; } }; alert(obj.f()); // affiche "Bonjour" alert(obj.g()); // affiche "Salut"</javascript> La première variable ''hello_world'' est dans le ''Global Scope''. Dans la fonction ''f'', la référence à ''hello_world'' est d'abord cherchée dans la portée de ''f'' (non trouvée), puis remonte la ''Scope Chain'' d'un niveau, et trouve la variable dans le ''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> === s'affranchir de '''this''' === Etant donné la différence entre le '''this''' JavaScript et le '''this''' tel qu'il est admis dans d'autres langages orientés objet, beaucoup de programmeurs utilisent ''self'' comme référence à l'objet courant. Il suffit de procéder ainsi dans le constructeur de l'objet : <javascript>function Truc(){ // constructeur var self = this; this.param = 5; this.getParam = function(){ return self.param; } } var mon_truc = new Truc(); mon_truc.getParam(); // renvoie bien sur 5 fnp = mon_truc.getParam; fnp(); // renvoie aussi 5 !</javascript> En effet, dans la fonction ''getParam'', ''self'' fait référence au ''this'' en vigueur lors de la construction de l'objet, soit l'objet lui même. Mais la vraie question est : comment ''getParam'' peut-il faire référence à une variable qui n'est pas dans sa portée, et qui plus est dans un bloc qui a terminé de s'exécuter depuis ?! Ceci est possible grâce (ou à cause, selon votre humeur) aux ''closures'', que nous verrons dans le chapitre suivant.
Revenir à la page
JavaScript
.