Comment déclarer une variable globale en JavaScript?


Réponses:


215

Si vous devez générer des variables globales dans le code de production (ce qui doit être évité), déclarez-les toujours explicitement :

window.globalVar = "This is global!";

Bien qu'il soit possible de définir une variable globale en omettant simplement var(en supposant qu'il n'y a pas de variable locale du même nom), cela génère un global implicite , ce qui est une mauvaise chose à faire et générerait une erreur en mode strict .


windowest disponible uniquement dans les navigateurs. Pourriez-vous modifier votre réponse pour qu'elle fonctionne dans tous les environnements? Voir Comment obtenir l'objet global en JavaScript?
Michał Perłakowski

52

Si c'est la seule application où vous allez utiliser cette variable, l'approche de Felix est excellente. Cependant, si vous écrivez un plugin jQuery, considérez les variables "namespacing" (détails sur les guillemets plus loin ...) et les fonctions nécessaires sous l'objet jQuery. Par exemple, je travaille actuellement sur un menu contextuel jQuery que j'ai appelé miniMenu. Ainsi, j'ai défini un "namespace" miniMenusous jQuery, et j'y place tout.

La raison pour laquelle j'utilise des guillemets lorsque je parle d'espaces de noms javascript est qu'ils ne sont pas vraiment des espaces de noms au sens normal du terme. Au lieu de cela, j'utilise simplement un objet javascript et place toutes mes fonctions et variables en tant que propriétés de cet objet.

De plus, pour plus de commodité, je sous-espace généralement l'espace de noms du plugin avec un iespace de noms pour les éléments qui ne devraient être utilisés qu'en interne dans le plugin, afin de le cacher aux utilisateurs du plugin.

Voilà comment cela fonctionne:

// An object to define utility functions and global variables on:
$.miniMenu = new Object(); 
// An object to define internal stuff for the plugin:
$.miniMenu.i = new Object();

Maintenant, je peux simplement faire $.miniMenu.i.globalVar = 3ou $.miniMenu.i.parseSomeStuff = function(...) {...}chaque fois que j'ai besoin de sauvegarder quelque chose globalement, et je le garde toujours hors de l'espace de noms global.


Merci pour cela Tomas, Dans le site que j'ai mentionné ci-dessus, l'approche de Felix fonctionne bien, mais j'ai un autre site sur lequel je travaille également qui utilise plusieurs plugins et votre approche serait idéale si je pouvais le faire fonctionner. Bravo pour votre aide.
Danseur

Cela fonctionne parfaitement bien! Assurez-vous simplement, comme le dit @Tomas, Créez votre propre classe / titulaire pour vos propres fonctions ou variables personnalisées. +1
Pierre

Merci Tomas! Si ce n'est plus nécessaire, supprimez l'objet parent (par exemple:) delete $.miniMenu. Est-ce que c'est bon?
Kunj

1
@KunJ: Bien sûr, comme pour n'importe quoi: si vous pouvez garantir qu'il ne sera plus utilisé, vous pouvez le supprimer en toute sécurité. Cependant, les ordures JavaScript pour volonté vous chercher, vous n'avez à delete $.miniMenu.
Tomas Aschan

20

EDIT La question concerne JavaScript, la réponse concerne jQuery, ce qui est faux. C'est une vieille réponse, de l'époque où jQuery était répandu.

Au lieu de cela, je recommande de comprendre les portées et les fermetures en JavaScript

Ancienne, mauvaise réponse: avec jQuery, vous pouvez simplement le faire, peu importe où se trouve la déclaration:

$my_global_var = 'my value';

Et sera disponible partout. Je l'utilise pour créer des galeries d'images rapides, lorsque les images sont réparties à différents endroits, comme ceci:

$gallery = $('img');
$current = 0;

