JavaScript Scoping and Hoisting 翻譯

你知道下面的JavaScript代碼執行後會alert出什麼值嗎？ 複製代碼 代碼如下:var foo = 1;
function bar() {
if (!foo) {
var foo = 10;
}
alert(foo);
}
bar();

如果答案是"10"令你感到驚訝的話，那麼下面這個會讓你更加困惑：
[/code]
var a = 1;
function b() {
a = 10;
return;
function a() {}
}
b();
alert(a);
[/code]
瀏覽器會alert“1”。那麼，到底是怎麼了？儘管這看起來有點奇怪、有點危險又有點令人困惑，但這事實上卻是這門語言一個強力的具有表現力的特性。我不知道是不是有個標準來定義這種行為，但是我喜歡用”hoisting”來描述。這篇文章試著去解釋這種機制，但是首先，讓我們對JavaScript的scoping做一些必要的瞭解。
Scoping in JavaScript
對於JavaScript新手來說scoping是最令人困惑的部分之一。事實上，不僅僅是新手，我遇到或很多有經驗的JavaScript程式員也不能完全理解scoping。JavaScript的scoping如此複雜的原因是它看上去非常像C系語言的成員。請看下面的C程式： 複製代碼 代碼如下:#include <stdio.h>
int main() {
int x = 1;
printf("%d, ", x); // 1
if (1) {
int x = 2;
printf("%d, ", x); // 2
}
printf("%d\n", x); // 1
}

這段程式的輸出是1,2,1。這是因為在C系語言有塊級範圍(block-level scope),當進入到一個塊時，就像if語句，在這個塊級範圍中會聲明新的變數，這些變數不會影響到外部範圍。但是JavaScript卻不是這樣。在Firebug中試試下面的代碼： 複製代碼 代碼如下:var x = 1;
console.log(x); // 1
if (true) {
var x = 2;
console.log(x); // 2
}
console.log(x);// 2

在這段代碼中，Firebug顯示1，2,2。這是因為JavaScript是函數級範圍(function-level scope)。這和C系語言是完全不同的。塊，就像if語句，並不會建立一個新的範圍。只有函數才會建立新的範圍。
對於大部分熟悉C，C++，C#或是Java的程式員來說，這是意料之外並且不被待見的。幸運的是，因為JavaScript函數的靈活性，對於這個問題我們有一個解決方案。如果你必須在函數中建立一個臨時的範圍，請像下面這樣做： 複製代碼 代碼如下:function foo() {
var x = 1;
if (x) {
(function () {
var x = 2;
// some other code
}());
}
// x is still 1.
}

這種方面確實非常靈活，它使用在任何需要建立一個臨時範圍的地方，不僅僅是某個塊中。但是，我強烈建議你花點時間好好理解下JavaScript scoping。它實在是非常強力，而且它也是我最喜歡的語言特性之一。如果你很好的理解了scoping，理解hoisting將會更加容易。
Declarations, Names, and Hoisting
在JavaScript中，一個範圍(scope)中的名稱(name)有以下四種：
1. 語言自身定義(Language-defined): 所有的範圍預設都會包含this和arguments。
2. 函數形參(Formal parameters): 函數有名字的形參會進入到函數體的範圍中。
3. 函式宣告(Function decalrations): 通過function foo() {}的形式。
4. 變數聲明(Variable declarations): 通過var foo;的形式。
函式宣告和變數聲明總是被JavaScript解譯器隱式地提升(hoist)到包含他們的範圍的最頂端。很明顯的，語言自身定義和函數形參已經處於範圍頂端。這就像下面的代碼： 複製代碼 代碼如下:function foo() {
bar();
var x = 1;
}

實際上被解釋成像下面那樣： 複製代碼 代碼如下:function foo() {
var x;
bar();
x = 1;
}

結果是不管聲明是否被執行都沒有影響。下面的兩段代碼是等價的： 複製代碼 代碼如下:function foo() {
if (false) {
var x = 1;
}
return;
var y = 1;
}
function foo() {
var x, y;
if (false) {
x = 1;
}
return;
y = 1;
}

