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é");
});
}
Messages
