JavaScript Scoping and Hoisting 翻譯
2024-05-06 14:21:35
供稿：網友
你知道下面的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。
