Was ist der Zweck des Schlüsselworts var und wann sollte ich es verwenden (oder weglassen)?

Question

ANMERKUNG : Diese Frage wurde aus dem Blickwinkel von ECMAScript Version 3 oder 5 gestellt. Die Antworten könnten mit der Einführung neuer Funktionen in der Version 6 von ECMAScript veraltet sein.

Was genau ist die Funktion des var Schlüsselwort in JavaScript, und was ist der Unterschied zwischen

var someNumber = 2;
var someFunction = function() { doSomething; }
var someObject = { }
var someObject.someProperty = 5;

und

someNumber = 2;
someFunction = function() { doSomething; }
someObject = { }
someObject.someProperty = 5;

?

Wann würden Sie einen der beiden verwenden und warum/wozu dient er?

Answer 1

Ohne var - globale Variable.

Dringend empfohlen für IMMER verwenden. var Anweisung, denn init global variable in local context - ist böse. Aber, wenn Sie diesen schmutzigen Trick brauchen, sollten Sie einen Kommentar am Anfang der Seite schreiben:

/* global: varname1, varname2... */

Answer 2

Hier ein Beispielcode, den ich geschrieben habe, damit Sie dieses Konzept verstehen:

var foo = 5; 
bar = 2;     
fooba = 3;

// Execute an anonymous function
(function() {    
    bar = 100;             //overwrites global scope bar
    var foo = 4;           //a new foo variable is created in this' function's scope
    var fooba = 900;       //same as above
    document.write(foo);   //prints 4
    document.write(bar);   //prints 100
    document.write(fooba); //prints 900
})();

document.write('<br/>');
document.write('<br/>');
document.write(foo);       //prints 5
document.write(bar);       //prints 100
document.write(fooba);     //prints 3

Answer 3

@Chris S gab ein schönes Beispiel, das den praktischen Unterschied (und die Gefahr) zwischen var und keine var . Hier ist eine weitere, die ich für besonders gefährlich halte, weil der Unterschied nur in einer asynchronen Umgebung sichtbar ist, so dass er beim Testen leicht übersehen werden kann.

Wie zu erwarten, wird das folgende Snippet ausgegeben ["text"] :

function var_fun() {
  let array = []
  array.push('text')
  return array
}

console.log(var_fun())

Das gilt auch für den folgenden Ausschnitt (beachten Sie die fehlende let vor array ):

function var_fun() {
  array = []
  array.push('text')
  return array
}

console.log(var_fun())

Die asynchrone Ausführung der Datenmanipulation führt auch mit einem einzigen Executor zum gleichen Ergebnis:

function var_fun() {
  array = [];
  return new Promise(resolve => resolve()).then(() => {
    array.push('text')
    return array
  })
}

var_fun().then(result => {console.log(result)})

Bei mehreren verhält es sich jedoch anders:

function var_fun() {
  array = [];
  return new Promise(resolve => resolve()).then(() => {
    array.push('text')
    return array
  })
}

[1,2,3].forEach(i => {
  var_fun().then(result => {console.log(result)})
})

Benutzen Sie jedoch let:

function var_fun() {
  let array = [];
  return new Promise(resolve => resolve()).then(() => {
    array.push('text')
    return array
  })
}

[1,2,3].forEach(i => {
  var_fun().then(result => {console.log(result)})
})

Answer 4

Als jemand, der versucht, dies zu lernen, sehe ich das folgendermaßen. Die obigen Beispiele waren vielleicht ein bisschen zu kompliziert für einen Anfänger.

Wenn Sie diesen Code ausführen:

var local = true;
var global = true;

function test(){
  var local = false;
  var global = false;
  console.log(local)
  console.log(global)
}

test();

console.log(local);
console.log(global);

Die Ausgabe lautet: false, false, true, true

Denn es sieht die Variablen in der Funktion als getrennt von denen außerhalb der Funktion, daher der Begriff lokale Variable, und dies war, weil wir var in der Zuweisung verwendet. Wenn Sie das var in der Funktion entfernen, liest es sich nun wie folgt:

