如果你愛上了JavaScript這門詭異的語言，那我相信你一定在與其戀愛期間飽受了其變量作用域所引發的一系列問題的不少摧殘。對于任何一門編程語言，變量作用域都是一個關切的話題。正如David Herman在《Effective JavaScript》中的形象比喻，“Scope is like oxygen to a programmer”。當你“呼吸順暢”的時候，你并不會意識到變量作用域的重要性；然而當你“呼吸受阻”的時候，你便會體會到它的輕重高低。

全局作用域

絕大多數編程語言都有全局作用域的概念。全局作用域是指常量、變量、函數等對象的作用范圍在整個應用程序中都是可見的。對于不同的編程語言，全局作 用域承擔著不同的角色，也因此遭受了不少的罵名。但對于JavaScript，我并不認為它一無是處。我們要做的便是理解它并正確地使用它。

考慮下這樣一個場景。Bill和Peter在同一家公司工作，他們的薪水由兩部分組成：a和b。以下是表示他們薪水組成的數據結構。

var emps = [{name:"Bill", parts:[{name:"a", salary:3000}, {name:"b", salary:2000}]}, {name:"Peter", parts:[{name:"a", salary:2500}, {name:"b", salary:2000}]}]; 

現在，我們希望能計算出Bill和Peter的平均薪水。以下是一段可能的程序片段。

var i, n, sum; 
function salary(emp) { 
  sum = 0;
 
  for (i = 0, n = emp.parts.length; i < n; i++) { 
    sum += emp.parts[i].salary; 
  } 
  return sum; 
} 
function averageSalary(emps) { 
  sum = 0; 
 
  for (i = 0, n = emps.length; i < n; i++) { 
    sum += salary(emps[i]); 
  } 
  return sum / n; 
} 
averageSalary(emps); 

輸出的結果并不是你口算的4750，而是2500。這是因為變量i、n和sum都是全局變量，在執行salary(emps0)之后i的值變為了 2，再回到averageSalary函數的循環體中時emps數組已然越界，最終sum的值只計算了emps數組中的第一個元素。

如果這樣的全局作用域問題并不會困擾你，那下面的問題似乎應當引起你的一些警覺。因為與此相比，它有點意想不到。

function swap(a, i, j) { 
  temp = a[i]; // global 
  a[i] = a[j]; 
  a[j] = temp; 
} 

問題并不是出在交換數組元素上，而是我們無意間創建了一個全局的變量temp。這要完全歸功于JavaScript的語言規范—— JavaScript會將未使用var聲明的變量視為全局變量。慶幸的是，我們可以借助于類似Lint這樣的代碼檢測工具幫我們盡早地發現這類問題。

雖然全局變量有很多問題，然而它在支撐JavaScript模塊之間數據共享、協同合作方面確實承擔了重要的角色。此外，程序員在某些不支持ECMAScript 5的環境中利用其特性檢查的功能來填補一些ES5特有的特性確實受益良多。

if (!this.JSON) { 
  this.JSON = { 
    parse: ..., 
    stringify: ... 
  }; 
} 

詞法作用域和動態作用域

在程序設計語言中，變量可分為自由變量與約束變量兩種。簡單來說，局部變量和參數都被認為是約束變量；而不是約束變量的則是自由變量。 在馮·諾依曼計算機體系結構的內存中，變量的屬性可以視為一個六元組：（名字，地址，值，類型，生命期，作用域）。地址屬性具有明顯的馮·諾依曼體系結構 的色彩，代表變量所關聯的存儲器地址。類型規定了變量的取值范圍和可能的操作。生命期表示變量與某個存儲區地址綁定的過程。根據生命期的不同，變量可以被 分為四類：靜態、棧動態、顯式堆動態和隱式堆動態。作用域表征變量在語句中的可見范圍，分為詞法作用域和動態作用域兩種。

在詞法作用域的環境中，變量的作用域與其在代碼中所處的位置有關。由于代碼可以靜態決定（運行前就可以決定），所以變量的作用域也可以被靜態決定，因此也將該作用域稱為靜態作用域。在動態作用域的環境中，變量的作用域與代碼的執行順序有關。下面這段代碼的輸出會是什么？

x=1 
function g () { 
  echo $x ; 
  x=2 ; 
} 
function f () { 
  local x=3 ; 
  g ; 
} 
f 
echo $x 

如果你的回答是1, 2或3, 1都沒有錯，因為這取決于該段代碼所處的環境。如果處于詞法作用域中，答案便是1, 2；如果處于動態作用域中，答案便是3, 1。

詞法作用域允許程序員根據簡單的名稱替換就能推導出對象引用，例如常量、參數、函數等。這使得程序員在編寫模塊化的代碼是多么的得心應手。同時，這 可能也是動態作用域令人感覺到晦澀的原因之一。詞法作用域最早可以追溯到ALGOL語言。盡管最早的Lisp解釋器和早期的Lisp變種都采用動態作用 域，但隨后的動態作用域語言都支持了詞法作用域。Common Lisp和Perl的語言演化就是最好的證明。JavaScript和C都是詞法作用域語言。不過值得一提的是，不像JavaScript，深受 ALGOL語言影響的C語言并不支持嵌套函數。這對后來的C族語言影響深遠。除了晦澀難懂之外，現代程序設計語言很少支持動態作用域的原因是動態作用域使 得引用透明的所有好處蕩然無存。

