Definire la variabile globale in una funzione JavaScript

511

È possibile definire una variabile globale in una funzione JavaScript?

Voglio usare la trailimagevariabile (dichiarata nella makeObjfunzione) in altre funzioni.

<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
fonte
19
per dichiarare un globale semplicemente non usare la parola chiave "var"
— Ibu,
20
@Ibrahim: "per dichiarare un globale semplicemente non usare la parola chiave" var "" Gak! L'orrore ! ;-) Per fortuna, la modalità rigorosa elimina i globi impliciti.
— TJ Crowder,
28
@Ibrahim Diallo - non usare varnon dichiara una variabile globale. Una conseguenza dell'assegnazione di un valore a una variabile non dichiarata è la creazione di una proprietà sull'oggetto globale, che è molto diversa dalla dichiarazione di una variabile.
— RobG
1
informazioni utili in questa risposta, anche stackoverflow.com/a/4862268/1356098 :)
— Erenor Paz

Risposte:

739

Sì, come hanno detto gli altri, è possibile utilizzare varnell'ambito globale (al di fuori di tutte le funzioni) per dichiarare una variabile globale:

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

In alternativa, è possibile assegnare a una proprietà su window:

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

... perché nei browser, tutte le variabili globali variabili globali dichiarate varsono proprietà windowdell'oggetto. (Nella ultima specifica, ECMAScript 2015, il nuovo let, conste classle dichiarazioni in ambito globale creare variabili globali che non sono proprietà dell'oggetto globale, un nuovo concetto di ES2015.)

(C'è anche l'orrore dei globi impliciti , ma non farlo apposta e fai del tuo meglio per evitare di farlo accidentalmente, forse usando ES5 "use strict".)

Detto questo: eviterei le variabili globali se è possibile (e quasi sicuramente è possibile). Come ho già detto, finiscono per essere proprietà di window, ed windowè già abbastanza affollato che con tutti gli elementi con un id(e molti con solo un name) che vengono scaricati in esso (e indipendentemente da quella specifica imminente, IE scarica praticamente qualsiasi cosa con un namelì dentro ).

Invece, racchiudi il tuo codice in una funzione di scoping e usa le variabili locali per quella funzione di scoping, e fai chiudere le altre tue funzioni al suo interno:

<script>
(function() { // Begin scoping function
    var yourGlobalVariable; // Global to your code, invisible outside the scoping function
    function foo() {
        // ...
    }
})();         // End scoping function
</script>
— TJ Crowder
fonte
98
+1 Dichiararlo esplicitamente alla finestra è il modo più leggibile.
— Caspar Kleijne,
8
Si noti che l'utilizzo windownon funzionerà in Nodo. Il trucco più semplice qui è impostare: GLOBAL.window = GLOBAL;- come spiegato in questa domanda correlata . Certo, non è abbastanza concettualmente. Preferisco fare le cose al contrario, quindi posso usare al GLOBALposto di window.
— Domi,
4
@CasparKleijne, non lo capisco. Perché dovresti assegnarlo su Window quando non hai letteralmente prove che l'oggetto Window esista effettivamente. Non sai come verrà utilizzato il tuo codice in futuro. Potrebbe anche essere utilizzato nell'ambiente MongoDB o in rino anziché nel tuo nodo. Inoltre, l'oggetto finestra non è visibile nemmeno nel browser, ad esempio se si utilizzano Web worker. Questo ucciderà completamente la riusabilità.
— Gherman,
4
window.yourGlobalVariable = ...;funziona come un incantesimo dopo aver letto da 5 a 6 domande sul sito dello stack.
— Ahmed Syed,
6
@JacquesKoekemoer: non c'è motivo di usarlo evallì. Invece:window[dynamic_variable_name] = dynamic_variable_value;
— TJ Crowder
19

UPDATE1: se leggi i commenti c'è una bella discussione attorno a questa particolare convenzione di denominazione.

