在 JavaScript 中，您需要在使用变量之前通过 var 语句声明它：

var foo;
foo = 3; // OK, has been declared
bar = 5; // not OK, an undeclared variable

您还可以将声明与赋值结合起来，立即初始化变量

var foo = 3;

未初始化变量的值为 undefined：

> var x;
> x
undefined

您可以从两个角度检查程序的工作方式：

在本章的其余部分，您应该了解以下概念：

大多数主流语言都是 块级作用域 的：变量“存在于”最里面的代码块中。以下是 Java 中的一个示例：

public static void main(String[] args) {
    { // block starts
        int foo = 4;
    } // block ends
    System.out.println(foo); // Error: cannot find symbol
}

在前面的代码中，变量 foo 只能在其直接包围的块内访问。如果我们尝试在块结束后访问它，则会收到编译错误。

相比之下，JavaScript 的变量是 函数作用域 的：只有函数会引入新的作用域；在作用域方面，块会被忽略。例如：

function main() {
    { // block starts
        var foo = 4;
    } // block ends
    console.log(foo); // 4
}

换句话说，foo 在 main() 的所有地方都可以访问，而不仅仅是在块内。

JavaScript 会 提升 所有变量声明，将它们移动到其直接作用域的开头。这清楚地说明了如果在声明变量之前访问它会发生什么：

function f() {
    console.log(bar);  // undefined
    var bar = 'abc';
    console.log(bar);  // abc
}

我们可以看到变量 bar 已经存在于 f() 的第一行，但它还没有值；也就是说，声明已被提升，但赋值没有。JavaScript 执行 f()，就好像它的代码是

function f() {
    var bar;
    console.log(bar);  // undefined
    bar = 'abc';
    console.log(bar);  // abc
}

如果您声明一个已经声明的变量，则不会发生任何事情（变量的值保持不变）

> var x = 123;
> var x;
> x
123

每个函数声明也会被提升，但方式略有不同。完整的函数会被提升，而不仅仅是存储它的变量的创建（请参阅提升）。

> function sloppyFunc() { x = 123 }
> sloppyFunc()
> x
123

> function strictFunc() { 'use strict'; x = 123 }
> strictFunc()
ReferenceError: x is not defined

您通常会引入一个新的作用域来限制变量的生命周期。您可能希望这样做的一个例子是 if 语句的“then”部分：它仅在条件成立时执行；如果它只使用辅助变量，我们不希望它们“泄漏”到周围的作用域中：

function f() {
    if (condition) {
        var tmp = ...;
        ...
    }
    // tmp still exists here
    // => not what we want
}

如果要为 then 块引入新的作用域，可以定义一个函数并立即调用它。这是一种解决方法，是对块级作用域的模拟：

function f() {
    if (condition) {
        (function () {  // open block
            var tmp = ...;
            ...
        }());  // close block
    }
}

这是 JavaScript 中的一种常见模式。Ben Alman 建议将其称为立即调用函数表达式（IIFE，发音为“iffy”）。通常，IIFE 如下所示

(function () { // open IIFE
    // inside IIFE
}()); // close IIFE

以下是关于 IIFE 的一些注意事项

!function () { // open IIFE
    // inside IIFE
}(); // close IIFE

void function () { // open IIFE
    // inside IIFE
}(); // close IIFE

var File = function () { // open IIFE
    var UNTITLED = 'Untitled';
    function File(name) {
        this.name = name || UNTITLED;
    }
    return File;
}(); // close IIFE

var x = 23;
(function (twice) {
    console.log(twice);
}(x * 2));

var x = 23;
(function () {
    var twice = x * 2;
    console.log(twice);
}());

var setValue = function () {
    var prevValue;
    return function (value) { // define setValue
        if (value !== prevValue) {
            console.log('Changed: ' + value);
            prevValue = value;
        }
    };
}();

包含程序所有内容的作用域称为 全局作用域 或 程序作用域。这是您在输入脚本（无论是网页中的 <script> 标签还是 .js 文件）时所处的作用域。在全局作用域内，您可以通过定义函数来创建嵌套作用域。在这样的函数内部，您可以再次嵌套作用域。每个作用域都可以访问自己的变量以及周围作用域中的变量。由于全局作用域包含所有其他作用域，因此它的变量可以在任何地方访问：

