javascript變量的作用域


不太會寫冠冕堂皇的開場白,直接進入主題。

我們看一道題,出處為javaeye的某貼——這世界就是這樣,有些人喜歡制造問題,有人喜歡解決問題。制造問題的人為解決問題的人帶來就業機會……


var a=100;
var b=true;
function test(){
alert(a);
alert(b);
b=false;
alert(b);
var a=200;
alert(a/2);
alert(++Math.PI);
alert(Math.PI++);
}
test();

為什么第一個alert為undefined,而第二個為true。這問題也可以延伸為——alert(b)時怎么就會找外部的b,而alert(a)時就不會往外面找?!

我們都明白局部變量的優先級大於全局變量,或者說內圍作用域的變量的優先級比外圍的高。當JS引擎在當前作用域找不到此變量時,它就往外圍的作用域找。不過,在這之前,有一個嚴肅的問題是,究竟當前作用域存不存在這個變量。像javascript這樣的解釋型語言,基本分為兩個階段,編譯期(下面為符合大多數語言的稱呼習慣,改叫預編譯)與運行期。在預編譯階段,它是用函數來划分作用域,然后逐層為其以 var 聲明的變量(下略稱為var變量)函數定義開辟內存空間,再然后對var變量進行特殊處理,統統賦初始值為undefined,如下圖:

由上圖,我們便可以推知,當前網頁擁有兩個a,一個b,一個test函數。如果在運行期用到除此以外的東東,如c函數或d變量啦,就會報未定義錯誤(用eval等非正常手段生成變量與函數的情況除外),此外,它們最多出現未賦值警告。

javascript的運行期是在為var變量與函數定義分配空間后立即執行,並且是逐行往下執行的。

  • 第1行它為外圍作用域的a賦值為100
  • 第2行它為外圍作用域的b賦值為true
  • 第3行進行test的作用域,我們簡稱為內圍作用域。
  • 第4行就立即調用內圍作用域的a,這時它還沒有來得及賦值呢!不過它已經聲明過了,因此默認為其賦值為undefined(在預編譯階段,見圖),於是alert為undefined
  • 第5行就調用b時,JS引擎就拿起我畫的圖看了(笑),發現test的作用域內沒有b,眼睛往外望,發現b了,而b在第二行就賦值為true,於是alert為true。
  • 第6行為一個賦值操作,把外圍的b變量改賦為false。於是到第7行時,alert為false。以下說法不說了。

作為對比,我們改寫一下例子:


var a=100;
var b=true;
function test(){
alert(a);
alert(b);
var b=false;
alert(b);
var a=200;
alert(a/2);
alert(++Math.PI);
alert(Math.PI++);
}
test();

這時在test函數的作用域內,b也被聲明了。

掌握預編譯為var變量與函數定義分配空間這一事實后,許多問題就迎刃而解。我們看犀牛書上的一個例子。


var scope = "global";
function f() {
alert(scope);
var scope = "local";
alert(scope);
}
f();

答案呼之欲出!

我們來看更復雜的例子。


Object.prototype.test = 'wrong';
var test = 'right';
(function f() {
alert(test);
})();

這個問題的難點在於,運行期時,又生成一同名變量,它是附着於Object.prototype,究竟哪一個距離F()的作用域近一些呢?!測試結果是var test。於是我們有了下圖:

於是我們明白了,原來定義在函數外面的var變量並不位於window作用域的下一層。

我們繼續加深難度。


(function f() {
alert(test);
})();
Object.prototype.test = 'ccc';
Object.test = "bbb"
window.test = "aaa";

報未定義錯誤,因為預編譯期時沒有符合要求的var變量,而在運行期時,和它同名的變量在調用時(第2行)也尚未建立起來!

如果這樣呢?!


Object.test = "bbb";
Object.prototype.test = 'ccc';
window.test = "aaa";
(function f() {
alert(test);
})();

估計有很多人猜是bbb,其實是ccc!有人就不解了,不是對象的屬性的優先級比其原型屬性的優先級高嗎???

無錯,的確如此,不過對象的屬性是這樣定義的:


var o = {test:"eee"}

Object.test = “XXX”這樣定義,為類屬性,或稱靜態屬性。類屬性優先級都是比實例屬性低的

通過這圖也教育我們,一定要用局部變量啊,要不,一層層往上爬,效率是多么低啊。另外,這圖也告訴我們,window是一個多么高級的存在啊(微軟最愛聽),Object都比它低一等,更別提什么繼承問題啦!(在FF與IE中)


//顛覆常識的存在
alert(window instanceof Object);

搞定這個我們看最難的一題。類屬性,實例屬性,原型屬性,極晚綁定的屬性都考到了!不過實例屬性與類屬性已超出本文的討論范圍,恕不討論了。這些也不太難,很容易google到的,自己google吧。


function foo(){
foo.abc = function(){alert('def')}
this.abc = function(){alert('xyz')}
abc = function(){alert('@@@@@')};
var abc = function(){alert('$$$$$$')}
}
foo.prototype.abc = function(){alert('456');}
foo.abc = function(){alert('123');}
var f = new foo();
f.abc();
foo.abc();
abc();

藍色理想的人說這題出得不好,有錯。我說,有錯才好,這樣才能考出水平!十秒內做出正確答案,說明學會了。

答案:

最后歸納一下,JS引擎有兩個設置變量的機會。第一次在預編譯時期,所有var變量會分配到各自的作用域中,值一律為undefined。第二次在運行期,由於是逐行執行,因此是可變的。我們可以通過eval與Function動態生成新的變量,它們的作用域都是可制定的,其他賦值語句,只是把變量固定於頂層作用域(window)中,或是僅僅是重新賦值。我們也可以用delete來刪除對象的屬性,迫使其往外走同名變量。with閉包會在其引用的對象的屬性被刪除后,在閉包的外圍尋找與此屬性同名的變量。有關with閉包請看我另一篇博文。


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
  © 2014-2022 ITdaan.com 联系我们: