Javascript les spécificités du langage - Partie 3 -

Présentation au sujet: "Javascript les spécificités du langage - Partie 3 -"— Transcription de la présentation:

1 Javascript les spécificités du langage - Partie 3 -

2 Le scope (portée des variables) Une des principales particularités de Javascript est également la portée de variable qui ne correspond pas à dautres langages. Les variables ont une portée descendante à partir de là où elles sont définie. var variable1 = 10; var fonction1 = function() { alert(variable1); var variable2 = 12; this.methode = function() { var variable3 = 14; alert(variable1); alert(variable2); } alert(typeof(variable3)); }

3 Le scope (portée des variables) // Affiche 10 // Affiche undefined var monObjet = new fonction1(); // Affiche 10 // Affiche 12 monObjet.methode();

4 Le scope (portée des variables) Dans ce cas « this » ne désigne plus la fonction englobante mais lélément sur lequel a été lié lévénement, c'est-à-dire « window ». « this » a donc changé de scope. var maFonction = function() { window.onload = function() { console.log(this); } maFonction(); Le « this » à lintérieur dun objet nest pas obligatoirement lobjet lui-même, le contexte peut être modifié par la fonction appelante. Cest le cas des gestionnaires dévénements (event handlers) à lintérieur dune fonction :

5 Apply et Call, la contextualisation Il est également possible de contextualiser une fonction par rapport à une autre. On peut alors, lors dun appel à une fonction, faire correspondre son « this » à celui dune autre, cela permet dappliquer une unique fonction sur différents objets

6 Apply et Call, la contextualisation function getColor() { return this.couleur; } function Voiture(marque, modele, couleur) { this.marque = marque; this.modele = modele; this.couleur = couleur; } function Rectangle(largeur, hauteur, couleur) { this.largeur = largeur; this.hauteur = hauteur; this.couleur = couleur; } var maVoiture = new Voiture('Renault', 'R5', 'rouge'); var monRectangle = new Rectangle(10, 12, 'vert'); // Affiche rouge alert( getColor.apply(maVoiture) ); // Affiche vert alert( getColor.apply(monRectangle) );

7 Apply et Call, la contextualisation Dans ce cas, la fonction qui récupère la couleur est la même, alors que les deux objets sont radicalement différents (une voiture et un rectangle). Cela va nous permettre de travailler sur des contextes différents avec la même unique fonction, dans des langages objets plus traditionnels seul lhéritage le peut et encore, il faut que les deux classes aient un lien de parenté.

8 Apply et Call, la contextualisation La seule différence quil existe en « apply » et « call » cest le passage des arguments, dans le premier cas il sont passés dans un tableau après le paramètre dinstance, dans le second les arguments sont propagés : maFonction.apply(instance, tableau); maFonction.call(instance, p1, p2, p3,...);

9 Apply et Call, la contextualisation Les fonctions natives de Javascript sont prévues pour être recontextualisées elles peuvent donc souvent fonctionner sur un objet pour laquelle elle na pas été destinée à lorigine, par exemple : //monTableau vaut ["a","b"] var monTableau = ".trim.apply([" a","b "]).split(","); //monTableau vaut ["div","h1","span"] var monTableau = "".toLowerCase.apply(["DIV","H1","SPAN"]).split(","); //monTableau vaut ["a16", "b44"] var monTableau = "".match.call(["a16","b44","b bar"],/[a-z][0-9]+/g); //monTableau vaut ['Argentina',"Brazil","Chile"] var monTableau = "".replace.call( ['argentina','brazil','chile'], /\b./g, function( a ){ return a.toUpperCase(); } ).split(',');