var 关键字的用途是什么以及何时应该使用它（或省略它）？

Question

注意：这个问题是从 ECMAScript 版本 3 或 5 的角度提出的。随着版本中新功能的引入，答案可能会过时ECMAScript 6。

JavaScript 中 var 关键字的作用到底是什么？

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

和

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

之间有什么区别？

你什么时候会使用其中任何一个，为什么/它有什么作用？

Answer 1

如果你在全球范围内，那么没有太大区别。阅读 Kangax 的 答案以获取解释

如果您在函数中，则 var 将创建一个局部变量，“no var”将查找作用域链，直到找到该变量或到达全局作用域（此时它将创建它）：

// These are both globals
var foo = 1;
bar = 2;

function()
{
    var foo = 1; // Local
    bar = 2;     // Global

    // Execute an anonymous function
    (function()
    {
        var wibble = 1; // Local
        foo = 2; // Inherits from scope above (creating a closure)
        moo = 3; // Global
    }())
}

如果您没有进行赋值，那么您需要使用var：

var x; // Declare x

Answer 2

有区别。

var x = 1 在当前作用域（也称为执行上下文）中声明变量 x。如果声明出现在函数中 - 声明了局部变量；如果它在全局范围内 - 声明一个全局变量。

另一方面，x = 1 只是一个属性赋值。它首先尝试根据作用域链解析x。如果它在该作用域链中的任何位置找到它，它就会执行分配；如果它没有找到x，那么它才会在全局对象上创建x属性（这是范围内的顶级对象）链）。

现在，请注意，它没有声明全局变量，而是创建了一个全局属性。

两者之间的区别很微妙，可能会令人困惑，除非您了解变量声明也会创建属性（仅在变量对象上）并且 Javascript（好吧，ECMAScript）中的每个属性都有某些描述的标志它们的属性 - ReadOnly、DontEnum 和 DontDelete。

由于变量声明使用 DontDelete 标志创建属性，因此 var x = 1 和 x = 1（在全局范围内执行时）之间的区别在于，前者 - 变量声明- 创建 DontDelete'able 属性，而后一个则没有。因此，通过此隐式赋值创建的属性可以从全局对象中删除，而前一个属性（通过变量声明创建的属性）则无法删除。

但这当然只是理论，在实践中，由于实现中的各种错误（例如来自 IE 的错误），两者之间存在更多差异。

希望这一切都有意义 :)

---

[更新 2010/12/16]

在 ES5（ECMAScript 5；最近标准化的语言第 5 版）中，有一种所谓的“严格模式”——一种可选模式在语言模式下，这会稍微改变未声明赋值的行为。在严格模式下，分配给未声明的标识符会引发ReferenceError。这样做的理由是捕获意外分配，防止创建不需要的全局属性。一些较新的浏览器已经开始滚动支持严格模式。例如，请参阅我的兼容性表。

Answer 3

说这是“本地”和“全球”之间的区别并不完全准确。

最好将其视为“本地”和“最近”之间的差异。最近的肯定可以是全球性的，但情况并非总是如此。

/* global scope */
var local = true;
var global = true;

function outer() {
    /* local scope */
    var local = true;
    var global = false;

    /* nearest scope = outer */
    local = !global;

    function inner() {
        /* nearest scope = outer */
        local = false;
        global = false;

        /* nearest scope = undefined */
        /* defaults to defining a global */
        public = global;
    }
}

Answer 4

当 Javascript 在浏览器中执行时，所有代码都被 with 语句包围，如下所示：

with (window) {
    //Your code
}

有关 with - MDN

由于 var 声明了一个变量 在当前作用域 ，因此声明 < code>var 在窗口内并且根本不声明它。

当您不直接在窗口内（例如在函数内或块内）时，就会出现差异。

使用 var 可以隐藏同名的外部变量。通过这种方式，你可以模拟一个“私有”变量，但那是另一个话题了。

经验法则是始终使用 var，否则您将面临引入细微错误的风险。

编辑：
在收到批评后，我想强调以下几点：

• var 声明了一个变量 在当前作用域
• 全局作用域是 window
• 不使用var 在全局作用域（窗口）中隐式声明 var
• 使用 var 在全局作用域（窗口）中声明变量与省略它相同。
• 使用 var 在不同于 window 的作用域中声明变量 与不使用 var 声明变量不同
• 始终声明 var 明确地因为这是一个很好的实践

Answer 5

始终使用 var 关键字来声明变量。为什么？良好的编码实践本身就应该有足够的理由，但省略它意味着它是在全局范围内声明的（这样的变量称为“隐含”全局）。 Douglas Crockford 建议永远不要使用隐含全局变量，并根据 Apple JavaScript 编码指南：

没有 var 创建的任何变量
关键字是在全局范围内创建的
并且当
函数返回（因为它不
超出范围），呈现
内存泄漏的机会。

Answer 6

这是一个很好的例子，说明了如何因未使用 var 声明局部变量而陷入困境：

<script>
one();

function one()
{
    for (i = 0;i < 10;i++)
    {
        two();
        alert(i);
    }
}

