Définir une variable globale dans une fonction JavaScript

511

Est-il possible de définir une variable globale dans une fonction JavaScript?

Je veux utiliser la trailimagevariable (déclarée dans la makeObjfonction) dans d'autres fonctions.

<html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title></title>
        <script type="text/javascript">
            var offsetfrommouse = [10, -20];
            var displayduration = 0;
            var obj_selected = 0;
            function makeObj(address) {
                **var trailimage = [address, 50, 50];**
                document.write('<img id="trailimageid" src="' + trailimage[0] + '" border="0"  style=" position: absolute; visibility:visible; left: 0px; top: 0px; width: ' + trailimage[1] + 'px; height: ' + trailimage[2] + 'px">');
                obj_selected = 1;
            }

            function truebody() {
                return (!window.opera && document.compatMode && document.compatMode != "BackCompat") ? document.documentElement : document.body;
            }
            function hidetrail() {
                var x = document.getElementById("trailimageid").style;
                x.visibility = "hidden";
                document.onmousemove = "";
            }
            function followmouse(e) {
                var xcoord = offsetfrommouse[0];
                var ycoord = offsetfrommouse[1];
                var x = document.getElementById("trailimageid").style;
                if (typeof e != "undefined") {
                    xcoord += e.pageX;
                    ycoord += e.pageY;
                }
                else if (typeof window.event != "undefined") {
                    xcoord += truebody().scrollLeft + event.clientX;
                    ycoord += truebody().scrollTop + event.clientY;
                }
                var docwidth = 1395;
                var docheight = 676;
                if (xcoord + trailimage[1] + 3 > docwidth || ycoord + trailimage[2] > docheight) {
                    x.display = "none";
                    alert("inja");
                }
                else
                    x.display = "";
                x.left = xcoord + "px";
                x.top = ycoord + "px";
            }

            if (obj_selected = 1) {
                alert("obj_selected = true");
                document.onmousemove = followmouse;
                if (displayduration > 0)
                    setTimeout("hidetrail()", displayduration * 1000);
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <img alt="" id="house" src="Pictures/sides/right.gif" style="z-index: 1; left: 372px;
            top: 219px; position: absolute; height: 138px; width: 120px" onclick="javascript:makeObj('Pictures/sides/sides-not-clicked.gif');" />
        </form>
    </body>
</html>
javascript  function  variables  scope  declaration 
— hamze
source
19
pour déclarer un global, n'utilisez simplement pas le mot
— Ibu
20
@Ibrahim: "pour déclarer un global, n'utilisez simplement pas le mot-clé" var "" Gak! L'horreur ! ;-) Heureusement, le mode strict supprime les globaux implicites.
— TJ Crowder le
28
@ Ibrahim Diallo - ne pas utiliser varne déclare pas de variable globale. Une conséquence de l'attribution d'une valeur à une variable non déclarée est la création d'une propriété sur l'objet global, ce qui est assez différent de la déclaration d'une variable.
— RobG
1
informations utiles dans cette réponse, aussi stackoverflow.com/a/4862268/1356098 :)
— Erenor Paz

Réponses:

739

Oui, comme les autres l'ont dit, vous pouvez utiliser varà portée globale (en dehors de toutes les fonctions) pour déclarer une variable globale:

<script>
var yourGlobalVariable;
function foo() {
    // ...
}
</script>

Alternativement, vous pouvez attribuer à une propriété sur window:

<script>
function foo() {
    window.yourGlobalVariable = ...;
}
</script>

... car dans les navigateurs, toutes les variables globales les variables globales déclarées avec varsont des propriétés de l' windowobjet. (Dans la dernière spécification, ECMAScript 2015, le nouveau let, const, et les classdéclarations à la portée mondiale créer globals qui ne sont pas des propriétés de l'objet global, un nouveau concept ES2015.)

(Il y a aussi l'horreur des globaux implicites , mais ne le faites pas exprès et faites de votre mieux pour éviter de le faire par accident, peut-être en utilisant des ES5 "use strict".)

Cela dit: j'éviterais les variables globales si vous le pouvez (et vous le pouvez presque certainement). Comme je l'ai mentionné, ils finissent par être des propriétés de window, et windowsont déjà suffisamment encombrés avec tous les éléments avec un id(et beaucoup avec juste un name) étant vidés dedans (et indépendamment de cette spécification à venir, IE vide à peu près tout avec un namelà-dessus) ).

Au lieu de cela, encapsulez votre code dans une fonction de portée et utilisez des variables locales à cette fonction de portée, et fermez vos autres fonctions en son sein:

