Definieren Sie eine globale Variable in einer JavaScript-Funktion

511

Ist es möglich, eine globale Variable in einer JavaScript-Funktion zu definieren?

Ich möchte die trailimageVariable (in der makeObjFunktion deklariert ) in anderen Funktionen verwenden.

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

— hamze
quelle

19

Um ein globales zu deklarieren, verwenden Sie einfach nicht das Schlüsselwort "var"

— Ibu

20

@Ibrahim: " Um ein globales zu deklarieren, benutze einfach nicht das Schlüsselwort" var "" Gak! Der Horror ! ;-) Zum Glück beseitigt der strenge Modus implizite Globale.

— TJ Crowder

28

@Ibrahim Diallo - nicht mit varnicht deklariert eine globale Variable. Eine Folge der Zuweisung eines Werts zu einer nicht deklarierten Variablen ist die Erstellung einer Eigenschaft für das globale Objekt, die sich erheblich von der Deklaration einer Variablen unterscheidet.

— RobG

1

nützliche Informationen in dieser Antwort auch stackoverflow.com/a/4862268/1356098 :)

— Erenor Paz

739

Ja, wie die anderen gesagt haben, können Sie varim globalen Bereich (außerhalb aller Funktionen) eine globale Variable deklarieren:

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

Alternativ können Sie einer Eigenschaft Folgendes zuweisen window:

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

... weil in Browsern ~~alle globalen Variablen, mit denen~~ globale Variablen deklariert varsind, Eigenschaften des windowObjekts sind. (In der neuesten Spezifikation, ECMAScript 2015, erstellen die Anweisungen new letund constund classAnweisungen im globalen Bereich Globals, die keine Eigenschaften des globalen Objekts sind. Ein neues Konzept in ES2015.)

(Es gibt auch den Schrecken impliziter Globals , aber tun Sie es nicht absichtlich und tun Sie Ihr Bestes, um dies nicht versehentlich zu tun, vielleicht durch die Verwendung von ES5 "use strict".)

Alles, was gesagt wurde: Ich würde globale Variablen vermeiden, wenn Sie dies können (und Sie können es mit ziemlicher Sicherheit). Wie ich bereits erwähnt habe, sind sie letztendlich Eigenschaften von windowund windowsind bereits überfüllt genug, wenn alle Elemente mit einem id(und vielen mit nur einem name) darin abgelegt werden (und unabhängig von der bevorstehenden Spezifikation gibt IE so gut wie alles mit einem nameauf ).

Wickeln Sie stattdessen Ihren Code in eine Gültigkeitsbereichsfunktion ein, verwenden Sie lokale Variablen für diese Gültigkeitsbereichsfunktion und schließen Sie Ihre anderen Funktionen darin:

<script>
(function() { // Begin scoping function
    var yourGlobalVariable; // Global to your code, invisible outside the scoping function
    function foo() {
        // ...
    }
})();         // End scoping function
</script>

— TJ Crowder
quelle

98

+1 Die explizite Deklaration zum Fenster ist der am besten lesbare Weg.

— Caspar Kleijne

8

Beachten Sie, dass die Verwendung windowin Node nicht funktioniert. Der einfachste Trick besteht darin, Folgendes festzulegen: GLOBAL.window = GLOBAL;- wie in dieser verwandten Frage erläutert . Natürlich ist es konzeptionell nicht schön. Ich mache die Dinge lieber umgekehrt, damit ich sie GLOBALstattdessen verwenden kann window.

— Domi

4

@CasparKleijne, ich verstehe es nicht. Warum sollten Sie es dem Fenster zuweisen, wenn Sie buchstäblich keine Beweise dafür haben, dass das Fensterobjekt tatsächlich existiert? Sie wissen nichts darüber, wie Ihr Code in Zukunft verwendet wird. Es kann sogar in der MongoDB-Umgebung oder im Rino anstelle Ihres Knotens verwendet werden. Und das Fensterobjekt ist auch im Browser nicht sichtbar, wenn Sie beispielsweise Web-Worker verwenden. Dadurch wird die Wiederverwendbarkeit vollständig zerstört.

— Gherman

4

window.yourGlobalVariable = ...;funktioniert wie ein Zauber, nachdem 5 bis 6 Fragen auf der Stapelseite gelesen wurden.

— Ahmed Syed

6

@JacquesKoekemoer: Es gibt überhaupt keinen Grund, evaldort zu verwenden . Stattdessen:window[dynamic_variable_name] = dynamic_variable_value;