var local = true;
var global = true;

function test(){
  local = false;
  global = false;
  console.log(local)
  console.log(global)
}

test();

console.log(local);
console.log(global);

Die Ausgabe ist falsch, falsch, falsch, falsch

Denn anstatt eine neue Variable im lokalen Bereich oder in der Funktion zu erstellen, werden einfach die globalen Variablen verwendet und auf false umgestellt.

Answer 5

Ich sehe, dass die Leute verwirrt sind, wenn sie Variablen mit oder ohne var und innerhalb oder außerhalb der Funktion. Hier ist ein ausführliches Beispiel, das Sie durch diese Schritte führen wird:

Sehen Sie das folgende Skript in Aktion hier bei jsfiddle

a = 1;// Defined outside the function without var
var b = 1;// Defined outside the function with var
alert("Starting outside of all functions... \n \n a, b defined but c, d not defined yet: \n a:" + a + "\n b:" + b + "\n \n (If I try to show the value of the undefined c or d, console.log would throw 'Uncaught ReferenceError: c is not defined' error and script would stop running!)");

function testVar1(){
    c = 1;// Defined inside the function without var
    var d = 1;// Defined inside the function with var
    alert("Now inside the 1. function: \n a:" + a + "\n b:" + b + "\n c:" + c + "\n d:" + d);

    a = a + 5;
    b = b + 5;
    c = c + 5;
    d = d + 5;

    alert("After added values inside the 1. function: \n a:" + a + "\n b:" + b + "\n c:" + c + "\n d:" + d);
};

testVar1();
alert("Run the 1. function again...");
testVar1();

function testVar2(){
    var d = 1;// Defined inside the function with var
    alert("Now inside the 2. function: \n a:" + a + "\n b:" + b + "\n c:" + c + "\n d:" + d);

    a = a + 5;
    b = b + 5;
    c = c + 5;
    d = d + 5;

    alert("After added values inside the 2. function: \n a:" + a + "\n b:" + b + "\n c:" + c + "\n d:" + d);
};

testVar2();

alert("Now outside of all functions... \n \n Final Values: \n a:" + a + "\n b:" + b + "\n c:" + c + "\n You will not be able to see d here because then the value is requested, console.log would throw error 'Uncaught ReferenceError: d is not defined' and script would stop. \n ");
alert("**************\n Conclusion \n ************** \n \n 1. No matter declared with or without var (like a, b) if they get their value outside the function, they will preserve their value and also any other values that are added inside various functions through the script are preserved.\n 2. If the variable is declared without var inside a function (like c), it will act like the previous rule, it will preserve its value across all functions from now on. Either it got its first value in function testVar1() it still preserves the value and get additional value in function testVar2() \n 3. If the variable is declared with var inside a function only (like d in testVar1 or testVar2) it will will be undefined whenever the function ends. So it will be temporary variable in a function.");
alert("Now check console.log for the error when value d is requested next:");
alert(d);

Schlussfolgerung

1. Unabhängig davon, ob sie mit oder ohne var deklariert sind (z. B. a, b), wenn sie ihren Wert außerhalb der Funktion erhalten, behalten sie ihren Wert und auch alle anderen Werte, die innerhalb verschiedener Funktionen durch das Skript hinzugefügt werden, bleiben erhalten.
2. Wenn die Variable ohne var innerhalb einer Funktion deklariert wird (wie c), verhält sie sich wie die vorherige Regel, sie behält ihren Wert über alle Funktionen hinweg bei. Entweder hat sie ihren ersten Wert in der Funktion testVar1() erhalten, oder sie behält den Wert und erhält einen weiteren Wert in der Funktion testVar2()
3. Wenn die Variable nur innerhalb einer Funktion mit var deklariert wird (wie d in testVar1 oder testVar2), wird sie undefiniert sein, sobald die Funktion endet. Es handelt sich also um eine temporäre Variable in einer Funktion.