function two()
{
    i = 1;
}
</script>

(i 在循环的每次迭代中都会重置，因为它是不是在 for 循环中局部声明，而是全局声明）最终导致无限循环

Answer 7

我想说在大多数情况下最好使用 var 。

局部变量总是比全局范围内的变量更快。

如果不使用 var 声明变量，则该变量将处于全局范围内。

有关更多信息，您可以在 Google 中搜索“作用域链 JavaScript”。

Answer 8

不要使用var！

var 是 ES6 之前声明变量的方式。我们现在在未来，你应该这样编码。

使用 const 和 let

const 应该在大约 95% 的情况下使用。它使得变量引用无法更改，因此数组、对象和 DOM 节点属性可以更改，并且应该是 const。

let 应该用于任何需要重新分配的变量。这包括在 for 循环内。如果您在初始化之外编写了 varName =，请使用 let。

正如大多数其他语言所期望的那样，两者都具有块级作用域。

Answer 9

另一个区别
例如，

var a = a || [] ; // works 

同时

a = a || [] ; // a is undefined error.

Answer 10

使用 var 始终是一个好主意，可以防止变量使全局范围混乱以及变量之间相互冲突，从而导致不必要的覆盖。

Answer 11

没有 var - 全局变量。

强烈建议始终使用var语句，因为本地上下文中的init全局变量是邪恶的。但是，如果你需要这个肮脏的把戏，你应该在页面开头写下评论：

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

Answer 12

这是我为您编写的示例代码，以帮助您理解这个概念：

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 13

@Chris S 给出了一个很好的例子，展示了 var 和没有 var 之间的实际差异（和危险）。这是另一个，我发现这个特别危险，因为差异仅在异步环境中可见，因此在测试过程中很容易被忽略。

正如您所期望的，以下代码片段输出 ["text"]：

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

console.log(var_fun())

以下代码片段也是如此（请注意 array 之前缺少 let）：

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

console.log(var_fun())

使用单个执行器异步执行数据操作仍然会产生相同的结果：

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

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

但对于多个的行为有所不同：

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

然而使用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 14

作为一个试图学习这一点的人，我就是这样看待它的。上面的例子对于初学者来说可能有点过于复杂。

如果运行此代码：

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

输出将读为： false, false, true, true

因为它将函数中的变量与函数外部的变量分开，因此出现术语“局部变量”，这是因为我们在赋值中使用了 var 。如果你去掉函数中的 var，那么它现在的读法如下：

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

输出是 false, false, false, false

这是因为它不是在局部作用域或函数中创建新变量，而是简单地使用全局变量并重新分配它们为假。

Answer 15

我发现人们在使用或不使用 var 以及函数内部或外部声明变量时感到困惑。下面是一个深入的示例，将引导您完成这些步骤：

在 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);

结论

1. 无论使用或不使用 var 进行声明（如 a、b），如果它们在函数外部获取值，它们将保留其值，并且通过脚本添加到各个函数内的任何其他值也会保留。
2. 如果在函数（如 c）内声明变量时没有使用 var，它将像前面的规则一样，从现在开始它将在所有函数中保留其值。要么它在函数 testVar1() 中获得第一个值，它仍然保留该值并在函数 testVar2() 中获得附加值
3. 如果仅在函数内使用 var 声明变量（如 testVar1 或 testVar2 中的 d），则每当函数结束时，该变量都将是未定义的。所以它将是函数中的临时变量。

Answer 16

在代码中，如果您使用变量而不使用 var，那么会发生的情况是 var var_name 自动放置在全局范围中，例如：

someFunction() {
    var a = some_value; /*a has local scope and it cannot be accessed when this
    function is not active*/
    b = a; /*here it places "var b" at top of script i.e. gives b global scope or
    uses already defined global variable b */
}

Answer 17

除了范围问题之外，有些人还提到了 提升，但没有人给出示例。这是全球范围的：

console.log(noErrorCase);
var noErrorCase = "you will reach that point";

console.log(runTimeError);
runTimeError = "you won't reach that point";

Answer 18

不使用“var”变量只能在设置值时定义。例如：

my_var;

无法在全局范围或任何其他范围中工作。它应该具有如下值：

my_var = "value";

另一方面，您可以定义一个可用的值；

var my_var;

它的值是undefined（它的值不是null，而且有趣的是它不等于null）。

Answer 19

您应该使用 var 关键字，除非您打算将变量附加到浏览器中的 window 对象。 这是一个解释范围界定和glocal 作用域和使用或不使用 var 关键字的局部作用域之间的区别。

当不使用 var 关键字定义变量时，它看起来像是一个简单的“赋值”操作。

当在 javascript 中将值赋给变量时，解释器首先尝试在与赋值相同的上下文/范围中查找“变量声明”。当解释器执行 dummyVariable = 20 时，它会在函数开头查找 dummyVariable 的声明。
（因为所有变量声明都被 javascript 解释器移动到上下文的开头，这称为提升）

您可能还需要查看 在 javascript 中提升