— TJ Crowder

19

UPDATE1: Wenn Sie die Kommentare lesen, gibt es eine nette Diskussion über diese spezielle Namenskonvention.

UPDATE2: Es scheint, dass die Namenskonvention formeller geworden ist, seit meine Antwort veröffentlicht wurde. Menschen, die unterrichten, Bücher schreiben usw., sprechen über varDeklaration und functionDeklaration.

UPDATE3: Hier ist der zusätzliche Wikipedia-Beitrag, der meinen Standpunkt unterstützt: http://en.wikipedia.org/wiki/Declaration_(computer_programming)#Declarations_and_Definitions

... und um die Hauptfrage zu beantworten. DECLARE-Variable vor Ihrer Funktion. Dies funktioniert und entspricht der bewährten Methode, Ihre Variablen am oberen Rand des Gültigkeitsbereichs zu deklarieren :)

— op1ekun
quelle

7

Wenn Sie Ihre Variablen an anderer Stelle definieren möchten, müssen Sie verstehen, was Heben ist. Hier ist ein sehr schöner Artikel darüber adäquatgood.com/2010/2/ JavaScript- Scoping-and- Hoisting . Viel Glück!

— Op1ekun

1

Dies ist nicht was definitionund declarationbedeutet in C. Ihre erste Zeile könnte entweder eine Deklaration oder eine Definition sein (je nachdem, wo sie sich befindet); Der zweite ist nur eine Aufgabe. Eine Deklaration gibt nur die Interpretation des Bezeichners an (dh myVarist ein int); Wenn die Erklärung auch Speicher reserviert, ist es a definition. Dies hat nichts mit dem Tippen zu tun. Dies ist Teil dessen, wie Kompilierungseinheiten Verweise auf andere Kompilierungseinheiten verstehen.

— EML

4

Auch in JS var myVarheißt Deklaration (es muss nicht eingegeben werden) und myVar = 10eine Zuweisung . Ich habe den Begriff "Definition" für die Verbindung ( var myVar = 10;) gehört.

— Bergi

2

Dies hilft nicht, die Frage zu beantworten. Es hätte ein Kommentar sein sollen, keine Antwort.

— Stuntddude

2

