JS做用域理解(聲明提高)

1.JS解析步驟：

　　a.預解析

　　　　將變量聲明提高；

　　　　將函數聲明及函數內容提高，能夠理解成原來位置的函數在解析代碼時已經提到代碼初始位置；

　　　　塊內的變量聲明和函數聲明也會被提高，例如if語句

　　　　遇到重名，只留下一個；

　　　　若有重名變量和函數，留下函數；

　　　　若有兩個重名函數，後一個函數覆蓋前一個函數；

　　　　firefox不能預解析塊內定義的函數，出於兼容性考慮，定義函數，通常要放到最外面

　　　　（注意：變量提高的是聲明，函數提高的是聲明和內容）

　　b.逐行解析代碼

　　　　遇到表達式，能夠修改預解析的變量值，例如變量賦值能夠將函數聲明替換掉；

　　　　(重點)先處理js代碼，再處理代碼中的事件和隊列，例如，先將setTimeout解析出來，等代碼執行完，再根據延時處理其中的函數

2.若是有幾個script代碼部分，JS會按照前後順序逐個解析執行，可是這幾個代碼部分共用一個域

3.函數的參數至關於在函數內部定義了這個變量，至關於局部變量，在函數內部解析時也會進行聲明提高

4.JS中，每一個函數都有本身的執行環境（做用域），其中使用的變量會按照做用域鏈進行搜索，一直到全局環境，而且只會對目標變量所處的環境形成影響

5.被花括號包圍的代碼塊在不少類c語言中會有塊級做用域，JS沒有塊級做用域

6.函數傳參至關於賦值表達式

7.只要是一個執行環境（做用域），就會發生JS解析兩個步驟

8.只有函數能夠建立局部做用域，若是須要一個相似塊級做用域的做用域，能夠在塊內加入一個函數

　　例子：

　　　　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　　　　

　　　　alert( typeof a );

　　　　a(); // 報錯

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

　　　　<script>

　　　　　　alert(a);        //報錯

　　　　</script>

  　　　 <script>

　　　　　　var a=1;

　　　　</script>

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

　　　　<script>

　　　　　　var a=1       

　　　　</script>

  　　　 <script>

　　　　　　alert(a); 　　//1

　　　　</script>

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

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

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

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

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

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

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

　　　　window.onload = function (){ 　　　　var aBtn = document.getElementsByTagName('input'); 　　　　for( var i=0; i<aBtn.length; i++ ){ 　　　　aBtn[i].onclick = function (){ 　　　　// alert( i ); // Undefined 　　　　for( var i=0; i<aBtn.length; i++ ){ 　　　　aBtn[i].style.background = 'yellow'; 　　　　} 　　　　}; 　　　　}　　　　};