$gallery.each(function(i,v){
    // preload images
    (new Image()).src = v;
});
$('div').eq(0).append('<a style="display:inline-block" class="prev">prev</a> <div id="gallery"></div> <a style="display:inline-block" class="next">next</a>');
$('.next').click(function(){
    $current = ( $current == $gallery.length - 1 ) ? 0 : $current + 1;
    $('#gallery').hide().html($gallery[$current]).fadeIn();
});
$('.prev').click(function(){
    $current = ( $current == 0 ) ? $gallery.length - 1 : $current - 1;
    $('#gallery').hide().html($gallery[$current]).fadeIn();
});

Astuce : exécutez tout ce code dans la console de cette page ;-)


3
$ Gallery et $ current ne sont-ils pas simplement des variables globales normales? Ils fonctionnent parce que vous les définissez comme des variables globales en omettant `` var '', mais le signe dollar devant eux ne les rend pas `` variables jQuery '' ... C'est littéralement comme mettre un trait de soulignement ou tout autre signe à partir d'eux ... Ce seraient des variables jQuery si vous utilisez l'objet jQuery ($) et y ajoutez une propriété: $ .myGlobalVariable = 'my value' ...
Andres Elizondo

Vous avez probablement raison, mais ce qui vaut la peine de noter, c'est qu'en utilisant la syntaxe $ myVar vous obtenez 2 aventages, 1) la variable est globale sans aucune déclaration spéciale (en plus de $); et 2) vous pouvez suivre vos variables globales très facilement dans le code. Ouvert à la discussion cependant ...
aesede

Une réponse trompeuse. D'accord avec Andres, ce n'est PAS du tout une variable jQuery. Si vous ne définissez pas $current = 0;au début de la fonction, la dernière ne fonctionnera pas.
harrrrrrry

15

Voici un exemple de base d'une variable globale à laquelle le reste de vos fonctions peut accéder. Voici un exemple en direct pour vous: http://jsfiddle.net/fxCE9/

var myVariable = 'Hello';
alert('value: ' + myVariable);
myFunction1();
alert('value: ' + myVariable);
myFunction2();
alert('value: ' + myVariable);


function myFunction1() {
    myVariable = 'Hello 1';
}

function myFunction2() {
    myVariable = 'Hello 2';
}

Si vous faites cela dans une fonction jquery ready (), assurez-vous que votre variable est à l'intérieur de la fonction ready () avec vos autres fonctions.


Meilleure réponse pour le fonctionnement des variables globales dans jQuery.
Clinton Green

1
Je sais que je suis en train de creuser un grave mais ce n'est même pas une variable globale explicite. Ceci est plus en phase avec une variable publique partagée non étendue à une fermeture pour des scripts extrêmement petits. Ce sont deux méthodes / usages entièrement différents et celui-ci vous causera des problèmes majeurs si vous déclarez un global explicite dans un script qui est au milieu de plusieurs scripts différents. Je ne peux qu'imaginer un frontal de mon équipe déclarant une variable globale en haut d'un script qui est le 10ème appelé dans le DOM.
Brian Ellis

4

Déclarer la variable en dehors des fonctions

function dosomething(){
  var i = 0; // can only be used inside function
}

var i = '';
function dosomething(){
  i = 0; // can be used inside and outside the function
}

3

La meilleure façon est d'utiliser closures, car l' windowobjet devient très, très encombré de propriétés.

HTML

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="init.js"></script>
    <script type="text/javascript">
      MYLIBRARY.init(["firstValue", 2, "thirdValue"]);
    </script>
    <script src="script.js"></script>
  </head>

  <body>
    <h1>Hello !</h1>
  </body>    
</html>

init.js (basé sur cette réponse )

var MYLIBRARY = MYLIBRARY || (function(){
    var _args = {}; // private

    return {
        init : function(Args) {
            _args = Args;
            // some other initialising
        },
        helloWorld : function(i) {
            return _args[i];
        }
    };
}());

script.js

// Here you can use the values defined in the html as if it were a global variable
var a = "Hello World " + MYLIBRARY.helloWorld(2);

alert(a);

Voici le plnkr . J'espère que cela vous aidera!

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.