注意到聲明的賦值部分並沒有被提升(hoist)。只有聲明的名稱被提升了。這和函式宣告不同，函式宣告中，整個函數體也都會被提升。但是請記住，聲明一個函數一般來說有兩種方式。考慮下面的JavaScript代碼： 複製代碼 代碼如下:function test() {
foo(); // TypeError "foo is not a function"
bar(); // "this will run!"
var foo = function () { // 函數運算式被賦值給變數'foo'
alert("this won't run!");
}
function bar() { // 名為'bar'的函式宣告
alert("this will run!");
}
}
test();

在這裡，只有函式宣告的方式會連函數體一起提升，而函數運算式中只會提升名稱，函數體只有在執行到指派陳述式時才會被賦值。
以上就包括了所有關於提升(hoisting)的基礎，看起來並沒有那麼複雜或是令人困惑對吧。但是，這是JavaScript，在某些特殊情況下，總會有那麼一點複雜。
Name Resolution Order
需要記住的最最重要的特例就是名稱解析順序(name resolution order)。記住一個名稱進入一個範圍一共有四種方式。我上面列出的順序就是他們解析的順序。總的來說，如果一個名稱已經被定義了，他絕不會被另一個擁有不用屬性的同名名稱覆蓋。這就意味著，函式宣告比變數聲明具有更高的優先順序。但是這卻不意味著對這個名稱的賦值無效，僅僅是聲明的部分會被忽略而已。但是有下面幾個例外：
內建的名稱arguments的行為有些怪異。他似乎是在形參之後，函式宣告之前被聲明。這就意味著名為arguments的形參會比內建的arguments具有更高的優先順序，即使這個形參是undefined。這是一個不好的特性，不要使用arguments作為形參。
任何地方試圖使用this作為一個標識都會引起語法錯誤，這是一個好的特性。
如果有多個同名形參，那位於列表最後的形參擁有最高的優先順序，即使它是undefined。
Name Function Expressions
你可以在函數運算式中給函數定義名稱，就像函式宣告的語句一樣。但這並不會使它成為一個函式宣告，並且這個名稱也不會被引入到範圍中，而且，函數體也不會被提升(hoist)。這裡有一些代碼可以說明我說的是什麼意思： 複製代碼 代碼如下:foo(); // TypeError "foo is not a function"
bar(); // valid
baz(); // TypeError "baz is not a function"
spam(); // ReferenceError "spam is not defined"
var foo = function () {}; // 匿名函數運算式('foo'被提升)
function bar() {}; // 函式宣告('bar'和函數體被提升)
var baz = function spam() {}; // 命名函數運算式(只有'baz'被提升)
foo(); // valid
bar(); // valid
baz(); // valid
spam(); // ReferenceError "spam is not defined"

How to Code With This Knowledge
現在你明白了範圍和提升，那麼這對編寫JavaScript代碼意味著什麼呢？最重要的一條是聲明變數時總是使用var語句。我強烈的建議你在每個範圍中都只在最頂端使用一個var。如果你強制自己這麼做，你永遠也不會被提升相關的問題困擾。儘管這麼做會使的跟蹤當前範圍實際聲明了哪些變數變得更加困難。我建議在JSLint使用onevar選項。如果你做了所有前面的建議，你的代碼看起來會是下面這樣： 複製代碼 代碼如下:/*jslint onevar: true [...] */
function foo(a, b, c) {
var x = 1,
bar,
baz = "something";
}

What the Standard Says
我發現直接參考ECMAScript Standard (pdf)來理解這些東西是如何運作的總是很有用。下面是關於變數聲明和範圍的一段摘錄(section 12.2.2)：
If the variable statement occurs inside a FunctionDeclaration, the variables are defined with function-local scope in that function, as described in section 10.1.3. Otherwise, they are defined with global scope (that is, they are created as members of the global object, as described in section 10.1.3) using property attributes { DontDelete }. Variables are created when the execution scope is entered. A Block does not define a new execution scope. Only Program and FunctionDeclaration produce a new scope. Variables are initialised to undefined when created. A variable with an Initialiser is assigned the value of its AssignmentExpression when the VariableStatement is executed, not when the variable is created.

我希望這篇文章能夠給JavaScript程式員最容易困惑的部分一些啟示。我儘力寫的全面，以免引起更多的困惑。如果我寫錯了或是漏掉了某些重要的東西，請一定讓我知道。