<script>
(function() { // Begin scoping function
    var yourGlobalVariable; // Global to your code, invisible outside the scoping function
    function foo() {
        // ...
    }
})();         // End scoping function
</script>
— TJ Crowder
source
98
+1 Le déclarer explicitement à la fenêtre est le moyen le plus lisible.
— Caspar Kleijne
9
Notez que l'utilisation windowne fonctionnera pas dans Node. L'astuce la plus simple consiste à définir: GLOBAL.window = GLOBAL;- comme expliqué dans cette question connexe . Bien sûr, ce n'est pas assez conceptuellement. Je préfère faire les choses dans l'autre sens, donc je peux utiliser à la GLOBALplace de window.
— Domi
4
@CasparKleijne, je ne le comprends pas. Pourquoi l'attribueriez-vous à une fenêtre alors que vous n'avez littéralement aucune preuve que l'objet fenêtre existe réellement. Vous ne savez pas comment votre code sera utilisé à l'avenir. Il peut même être utilisé dans l'environnement MongoDB ou rino au lieu de votre nœud. Et l'objet fenêtre n'est pas non plus visible même dans le navigateur si vous utilisez des travailleurs Web par exemple. Cela tuera complètement la réutilisabilité.
— Gherman
4
window.yourGlobalVariable = ...;fonctionne comme un charme après avoir lu 5 à 6 questions sur le site de la pile.
— Ahmed Syed
6
@JacquesKoekemoer: Il n'y a aucune raison de l'utiliser eval. Au lieu de cela:window[dynamic_variable_name] = dynamic_variable_value;
— TJ Crowder
19

UPDATE1: Si vous lisez les commentaires, il y a une belle discussion autour de cette convention de nommage particulière.

UPDATE2: Il semble que depuis que ma réponse a été publiée, la convention de dénomination est devenue plus formelle. Les gens qui enseignent, écrivent des livres, etc. parlent de vardéclaration et de functiondéclaration.

UPDATE3: Voici le post wikipedia supplémentaire qui soutient mon point: http://en.wikipedia.org/wiki/Declaration_(computer_programming)#Declarations_and_Definitions

... et pour répondre à la question principale. DECLARE la variable avant votre fonction. Cela fonctionnera et sera conforme à la bonne pratique de déclaration de vos variables en haut de l'étendue :)

