開發十年，就只剩下這套架構體系了！ >>>   

雖然，ES6在我們工作中應用得越來越廣泛，但是還是很多專案保留著ES5的寫法，所以，今天，帶著大家重新鞏固下ES5下的作用域及預解析機制。

概念：

作用域：域，指的是一個空間、範圍、區域，作用指的是在域內可進行讀寫操作。一個變數的作用域是程式原始碼中定義的這個變數的區域。 在ES5中，只存在全域性和函式級作用域，在ES6中，引入了塊級作用域,js的預解析機制大概分為兩個過程：預解析和自上而下逐行解讀 預解析:js解析器會先把var定義的變數、function、引數等一些東西儲存進倉庫裡面(記憶體)。變數var在正式執行之前，都賦值為undefined,function函式在執行之前，就是整個函式塊

逐行解讀

表示式=、+、-、*、/、++、--、！、%.....number()、引數都可以賦值 遇到重名的，只留下一個，變數和函式重名，函式優先順序高於變數，只留下函式 函式呼叫（函式是一個作用域，遇到作用域都會按照先進行預解析，然後逐行解讀的過程執行），先區域性找引數，區域性找不到就自下向上找（作用域鏈） 概念扯了一大段，估計初學者還是有點暈乎乎，老司機就可以提前下車了，接下來，咋們舉幾個小栗子，結合上面的理論，深入理解。

實踐 例1：

alert(a); //error: a is not defined
a = 3;

預解析

上面說過，預解析時只會把var 、 function 、引數等儲存起來，所以： 整個作用域沒有找到var function 引數

逐行解讀

預解析後，記憶體中存在a且被賦值了underfind整個變數，所有，程式碼執行過程中程式直接報錯。

例2：

alert(a); //undefined
var a = 3;

分析：

預解析

上面說過，預解析時只會把var 、 function 、引數等儲存起來，所以： 執行到第二行時，a 的值是未定義。

逐行解讀

第一行：預解析後，記憶體中存在a且被賦值了underfined

例3：

alert(a);          // function a (){ alert(4); }
var a = 1;
alert(a);          // 1
function a (){ alert(2); }
alert(a);          // 1
var a = 3;    
alert(a);          // 3
function a (){ alert(4); }
alert(a);          // 3
 

域解析

上面說過，預解析時只會把var 、 function 、引數等儲存起來，所以： 執行到第二行時，a 的值是未定義。 執行到第四行時，a 的值是函式本身，也就是function a(){alert(2);}。 執行到第六行時，a 的值還是第四行時的值，也就是function a(){alert(2);}，因為函式的優先順序比變數高。 執行到第八行時，a 的值就變成了function a(){alert(4);} ,因為當兩個函式重名時，遵循程式碼從上往下執行。 //在此我向大家推薦一個前端全棧開發交流圈：619586920 突破技術瓶頸，提升思維能力

逐行解讀

預解析完成之後，就是程式碼逐行執行了， 第一行：會彈出function a(){alert(4);} ，因為預解析完成之後，被存進記憶體的a 的值就是function a(){alert(4);} 第二行：第二行裡有表示式，a 被賦了一個新的值1 表示式會改變變數的值。表示式可以改變預解析的值。 第三行：a現在被賦值為1，所有會彈出1 第四行：只是函式的宣告，並沒有用到表示式，而且也沒有函式的呼叫，所以不會改變a 的值。 第五行：因為a的值沒有變化，所以還是1 第六行：使用了表示式，a 被賦了一個新的值3 第七行：會彈出3 第八行：函式的宣告，不會改變a 的值。 第九行：a的值沒有改變，所以還是3 通過上面的栗子，相信大家應該對變數作用域的預解析過程有一定的瞭解了，接下來，咋們再舉幾個函式 //在此我向大家推薦一個前端全棧開發交流圈：619586920 突破技術瓶頸，提升思維能力

作用域的栗子 例4：

var a=1;
function fn1(){
  alert(a); //undefined
  var a = 2;
}
fn1();
alert(a) //1

例5：

var a=1;
function fn1(a){
  alert(a); //1
  var a = 2;
}
fn1(a);
alert(a) //1

例6：

var a=1;
function fn1(a){
  alert(a); //1
  a = 2;
}
fn1(a);
alert(a) //1

例7：

var a=1;
function fn1(){
  alert(a); //1
  a = 2;
}
fn1(a);
alert(a) //2

這幾個栗子想必不用在一步步分析吧，不過就一點小改動，可能結果就截然不同，所以，大家還是需要仔細琢磨下。

結語

感謝您的觀看，如有不足之處，