臭名昭著的with語句

如果你還在使用類似下面的代碼為with語句找借口，那這正好是放棄它的真正原因。

function status(info) { 
 
  var widget = new Widget(); 
  with (widget) { 
    setFontSize(13); 
 
    setText("Status: " + info); 
    show(); 
  } 
} 

JavaScript會將with語句中的對象插入到詞法作用域的鏈表頭。這將使得status函數非常脆弱。例如，

status("connecting"); 
Widget.prototype.info = "[[widget info]]"; 
status("connected"); 

第二次status函數調用并不會得到預期的結果“Status:connected”而是“Status:widget info”。這是因為在第二次status函數調用之前，我們修改了widget的原型對象（增加了一個info屬性）。這將導致status函數的參數 info會被處于詞法作用域鏈表頭的widget對象的原型對象中的info屬性所屏蔽。除此之外，with語句還會導致性能問題。這與在采用鏈地址法解 決散列沖突的散列表中查找關鍵字是異曲同工的。下面是修正的代碼。

function status(info) { 
 
  var w = new Widget();
 
  w.setFontSize(13); 
 
  w.setText("Status: " + info); 
  w.show(); 
} 

#p#

變量聲明提升（hoisting）

JavaScript支持詞法作用域，但并不支持塊級作用域，即變量定義的作用域并不是離其最近的封閉語句或代碼塊，而是包含它們的函數。下面的代碼片段詮釋了這一特性。

var emps = [{name:"Bill", salary: 5000}, {name:"Peter", salary: 3000}]; 
var ben = {name:"ben", salary: 6000}; 
  
function isHighestSalary(emp, others) { 

  var highest = 0;
 
  for (var i = 0, n = others.length; i < n; i++) { 
    var emp = others[i];
 
    if (emp.salary > highest) { 
      highest = emp.salary; 
    } 
  } 
  return emp.salary > highest; 
} 
isHighestSalary(ben, emps); 

該代碼段在for循環體內聲明了一個局部變量emp。但是由于JavaScript中的變量是函數級作用域，而不是塊級作用域，所以在內部聲明的 emp變量簡單地重聲明了一個已經在作用域內的變量(即參數emp)。該循環的每次迭代都會重寫這一變量。因此，return語句將emp視為 others的最后一個元素，而不是此函數最初的emp參數。

可以將JavaScript的變量聲明行為看作由兩部分組成，即聲明和賦值。JavaScript隱式地提升(hoists)聲明部分到封閉函數的頂部，而將賦值留在原地。

閉包

可能有這樣一個需求，程序需要計算一個數的平方。你可能定義下面這樣一個函數。

function square(num) { 
  return Math.pow(num, 2); 
} 

程序又需要計算一個數的立方。你可能又會定義下面這樣一個函數。

function cube(num) { 
  return Math.pow(num, 3); 
} 

當你還在考慮是否為計算一個數的四次方創建一個函數的時候，可能有人在草稿紙上寫了這樣的代碼。

function pow(power) { 
  return function(num) { 
    return Math.pow(num, power); 
  }; 
} 

是的，這就是閉包。函數是一等公平，可以作為一個函數的返回對象。你可以像下面的代碼一樣計算一個數的平方和立方。

var square = pow(2); 
var cube = pow(3); 
console.info(square(3)); 
console.info(cube(3)); 

掌握JavaScript的閉包，除了理解這樣一個事實（即使外部函數已經返回，當前函數仍然可以引用在外部函數所定義的變量）外，還需要理解閉包存儲的是外部變量的引用。我們來看這樣一個例子。

function doubleArray(a) { 
  var result = []; 
  for (var i = 0, n = a.length; i < n; i++) { 
    (function(j) { 
      result[i] = function() { 
        return a[j] * 2; 
      }; 
    })(i); 
  } 
  return result; 
} 
doubleArray([1, 2, 3, 4, 5])[0](); 

程序期望輸出的結果是2，即給定數組第一個元素的2倍。但結果并不是這樣。因為result數組中存儲的所有閉包引用的都是同一個引用i。很容易想到的一個解決方法便是使用立即調用的函數表達式來提供類似塊作用域的功能。

function doubleArray(a) { 
  var result = []; 
  for (var i = 0, n = a.length; i < n; i++) { 
    (function(j) { result[i] = function() { return a[j] * 2; }; })(i); 
  } 
  return result; 
} 

ES6塊作用域

在年底即將發布的ES6標準中將會發布一個新的關鍵字let。它在語法上與var相似，但不同的是，它將在當前塊中定義變量。

function log(msg) { ... } 
function f(x) { 
  if (...) { 
    let { log, sin, cos } = Math; 
    ... log(x) ... 
  } 
  log("done computing f()"); 
} 

上面閉包引用外部變量問題，也可以通過它解決。

for (i = 0; i < n; i++) { 
  let x = a[i]; 
  element.onclick = function() { 
    ... x ... 
  }; 
} 

原文鏈接：http://cloveryu.github.io/blog/the-war-of-JavaScript-vaiiable-scope/