Zdefiniuj zmienną globalną w funkcji JavaScript

511

Czy można zdefiniować zmienną globalną w funkcji JavaScript?

Chcę użyć trailimagezmiennej (zadeklarowanej w makeObjfunkcji) w innych funkcjach.

<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
źródło
19
aby zadeklarować globalność, po prostu nie używaj słowa kluczowego „var”
Ibu
20
@Ibrahim: ”, aby zadeklarować globalność, po prostu nie używaj słowa kluczowego„ var ”„ Gak! Horror ! ;-) Na szczęście tryb ścisły eliminuje ukryte globale.
TJ Crowder
28
@Ibrahim Diallo - nieużywanie varnie deklaruje zmiennej globalnej. Konsekwencją przypisania wartości do niezadeklarowanej zmiennej jest utworzenie właściwości na obiekcie globalnym, co jest zupełnie inne niż zadeklarowanie zmiennej.
RobG
1
przydatne informacje w tej odpowiedzi, zbyt stackoverflow.com/a/4862268/1356098 :)
Erenor Paz

Odpowiedzi:

739

Tak, jak powiedzieli inni, możesz użyć varw zakresie globalnym (poza wszystkimi funkcjami), aby zadeklarować zmienną globalną:

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

Alternatywnie możesz przypisać do właściwości na window:

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

... ponieważ w przeglądarkach wszystkie zmienne globalne zmienne globalne zadeklarowane za pomocą varsą właściwościami windowobiektu. (W najnowszej specyfikacji ECMAScript 2015, nowy let, const, oraz classoświadczenia w zakresie globalnym tworzenia globalnych, które nie są właściwości obiektu globalnego; nową koncepcję ES2015).

(Istnieje również horror niejawnych globałów , ale nie rób tego celowo i staraj się unikać robienia tego przez przypadek, być może za pomocą ES5 "use strict").

Wszystko to powiedziało: unikałbym zmiennych globalnych, jeśli to możliwe (i prawie na pewno możesz). Jak już wspomniałem, ostatecznie są właściwościami windowi windowjuż są mnóstwo zatłoczone tyle co ze wszystkimi elementami zid(a wielu z nich po prostuname) dumpingu w nim (i niezależnie, że nadchodząca specyfikacja, IE wysypisk czegokolwiek znametam ).

Zamiast tego zawiń kod w funkcję zakresu i użyj zmiennych lokalnych dla tej funkcji zakresu, a następnie zamknij w niej pozostałe funkcje:

<script>
(function() { // Begin scoping function
    var yourGlobalVariable; // Global to your code, invisible outside the scoping function
    function foo() {
        // ...
    }
})();         // End scoping function
</script>
TJ Crowder
źródło
98
+1 Jawne zgłoszenie go do okna jest najbardziej czytelnym sposobem.
Caspar Kleijne,
8
Pamiętaj, że używanie windownie będzie działać w węźle. Najłatwiejszą sztuczką jest tutaj: GLOBAL.window = GLOBAL;- jak wyjaśniono w powiązanym pytaniu . Oczywiście nie jest to całkiem koncepcyjne. Wolę robić rzeczy na odwrót, więc mogę używać GLOBALzamiast window.
Domi
4
@CasparKleijne, nie rozumiem tego. Dlaczego miałbyś przypisywać go do okna, skoro dosłownie nie masz dowodów na istnienie obiektu okna. Nic nie wiesz o tym, jak Twój kod będzie używany w przyszłości. Może być nawet używany w środowisku MongoDB lub rino zamiast w węźle. Obiekt okna nie jest również widoczny nawet w przeglądarce, jeśli na przykład używasz pracowników sieci. To całkowicie zabije wielokrotnego użytku.
Gherman
4
window.yourGlobalVariable = ...;działa jak urok po przeczytaniu 5 do 6 pytań na stronie stosu.
Ahmed Syed
6
@JacquesKoekemoer: Nie ma żadnego powodu, aby z niego korzystać eval. Zamiast tego:window[dynamic_variable_name] = dynamic_variable_value;
TJ Crowder
19

AKTUALIZACJA 1: Jeśli czytasz komentarze, jest miła dyskusja na temat tej konkretnej konwencji nazewnictwa.

