Visitez mon nouveau site web » mongo.ca

dimanche 6 décembre 2009

Portée des variables en Javascript (Variable scope)

Cacher des variables



En javascript toutes les variables déclarées dans une fonction ne sont visibles que dans cette fonction.



function maFonction() {
var variableCachee = "une variable cachée";
}

alert(variableCachee); // Retourne une erreur car la variable est inaccessible à l'extérieur de la fonction.

/////////////////
//Autre exemple//
/////////////////

// Variable globale
var x = 0;

(function() {

// Variable privée
var x = 1;
alert(x); // Renvoi 1

})();

alert(x); // Renvoie 0




En utilisant la technique de la fonction sans nom il est possible de "cacher" des variables pour qu'elles soient invisibles dans le reste du code javascript.



(function() {

// Variable "cachées"
var varChache1 = 1;
var varChache2 = 1;
var varChache3 = 1;


})();

alert(varChache1); // retourne une erreur car la variable est seulement accessible à l'intérieur de la fonction sans nom


* La fonction sans nom est immédiatement exécutée grâce au 2 parenthèses à la fin "();".

 



La variable this



En javascript la variable this est relative à chaque fonction.




function maFonction() {

this.variable = "Ceci est une variable";

function autreFonction() {

alert(this.variable); //Retourne une erreur car this est maintenant relatif à autreFonction

}


}



Une bonne pratique pour avoir accès au this d'une fonction parente est de l'attribuée à une autre variable.




function maFonction() {

//On attribue la variable this à une autre variable nommé self
var self = this;

self.variable = "Ceci est une variable";

function autreFonction() {

alert(self.variable); //Retourne "Ceci est une variable"

}


}



Si vous utilisez jQuery, cette technique est souvent utile car la variable this fait souvent référence à l'élément en cours.




$("#bouton").click(function() {

//On attribue l'élément en cours à une variable pour pouvoir l'utiliser dans les fonctions suivantes
var bouton = $(this);

bouton.val("Chargement...");

//On fait par exemple une requète AJAX
$.get("/contact.php",function(data) {

//La variable «bouton», déclarée plus haut, nous permet d'accéder à l'élément «bouton» même à l'intérieur d'une autre fonction.
bouton.val("Terminé");

});


}

Aucun commentaire:

Visitez mon nouveau site web » mongo.ca