Javascriptles spécificités du langage

- Partie 3 -

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));}

Le scope (portée des variables)

// Affiche 10 // Affiche undefinedvar monObjet = new fonction1(); // Affiche 10// Affiche 12monObjet.methode();

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 » à 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 (event handlers) à l’intérieur d’une fonction :

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

Apply et Call, la contextualisationfunction 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 rougealert( getColor.apply(maVoiture) ); // Affiche vertalert( getColor.apply(monRectangle) );

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é.

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, ...);

Apply et Call, la contextualisationLes 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(',');