// here we are in global scope
var globalVariable = 'xyz';
function f() {
    var localVariable = true;
    function g() {
        var anotherLocalVariable = 123;

        // All variables of surround scopes are accessible
        localVariable = false;
        globalVariable = 'abc';
    }
}
// here we are again in global scope

<!-- Don’t do this -->
<script>
    // Global scope
    var tmp = generateData();
    processData(tmp);
    persistData(tmp);
</script>

<script>
    (function () {  // open IIFE
        // Local scope
        var tmp = generateData();
        processData(tmp);
        persistData(tmp);
    }());  // close IIFE
</script>

ECMAScript 规范使用内部数据结构环境来存储变量（请参阅环境：管理变量）。该语言有一个不同寻常的特性，即可以通过一个对象（即所谓的全局对象）访问全局变量的环境。全局对象可用于创建、读取和更改全局变量。在全局作用域中，this 指向它：

> var foo = 'hello';
> this.foo  // read global variable
'hello'

> this.bar = 'world';  // create global variable
> bar
'world'

请注意，全局对象具有原型。如果要列出其所有（自身和继承的）属性，则需要使用列出所有属性键中的getAllPropertyNames()等函数。

> getAllPropertyNames(window).sort().slice(0, 5)
[ 'AnalyserNode', 'Array', 'ArrayBuffer', 'Attr', 'Audio' ]

JavaScript 创建者 Brendan Eich 认为全局对象是他“最后悔的事情之一”。它会对性能产生负面影响，使变量作用域的实现更加复杂，并导致代码模块化程度降低。

(function (glob) {
    // glob points to global object
}(typeof window !== 'undefined' ? window : global));

var foo = 123;
(function () {
    console.log(window.foo);  // 123
}());

(function () {
    var foo = 123;
    console.log(window.foo);  // undefined
}());

var g_foo = 123;
(function () {
    console.log(g_foo);
}());

window.isNaN(...)  // no
isNaN(...)  // yes

if (window.someVariable) { ... }

// Don’t do this
if (someVariable) { ... }

if (window.someVariable !== undefined) { ... }
if ('someVariable' in window) { ... }

if (typeof someVariable !== 'undefined') { ... }

if (!window.someApiFunction) {
    window.someApiFunction = ...;
}

当程序执行进入其作用域时，变量就会出现。然后它们需要存储空间。在 JavaScript 中，提供该存储空间的数据结构称为环境。它将变量名映射到值。其结构与 JavaScript 对象的结构非常相似。环境有时会在您离开其作用域后继续存在。因此，它们存储在堆上，而不是堆栈上。

变量以两种方式传递。如果您愿意，它们有两个维度：

这两个维度处理如下：

让我们看一个例子：

function myFunction(myParam) {
    var myVar = 123;
    return myFloat;
}
var myFloat = 1.3;
// Step 1
myFunction('abc');  // Step 2

图 16-1。变量的动态维度通过执行上下文堆栈处理，静态维度通过链接环境处理。活动执行上下文、环境和函数突出显示。步骤 1 显示了函数调用 myFunction(abc) 之前的这些数据结构。步骤 2 显示了函数调用期间的这些数据结构。

图 16-1 说明了执行前面的代码时会发生什么：

如果函数离开创建它的作用域，它会保持与该作用域（以及周围作用域）的变量的连接。例如：

function createInc(startValue) {
    return function (step) {
        startValue += step;
        return startValue;
    };
}

createInc() 返回的函数不会丢失与其startValue 的连接，该变量为函数提供了在函数调用之间持久化的状态。

> var inc = createInc(5);
> inc(1)
6
> inc(2)
8

闭包是一个函数加上与其创建时作用域的连接。该名称源于闭包“封闭”了函数的自由变量。如果变量未在函数中声明（即，如果它来自“外部”），则该变量是自由的。

function f() {
    var result = [];
    for (var i=0; i<3; i++) {
        var func = function () {
            return i;
        };
        result.push(func);
    }
    return result;
}
console.log(f()[1]());  // 3

function f() {
    var result = [];
    for (var i=0; i<3; i++) {
        (function () { // step 1: IIFE
            var pos = i; // step 2: copy
            var func = function () {
                return pos;
            };
            result.push(func);
        }());
    }
    return result;
}
console.log(f()[1]());  // 1