UPDATE2: Wydaje się, że odkąd moja odpowiedź została opublikowana, konwencja nazewnictwa stała się bardziej formalna. Ludzie, którzy uczą, piszą książki itp. Mówią o vardeklaracji i functiondeklaracji.

AKTUALIZACJA3: Oto dodatkowy post na Wikipedii, który popiera mój punkt: http://en.wikipedia.org/wiki/Declaration_(computer_programming ) #Declarations_and_Definitions

... i by odpowiedzieć na główne pytanie. ZADEKLARUJ zmienną przed twoją funkcją. To zadziała i będzie zgodne z dobrą praktyką deklarowania zmiennych na górze zakresu :)

op1ekun
źródło
7
Jeśli chcesz zdefiniować zmienne w innym miejscu, upewnij się, że rozumiesz, czym jest podnoszenie. Oto bardzo fajny artykuł na ten temat odpowiednio odpowiedniogood.com/2010/2/JavaScript-Scoping-and-Hoisting . Powodzenia!
op1ekun
1
To nie jest to, co definitioni declarationznaczy w C. Twój pierwszy wiersz może być deklaracją lub definicją (w zależności od tego, gdzie się znajduje); drugi to tylko zadanie. Deklaracja określa po prostu interpretację identyfikatora (tj. myVarJest an int); jeśli deklaracja zastrzega również przechowywanie, jest to definition. Nie ma to związku z pisaniem; to część tego, w jaki sposób jednostki kompilacyjne rozumieją odniesienia do innych jednostek kompilacyjnych.
EML
4
Nawet w JS, var myVarnazywany jest deklaracja (nie muszą być wpisane) i zadanie . Słyszałem termin „definicja” dla związku ( ). myVar = 10var myVar = 10;
Bergi,
2
To nie pomaga odpowiedzieć na pytanie. Powinien to być komentarz, a nie odpowiedź.
Stuntddude,
2
@Stuntddude prawdopodobnie masz rację :( Zacząłem odpowiadać na pytanie, a potem postanowiłem trochę się rozejść, i cóż, to jest to, co mamy. Nadal niektórzy ppl nadal uważają to za przydatne, więc zostawiłem je tutaj. Dziękuję za twoje informacje zwrotne!
op1ekun,
15

Po prostu zadeklaruj 

var trialImage;

na zewnątrz. Następnie

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

Mam nadzieję że to pomoże.

harihb
źródło
12

Nie możesz. Po prostu zadeklaruj zmienną poza funkcją. Nie musisz go deklarować w tym samym czasie, gdy przypisujesz wartość:

var trailimage;

function makeObj(address) {
  trailimage = [address, 50, 50];
Guffa
źródło
1
Przepraszam! „Czy można zdefiniować zmienną globalną w funkcji JavaScript?” - „Nie, nie możesz” jest niepoprawne, jak pokazuje pierwsza odpowiedź!
mustafa.0x
5
@ mustafa.0x: Mylisz się. Nie można zdefiniować zmiennej globalnej wewnątrz funkcji. Możesz niejawnie utworzyć zmienną globalną lub właściwość window wewnątrz funkcji, ale nie możesz zdefiniować zmiennej globalnej wewnątrz funkcji.
Guffa,
1
Jeśli chodzi o JavaScript w środowisku przeglądarki, zmienna globalna i właściwość windowsą synonimami. Tak czy inaczej, semantyczne rozróżnienie, które wprowadzasz, jest jasne, więc nie mam nic przeciwko cofnięciu głosowania. Edycja: nie mogę zmienić mojego głosu, przepraszam!
mustafa.0x
2
Jeśli nie używasz ścisłe (ale dlaczego nie używasz ścisłe?), to rzeczywiście może zadeklarować i zdefiniować globalne vars wewnątrz funkcji , przechodząc przed wszystkimi dobrymi praktykami, a nie tylko przy użyciu var, co jest, co rozumie się przez Guffa niejawnie utworzyć (takie jak @DhruvPathak, również tam wskazał).
cregox
11

Po prostu zadeklaruj to poza funkcjami i przypisz wartości do funkcji. Coś jak:

<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

Lub po prostu usunięcie „var” z nazwy zmiennej wewnątrz funkcji powoduje, że jest ona globalna, ale lepiej jest zadeklarować ją raz na zewnątrz, aby uzyskać czystszy kod. Będzie to również działać:

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

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

Mam nadzieję, że ten przykład wyjaśnia więcej: 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
źródło
3

Bardzo łatwo zdefiniować zmienną trailimage poza funkcją i ustawić jej wartość w funkcji makeObj. Teraz możesz uzyskać dostęp do jego wartości z dowolnego miejsca.

var offsetfrommouse = [10, -20];
var displayduration = 0;
var obj_selected = 0;
var trailimage;
function makeObj(address) {
      trailimage = [address, 50, 50];
      ....
}
Bharath
źródło
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;

Zdaję sobie sprawę, że jest w tym prawdopodobnie wiele błędów składniowych, ale jest to ogólny pomysł ... Bardzo dziękuję LayZee za zwrócenie na to uwagi ... Możesz dowiedzieć się, czym jest pamięć lokalna i sesyjna na http: //www.w3schools. com / html / html5_webstorage.asp . Potrzebowałem tego samego do mojego kodu i to był naprawdę dobry pomysł.

ShanerM13
źródło
Jak dotąd jest to jedyna odpowiedź, która w ogóle działa, ale wymaga ponownego załadowania strony i location.reload(false);odświeżania strony wielokrotnie.
iyrin
1

Klasyczny przykład:

window.foo = 'bar';

Nowoczesny, bezpieczny przykład oparty na najlepszych praktykach przy użyciu IIFE :

;(function (root) {
    'use strict'

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

Obecnie istnieje również możliwość korzystania z interfejsu API WebStorage 

localStorage.foo = 42;

lub

sessionStorage.bar = 21;

Pod względem wydajności nie jestem pewien, czy jest zauważalnie wolniejszy niż przechowywanie wartości w zmiennych.

Rozpowszechniona obsługa przeglądarek, jak podano w artykule Czy mogę używać ...

Lars Gyrup Brink Nielsen
źródło
localStorage i sessionStorage działa tylko dla wartości ciągów.
HereToLearn_
Zgadza się, @HereToLearn_, ale wtedy możesz użyć localStorage.foo = JSON.stringify({ arbitrary: 'object', meaning: 42, awesome: true });i var foo = JSON.decode(localStorage.foo);.
Lars Gyrup Brink Nielsen
Co localStoragema wspólnego ze zmiennymi globalnymi?
Michał Perłakowski
1
OP szuka rozwiązania tego problemu: „Chcę użyć zmiennej trailimage (zadeklarowanej w funkcji makeObj) w innych funkcjach”. Kto powiedział, że rozwiązanie musi uwzględniać zmienne globalne? Zmienne globalne rzadko są dobrym rozwiązaniem na wszystko.
Lars Gyrup Brink Nielsen
0

Czy chcesz, aby zmienna wewnątrz funkcji była dostępna poza funkcją? Dlaczego nie zwrócić wyników zmiennej wewnątrz funkcji? var x = function returnX { var x = 0; return x; }jest pomysł ...

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

Nie przetestowałem tego, ale jeśli Twój kod działał przed tą niewielką zmianą, powinien on działać.

ShanerM13
źródło
-1

Oto przykładowy kod, który może być pomocny.

  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

Tutaj znalazłem fajną odpowiedź How-can-one-deklarate-a-global-variable-in-JavaScript

Shohanur Rahaman
źródło
Chociaż teoretycznie może to odpowiedzieć na pytanie, lepiej byłoby zawrzeć tutaj istotne części odpowiedzi i podać odnośnik.
Rohit Gupta
-1

Oto kolejna łatwa metoda udostępnienia zmiennej w innych funkcjach bez konieczności używania zmiennych globalnych:

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

makeObj();
someOtherFunction();
Rozwiń fragment kodu

am2124429
źródło
-2

jeśli tworzysz funkcję startową, możesz zdefiniować funkcje globalne i zmienne w następujący sposób:

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

Ponieważ funkcja jest wywoływana globalnie z tym argumentem, tutaj jest to zasięg globalny. Więc coś powinno być globalne.

Konstantin Isaev
źródło
thisznajduje się undefinedw trybie ścisłym poza funkcją i nie należy go używać do odwoływania się do obiektu globalnego.
Michał Perłakowski