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

1. Javascriptles 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 à d’autres 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) Le « this » à l’intérieur d’un objet n’est pas obligatoirement l’objet lui-même, le contexte peut être modifié par la fonction appelante. C’est le cas des gestionnaires d’événements (eventhandlers) à l’intérieur d’une fonction : 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();

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

6. Apply et Call, la contextualisation functiongetColor() { 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 l’hé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 qu’il existe en « apply » et « call » c’est le passage des arguments, dans le premier cas il sont passés dans un tableau après le paramètre d’instance, 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 n’a pas été destinée à l’origine, 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(',');