UPDATE2: Sembra che da quando la mia risposta è stata pubblicata, la convenzione di denominazione è diventata più formale. Le persone che insegnano, scrivono libri ecc. Parlano di vardichiarazioni e functiondichiarazioni.

UPDATE3: Ecco il post aggiuntivo di Wikipedia che supporta il mio punto: http://en.wikipedia.org/wiki/Declaration_(computer_programming)#Declarations_and_Definitions

... e per rispondere alla domanda principale. DECLARE variabile prima della tua funzione. Funzionerà e sarà conforme alla buona pratica di dichiarare le tue variabili in cima all'ambito :)

— op1ekun
fonte
7
Se vuoi definire le tue variabili altrove assicurati di capire cos'è il sollevamento. Ecco un bell'articolo a riguardo su goodgood.com/2010/2/JavaScript-Scoping-and-Hoisting . In bocca al lupo!
— op1ekun,
1
Questo non è ciò definitionche declarationsignifica in C. La tua prima riga potrebbe essere una dichiarazione o una definizione (a seconda di dove si trova); il secondo è solo un compito. Una dichiarazione specifica solo l'interpretazione dell'identificatore (cioè myVarè un int); se la dichiarazione riserva anche la conservazione, è a definition. Ciò non è correlato alla digitazione; fa parte del modo in cui le unità di compilazione comprendono i riferimenti ad altre unità di compilazione.
— EML,
4
Anche in JS, var myVarsi chiama dichiarazione (non è necessario digitarla) e myVar = 10un incarico . Ho sentito il termine "definizione" per il composto ( var myVar = 10;).
— Bergi,
2
Questo non aiuta a rispondere alla domanda. Avrebbe dovuto essere un commento, non una risposta.
— Stuntddude
2
@Stuntddude probabilmente hai ragione :( Ho iniziato a rispondere alla domanda e poi ho deciso di divergere un po ', e questo è quello che abbiamo. Ancora qualche ppl lo trova ancora utile quindi l'ho lasciato qui. Grazie per il tuo feedback!
— op1ekun
15

Dichiara e basta 

var trialImage;

al di fuori. Poi

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

Spero che sia di aiuto.

— harihb
fonte
12

No, non puoi. Dichiarare semplicemente la variabile al di fuori della funzione. Non è necessario dichiararlo contemporaneamente all'assegnazione del valore:

var trailimage;

function makeObj(address) {
  trailimage = [address, 50, 50];
— Guffa
fonte
1
Scusate! "È possibile definire una variabile globale in una funzione JavaScript?" - "No, non puoi" non è corretto, come mostra la prima risposta!
— mustafa.0x
5
@ mustafa.0x: ti sbagli. Non è possibile definire una variabile globale all'interno di una funzione. È possibile creare implicitamente una variabile globale o creare una proprietà della finestra all'interno di una funzione, ma non è possibile definire una variabile globale all'interno di una funzione.
— Guffa,
1
Per quanto riguarda JavaScript in un ambiente browser, una variabile globale e una proprietà di windowsono sinonimi. Ad ogni modo, la distinzione semantica che stai facendo è chiara, quindi non mi dispiace non sottovalutare. Modifica: impossibile cambiare il mio voto, scusa!
— mustafa.0x
2
se non stai usando il rigoroso (ma perché non stai usando il rigoroso?), in realtà puoi dichiarare e definire varianti globali all'interno di una funzione andando contro tutte le buone pratiche e semplicemente non usando il var, che è ciò che Guffa intendeva per implicitamente creare (come indicato anche da @DhruvPathak).
— Cregox,
11

Dichiaralo al di fuori delle funzioni e assegna valori all'interno delle funzioni. Qualcosa di simile a:

<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

O semplicemente la rimozione di "var" dal nome della variabile all'interno della funzione lo rende anche globale, ma è meglio dichiararlo all'esterno una volta per un codice più pulito. Questo funzionerà anche:

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

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

Spero che questo esempio spieghi di più: 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
fonte
3

È molto semplice definire la variabile trailimage al di fuori della funzione e impostarne il valore nella funzione makeObj. Ora puoi accedere al suo valore da qualsiasi luogo.

var offsetfrommouse = [10, -20];
var displayduration = 0;
var obj_selected = 0;
var trailimage;
function makeObj(address) {
      trailimage = [address, 50, 50];
      ....
}
— Bharath
fonte
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;

Mi rendo conto che probabilmente ci sono molti errori di sintassi in questo, ma è l'idea generale ... Grazie mille LayZee per averlo segnalato ... Puoi trovare cos'è un archivio locale e di sessione su http: //www.w3schools. com / html / html5_webstorage.asp . Ho avuto bisogno della stessa cosa per il mio codice e questa è stata davvero una buona idea.

— ShanerM13
fonte
Finora questa è l'unica risposta che funziona, ma richiede di ricaricare la pagina e di location.reload(false);aggiornarla ripetutamente.
— Iyrin,
1

Esempio classico:

window.foo = 'bar';

Esempio moderno e sicuro che segue le migliori pratiche usando un IIFE :

;(function (root) {
    'use strict'

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

Oggi c'è anche la possibilità di utilizzare l' API WebStorage 

localStorage.foo = 42;

o

sessionStorage.bar = 21;

Dal punto di vista delle prestazioni, non sono sicuro che sia notevolmente più lento della memorizzazione dei valori nelle variabili.

Supporto per browser diffuso come indicato su Posso usare ...

— Lars Gyrup Brink Nielsen
fonte
localStorage e sessionStorage funziona solo con valori stringa.
— HereToLearn_
Esatto, @HereToLearn_, ma poi puoi usare localStorage.foo = JSON.stringify({ arbitrary: 'object', meaning: 42, awesome: true });e var foo = JSON.decode(localStorage.foo);.
— Lars Gyrup Brink Nielsen,
Cosa localStoragec'entra con le variabili globali?
— Michał Perłakowski il
1
OP sta cercando una soluzione a questo problema: "Voglio usare la variabile trailimage (dichiarata nella funzione makeObj) in altre funzioni." Chi dice che la soluzione debba coinvolgere variabili globali? Le variabili globali raramente sono una buona soluzione a qualsiasi cosa.
— Lars Gyrup Brink Nielsen,
0

Quindi vuoi che la variabile all'interno della funzione sia disponibile al di fuori della funzione? Perché non restituire i risultati della variabile all'interno della funzione? var x = function returnX { var x = 0; return x; }è l'idea ...

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

Non l'ho provato, ma se il tuo codice ha funzionato prima di quel piccolo cambiamento, allora dovrebbe funzionare.

— ShanerM13
fonte
-1

Ecco un codice di esempio che potrebbe essere 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

Qui ho trovato una bella risposta How-can-one-declare-a-global-variabile-in-JavaScript

— Shohanur Rahaman
fonte
Sebbene ciò possa teoricamente rispondere alla domanda, sarebbe preferibile includere qui le parti essenziali della risposta e fornire il collegamento come riferimento.
— Rohit Gupta,
-1

Ecco un altro metodo semplice per rendere disponibile la variabile in altre funzioni senza dover utilizzare le variabili globali:

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

makeObj();
someOtherFunction();
Espandi frammento

— am2124429
fonte
-2

se stai creando una funzione di avvio, puoi definire funzioni e variabili globali in questo modo:

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

Poiché la funzione viene invocata a livello globale con questo argomento, qui è un ambito globale. Quindi, qualcosa dovrebbe essere una cosa globale.

— Konstantin Isaev
fonte
thisè undefinedin modalità rigorosa al di fuori di una funzione e non deve essere utilizzata per fare riferimento all'oggetto globale.
— Michał Perłakowski il
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.