— op1ekun
source
7
Si vous souhaitez définir vos variables ailleurs, assurez-vous de comprendre ce qu'est le levage. Voici un très bel article à ce sujet de manière adéquategood.com/ 2010/2/JavaScript-Scoping-and- Hoisting . Bonne chance!
— op1ekun
1
Ce n'est pas ce definitionque declarationsignifie en C. Votre première ligne pourrait être soit une déclaration soit une définition (selon l'endroit où elle se trouve); le second n'est qu'une mission. Une déclaration spécifie simplement l'interprétation de l'identifiant (c'est-à-dire myVarest un int); si la déclaration réserve également le stockage, c'est a definition. Ceci n'est pas lié à la saisie; cela fait partie de la façon dont les unités de compilation comprennent les références aux autres unités de compilation.
— EML
4
Même en JS, var myVarest appelé déclaration (il n'a pas besoin d'être tapé) et myVar = 10une affectation . J'ai entendu le terme "définition" pour le composé ( var myVar = 10;).
— Bergi
2
Cela n'aide pas à répondre à la question. Cela aurait dû être un commentaire, pas une réponse.
— Stuntddude
2
@Stuntddude vous avez probablement raison :( J'ai commencé à répondre à la question, puis j'ai décidé de diverger un peu, et bien c'est ce que nous avons. Encore quelques personnes le trouvent toujours utile, donc je l'ai laissé ici. Merci pour votre commentaires!
— op1ekun
15

Déclarez simplement 

var trialImage;

à l'extérieur. alors

function makeObj(address) {
    trialImage = [address, 50, 50];
..
..
}

J'espère que cela t'aides.

— harihb
source
12

Non, tu ne peux pas. Déclarez simplement la variable en dehors de la fonction. Vous n'êtes pas obligé de le déclarer en même temps que vous attribuez la valeur:

var trailimage;

function makeObj(address) {
  trailimage = [address, 50, 50];
— Guffa
source
1
Désolé! "Est-il possible de définir une variable globale dans une fonction JavaScript?" - "Non, tu ne peux pas" n'est pas correct, comme le montre la première réponse!
— mustafa.0x
5
@ mustafa.0x: Vous vous trompez. Vous ne pouvez pas définir une variable globale dans une fonction. Vous pouvez implicitement créer une variable globale ou créer une propriété de fenêtre à l' intérieur d'une fonction, mais vous ne pouvez pas définir une variable globale à l'intérieur d'une fonction.
— Guffa
1
En ce qui concerne JavaScript dans un environnement de navigateur, une variable globale et une propriété de windowsont synonymes. Quoi qu'il en soit, la distinction sémantique que vous faites est claire, donc cela ne me dérange pas de ne pas voter. Edit: impossible de changer mon vote, désolé!
— mustafa.0x
2
si vous n'utilisez pas strict (mais pourquoi n'utilisez-vous pas strict?), vous pouvez réellement déclarer et définir des variables globales à l'intérieur d'une fonction en allant à l'encontre de toutes les bonnes pratiques et tout simplement en n'utilisant pas le var, ce que Guffa entendait par implicitement créer (comme @DhruvPathak l'a également indiqué).
— cregox
11

Il suffit de le déclarer en dehors des fonctions et d'affecter des valeurs à l'intérieur des fonctions. Quelque chose comme:

<script type="text/javascript">
    var offsetfrommouse = [10, -20];
    var displayduration = 0;
    var obj_selected = 0;
    var trailimage = null ;  // GLOBAL VARIABLE
    function makeObj(address) {
        trailimage = [address, 50, 50];  //ASSIGN VALUE

Ou simplement supprimer "var" de votre nom de variable à l'intérieur de la fonction le rend également global, mais il est préférable de le déclarer une fois à l'extérieur pour un code plus propre. Cela fonctionnera également:

var offsetfrommouse = [10, -20];
var displayduration = 0;
var obj_selected = 0;

function makeObj(address) {
    trailimage = [address, 50, 50];  //GLOBAL VARIABLE , ASSIGN VALUE

J'espère que cet exemple explique plus: http://jsfiddle.net/qCrGE/

var globalOne = 3;
testOne();

function testOne()
{
    globalOne += 2;
    alert("globalOne is : " + globalOne );
    globalOne += 1;
}

alert("outside globalOne is : " + globalOne);

testTwo();

function testTwo()
{
    globalTwo = 20;
    alert("globalTwo is " + globalTwo);
    globalTwo += 5;
}

alert("outside globalTwo is :" + globalTwo);
— DhruvPathak
source
3

Il est très simple de définir la variable trailimage en dehors de la fonction et de définir sa valeur dans la fonction makeObj. Vous pouvez désormais accéder à sa valeur de n'importe où.

var offsetfrommouse = [10, -20];
var displayduration = 0;
var obj_selected = 0;
var trailimage;
function makeObj(address) {
      trailimage = [address, 50, 50];
      ....
}
— Bharath
source
2 
    var Global = 'Global';

    function LocalToGlobalVariable() {

    //This creates a local variable.

    var Local = '5';

    //Doing this makes the variable available for one session
    //(a page refresh - Its the session not local)

    sessionStorage.LocalToGlobalVar = Local;

    // It can be named anything as long as the sessionStorage references the local variable.
    // Otherwise it won't work
    //This refreshes the page to make the variable take effect instead of the last variable set.

    location.reload(false);
    };

    //This calls the variable outside of the function for whatever use you want.

    sessionStorage.LocalToGlobalVar;

Je me rends compte qu'il y a probablement beaucoup d'erreurs de syntaxe, mais c'est l'idée générale ... Merci beaucoup LayZee de l'avoir signalé ... Vous pouvez trouver ce qu'est un stockage local et de session sur http: //www.w3schools. com / html / html5_webstorage.asp . J'ai eu besoin de la même chose pour mon code et c'était une très bonne idée.

— ShanerM13
source
Jusqu'à présent, c'est la seule réponse qui fonctionne, mais elle nécessite de recharger la page et de la location.reload(false);rafraîchir à plusieurs reprises.
— iyrin
1

Exemple classique:

window.foo = 'bar';

Exemple moderne et sûr suivant les meilleures pratiques en utilisant un IIFE :

;(function (root) {
    'use strict'

    root.foo = 'bar';
)(this));

De nos jours, il y a aussi la possibilité d'utiliser l' API WebStorage 

localStorage.foo = 42;

ou

sessionStorage.bar = 21;

Sur le plan des performances, je ne sais pas si cela est sensiblement plus lent que le stockage de valeurs dans des variables.

Prise en charge étendue du navigateur, comme indiqué sur Puis-je utiliser ...

— Lars Gyrup Brink Nielsen
source
localStorage et sessionStorage ne fonctionne que pour les valeurs de chaîne.
— HereToLearn_
C'est vrai, @HereToLearn_, mais alors vous pouvez utiliser localStorage.foo = JSON.stringify({ arbitrary: 'object', meaning: 42, awesome: true });et var foo = JSON.decode(localStorage.foo);.
— Lars Gyrup Brink Nielsen
Quel localStoragerapport avec les variables globales?
— Michał Perłakowski
1
OP cherche une solution à ce problème: "Je veux utiliser la variable trailimage (déclarée dans la fonction makeObj) dans d'autres fonctions." Qui a dit que la solution devait impliquer des variables globales? Les variables globales sont rarement une bonne solution à quoi que ce soit.
— Lars Gyrup Brink Nielsen
0

Vous voulez donc que la variable à l'intérieur de la fonction soit disponible à l'extérieur de la fonction? Pourquoi ne pas retourner les résultats de la variable à l'intérieur de la fonction? var x = function returnX { var x = 0; return x; }est l'idée ...

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
    <title></title>
    <script type="text/javascript">

        var offsetfrommouse = [10, -20];
        var displayduration = 0;
        var obj_selected = 0;

        function makeObj(address) {
            var trailimage = [address, 50, 50];
            document.write('<img id="trailimageid" src="' + trailimage[0] + '" border="0"  style=" position: absolute; visibility:visible; left: 0px; top: 0px; width: ' + trailimage[1] + 'px; height: ' + trailimage[2] + 'px">');
            obj_selected = 1;
            return trailimage;
        }

        function truebody() {
            return (!window.opera && document.compatMode && document.compatMode != "BackCompat") ? document.documentElement : document.body;
        }

        function hidetrail() {
            var x = document.getElementById("trailimageid").style;
            x.visibility = "hidden";
            document.onmousemove = "";
        }

        function followmouse(e) {
            var xcoord = offsetfrommouse[0];
            var ycoord = offsetfrommouse[1];
            var x = document.getElementById("trailimageid").style;
            if (typeof e != "undefined") {
                xcoord += e.pageX;
                ycoord += e.pageY;
            }

            else if (typeof window.event != "undefined") {
                xcoord += truebody().scrollLeft + event.clientX;
                ycoord += truebody().scrollTop + event.clientY;
            }
            var docwidth = 1395;
            var docheight = 676;
            if (xcoord + trailimage[1] + 3 > docwidth || ycoord + trailimage[2] > docheight) {
                x.display = "none";
                alert("inja");
            }
            else
                x.display = "";
            x.left = xcoord + "px";
            x.top = ycoord + "px";
        }

        if (obj_selected = 1) {
            alert("obj_selected = true");
            document.onmousemove = followmouse;
            if (displayduration > 0)
                setTimeout("hidetrail()", displayduration * 1000);
        }

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <img alt="" id="house" src="Pictures/sides/right.gif" style="z-index: 1; left: 372px; top: 219px; position: absolute; height: 138px; width: 120px" onclick="javascript:makeObj('Pictures/sides/sides-not-clicked.gif');" />
    </form>
</body>
</html>

Je n'ai pas testé cela, mais si votre code a fonctionné avant ce petit changement, alors cela devrait fonctionner.

— ShanerM13
source
-1

Voici un exemple de code qui peut être utile.

  var Human = function(){
   name = "Shohanur Rahaman";  // global variable
   this.name = "Tuly"; // constructor variable 
   var age = 21;
 };

  var shohan = new Human();

 document.write(shohan.name+"<br>");
 document.write(name);
 document.write(age); // undefined cause its local variable

Ici, j'ai trouvé une bonne réponse Comment-peut-on-déclarer-une-variable-globale-en-JavaScript

— Shohanur Rahaman
source
Bien que cela puisse théoriquement répondre à la question, il serait préférable d'inclure ici les parties essentielles de la réponse et de fournir le lien de référence.
— Rohit Gupta
-1

Voici une autre méthode simple pour rendre la variable disponible dans d'autres fonctions sans avoir à utiliser de variables globales:

function makeObj() {
  // var trailimage = 'test';
  makeObj.trailimage = 'test';
}
function someOtherFunction() {
  document.write(makeObj.trailimage);
}

makeObj();
someOtherFunction();
Développer l'extrait

— am2124429
source
-2

si vous créez une fonction de démarrage, vous pouvez définir des fonctions et des variables globales de la manière suivante:

function(globalScope)
{
     //define something
     globalScope.something() { 
         alert("It works");
     };
}(window)

Étant donné que la fonction est invoquée globalement avec cet argument, il s'agit de la portée globale ici. Donc, quelque chose devrait être une chose globale.

— Konstantin Isaev
source
thisest undefineden mode strict en dehors d'une fonction et ne doit pas être utilisé pour faire référence à l'objet global.
— Michał Perłakowski
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.