在 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 規範使用內部資料結構 環境 來儲存變數（請參閱 環境：管理變數）。此語言具有相當不尋常的功能，可透過物件存取全域變數的環境，也就是所謂的 全域物件。 全域物件可 used 用於建立、讀取和變更全域變數。在全域範圍內，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