@Stuntddude du hast wahrscheinlich recht :( Ich habe angefangen, die Frage zu beantworten und habe mich dann entschlossen, ein bisschen auseinander zu gehen, und nun, das ist es, was wir haben. Trotzdem finden es einige Leute immer noch nützlich, also habe ich es hier gelassen. Danke für deine Feedback!

— op1ekun

15

Einfach deklarieren

var trialImage;

draußen. Dann

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

Hoffe das hilft.

— harihb
quelle

12

Nein, das kannst du nicht. Deklarieren Sie einfach die Variable außerhalb der Funktion. Sie müssen es nicht gleichzeitig mit der Zuweisung des Werts deklarieren:

var trailimage;

function makeObj(address) {
  trailimage = [address, 50, 50];

— Guffa
quelle

1

Es tut uns leid! "Ist es möglich, eine globale Variable in einer JavaScript-Funktion zu definieren?" - "Nein, du kannst nicht" ist nicht richtig, wie die erste Antwort zeigt!

— mustafa.0x

5

@ mustafa.0x: Du liegst falsch. Sie können nicht definieren eine globale Variable in einer Funktion. Sie können implizit eine globale Variable oder eine Fenstereigenschaft innerhalb einer Funktion erstellen , aber Sie können keine globale Variable innerhalb einer Funktion definieren.

— Guffa

1

In Bezug auf JavaScript in einer Browserumgebung sind eine globale Variable und eine Eigenschaft von windowsynonym. In jedem Fall ist die semantische Unterscheidung, die Sie treffen, klar, sodass es mir nichts ausmacht, nicht abzustimmen. Bearbeiten: Ich kann meine Stimme nicht ändern, sorry!

— mustafa.0x

2

wenn Sie nicht streng mit (aber warum nicht verwenden Sie streng?), die Sie tatsächlich können erklären und definieren globale Variablen in einer Funktion , indem sie gegen alle guten Praktiken zu gehen und nicht nur die Verwendung var, das ist das, was Guffa gemeint implizit erstellen (wie @DhruvPathak zeigte auch dort).

— Cregox

11

Deklarieren Sie es einfach außerhalb der Funktionen und weisen Sie Werte innerhalb der Funktionen zu. Etwas wie:

<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

Wenn Sie einfach "var" aus Ihrem Variablennamen innerhalb der Funktion entfernen, wird es auch global. Es ist jedoch besser, es einmal für einen saubereren Code außerhalb zu deklarieren. Dies wird auch funktionieren:

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

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

Ich hoffe, dieses Beispiel erklärt mehr: 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
quelle

3

Es ist sehr einfach, die Trailimage-Variable außerhalb der Funktion zu definieren und ihren Wert in der Funktion makeObj festzulegen. Jetzt können Sie von überall auf seinen Wert zugreifen.

var offsetfrommouse = [10, -20];
var displayduration = 0;
var obj_selected = 0;
var trailimage;
function makeObj(address) {
      trailimage = [address, 50, 50];
      ....
}

— Bharath
quelle

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;

Mir ist klar, dass dies wahrscheinlich viele Syntaxfehler enthält, aber es ist die allgemeine Idee ... Vielen Dank, LayZee, für den Hinweis ... Sie finden unter http: //www.w3schools , was ein lokaler Speicher und ein Sitzungsspeicher sind . com / html / html5_webstorage.asp . Ich habe dasselbe für meinen Code benötigt und das war eine wirklich gute Idee.

— ShanerM13
quelle

Bisher ist dies die einzige Antwort, die überhaupt funktioniert, aber es erfordert das Neuladen der Seite und location.reload(false);das wiederholte Aktualisieren der Seite.

— Iyrin

1

Klassisches Beispiel:

window.foo = 'bar';

Modernes, sicheres Beispiel nach Best Practice unter Verwendung eines IIFE :

;(function (root) {
    'use strict'

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

Heutzutage besteht auch die Möglichkeit, die WebStorage-API zu verwenden

localStorage.foo = 42;

oder

sessionStorage.bar = 21;

In Bezug auf die Leistung bin ich mir nicht sicher, ob es merklich langsamer ist als das Speichern von Werten in Variablen.

Weit verbreitete Browserunterstützung wie unter Kann ich ...

— Lars Gyrup Brink Nielsen
quelle

localStorage und sessionStorage funktionieren nur für Zeichenfolgenwerte.

— HereToLearn_

Das ist richtig, @HereToLearn_, aber dann können Sie localStorage.foo = JSON.stringify({ arbitrary: 'object', meaning: 42, awesome: true });und verwenden var foo = JSON.decode(localStorage.foo);.

— Lars Gyrup Brink Nielsen

Was localStoragehat mit globalen Variablen zu tun?

— Michał Perłakowski

1

OP sucht nach einer Lösung für dieses Problem: "Ich möchte die Trailimage-Variable (in der Funktion makeObj deklariert) in anderen Funktionen verwenden." Wer sagt, dass die Lösung globale Variablen beinhalten muss? Globale Variablen sind selten eine gute Lösung für irgendetwas.

— Lars Gyrup Brink Nielsen

0

Sie möchten also, dass die Variable innerhalb der Funktion außerhalb der Funktion verfügbar ist? Warum nicht die Ergebnisse der Variablen innerhalb der Funktion zurückgeben? var x = function returnX { var x = 0; return x; }ist die Idee ...

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

Ich habe dies nicht getestet, aber wenn Ihr Code vor dieser kleinen Änderung funktioniert hat, sollte er funktionieren.

— ShanerM13
quelle

-1

Hier ist ein Beispielcode, der hilfreich sein kann.

  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

Hier habe ich eine nette Antwort gefunden. Wie kann man eine globale Variable in JavaScript deklarieren?

— Shohanur Rahaman
quelle

Während dies theoretisch die Frage beantworten kann, wäre es vorzuziehen , die wesentlichen Teile der Antwort hier aufzunehmen und den Link als Referenz bereitzustellen.

— Rohit Gupta

-1

Hier ist eine weitere einfache Methode, um die Variable in anderen Funktionen verfügbar zu machen, ohne globale Variablen verwenden zu müssen:

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

makeObj();
someOtherFunction();

Erweitern Sie das Snippet

— am2124429
quelle

-2

Wenn Sie eine Startfunktion erstellen, können Sie globale Funktionen und Variablen folgendermaßen definieren:

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

Da die Funktion mit diesem Argument global aufgerufen wird, ist dies hier der globale Bereich. Das Etwas sollte also eine globale Sache sein.

— Konstantin Isaev
quelle

thisbefindet sich undefinedaußerhalb einer Funktion im strengen Modus und sollte nicht verwendet werden, um auf das globale Objekt zu verweisen.

— Michał Perłakowski