淺談javascript中的範圍

JS中範圍的概念：

　　表示變數或函數起作用的地區，指代了它們在什麼樣的上下文中執行，亦即上下文執行環境。Javascript的範圍只有兩種：全域範圍和本地範圍，本地範圍是按照函數來區分的。

首先來看幾道題目：

1. 複製代碼 代碼如下:if(true){
var aa= "bb";
}
console.log(aa); //bb

for(var i = 0; i < 100; i++){
//do
}
console.log(i); //100

2. 複製代碼 代碼如下:var bb = '11111';
function aa() {
alert(bb);//undefine
var bb = 'test';
alert(bb);//test
　　　var cc = "test1";
alert(age);//語法錯誤
}
aa();

3. 複製代碼 代碼如下:var test = '1111111';
function aa() {
alert(test);
}

function bb() {
var test = '22222222';
aa();
}

bb();//alert(1111111);

4. 複製代碼 代碼如下:alert(typeof aa); //function
alert(typeof bb); //undefined function aa() { //函數定義式
alert('I am 111111111');
};
var bb = function() { //函數運算式
}
alert(typeof bb);//function

5. 複製代碼 代碼如下:function aa(){
var bb = "test";
cc = "測試";
alert(bb);
}
aa();
alert(cc);//測試
alert(bb);//文法報錯

上面這5道題目全部概括了js中範圍的問題

可以總結出這麼幾個觀點

一、無塊級範圍

從第一題中可以看出來，在{}中執行後，變數並沒有被銷毀，還是儲存在記憶體中的，因此我們可以訪問到的。

二、JavaScript中的函數運行在它們被定義的範圍裡,而不是它們被執行的範圍裡.

這裡提到函數的範圍鏈這個概念，在ECMA262中,是這樣的

任何執行內容時刻的範圍, 都是由範圍鏈(scope chain)來實現.
在一個函數被定義的時候, 會將它定義時候的scope chain連結到這個函數對象的[[scope]]屬性.
在一個函數對象被調用的時候，會建立一個使用中的物件(也就是一個對象), 然後對於每一個函數的形參，都命名為該使用中的物件的命名屬性, 然後將這個使用中的物件做為此時的範圍鏈(scope chain)最前端, 並將這個函數對象的[[scope]]加入到scope chain中.
所以題目3 結果是alert(1111111);

三、JS會提前處理function定義式 和var關鍵字

　　如題目4 開始alert(bb); //undefine ,alert(age)//文法報錯，這兩個有什麼區別呢，原因就是後面有var bb =“test”,在初始化的時候提前處理了var 這個關鍵字，只是這個開始未賦值

將代碼修改成這樣的，可以看出來 複製代碼 代碼如下:var dd = '11111';
function aa() {
alert(bb);//undefine
　　 var bb = 'test';
alert(bb);//test
　　　var cc = "test1";
alert(age);//語法錯誤
}
aa();
alert(dd);//11111
alert(cc);//文法報錯

此處alert(bb)沒有報語法錯誤，alert(age)報語法錯誤。

但是請注意： 複製代碼 代碼如下:<script>
alert(typeof aa); //結果:undefined
</script>
<script>
function aa() {
alert('yupeng');
}
</script>

這說明js先行編譯是以段為單元的。題目4同理

四、函數級範圍

　　函數裡面的定義的變數，在函數執行完後就銷毀了，不佔有記憶體地區了。

　　所以題目2最後的alert(cc);文法報錯，題目5最後到 alert(bb)同理