JS高級心法——做用域鏈

首先咱們來看兩個js中的代碼：   

<script  type="text/javascript">  
  var c=5;
  function t1(){	
	var	d=6
	function t2(){
		var e=7		 
	    alert(c+d+e);		
	}
	t2();
  }
  t1(); 
</script>

  這個你很是快會得出結論：18。

<script language="javascript" type="text/javascript">
  function t1(){	
	var d;
	function t2(){
		d=5;
		e=6;
	}
	t2();
  }
  t1();
 alert(e);  
 alert(window.d);
</script>

     

   思考下？……

你的答案是 6。undefined嗎？假設不是請繼續往下看吧，這事實上就是做用域鏈的問題。

   咱們知道js中用var聲明一個變量 ,尋找變量首先在函數內尋找。找不到則再往外層尋找直到全局（window）區域。

這就是第一個程序的根據
   window.xxx引用全局變量，找不到做爲某個屬性不存在，則返回undefined。

   好了再看一個：

<script  type="text/javascript">   
  var str1='global';
  function t1(){	
	alert(str1);
	alert(str2);
    var str2='local';	  
  }
  t1();	
</script>

    這個假設你在網上查好多關於做用域的都有這個樣例來解釋，但是看了他們洋洋灑灑寫了好多結果本身越看越迷糊。

    歷經千辛萬苦最終得出了很是有用的方法，省得看太多讓人頭暈的東西。

事實上js代碼在整體執行時分爲：詞法分析期和執行期。

   

    詞法分析分析3樣東西：第一步：先分析參數
                        第二步:再分析變量聲明
                        第三步:分析函數聲明
   詳細： 0：函數執行前瞬間生成活動對象Actve Object（AO）
          1：
             1.1函數聲明的參數造成AO的屬性值全是undefined
             1.2接收實參，造成AO對應的屬性的值
          2：分析變量聲明！
             假設AO上尚未屬性，則加入AO屬性。值是undefined
             假設已經有屬性，則不作不論什麼影響
          3.分析函數聲明。假設函數屬性已經存在，則被覆蓋。

   根據整理分析下如下：

<script  type="text/javascript">   
  function t2(age){
	 var age=99;
	 alert(age); 
 }
 t2(5);//執行結果是99
</script>

分析過程：

0:造成AO={}

1.分析形參age爲undefined

2.分析var age 發現AO已經有age屬性。不作不論什麼影響

運行過程：AO.age=99;

alert(age)結果爲99

明確了做用域鏈分析出結果咱們才幹更好的明確視頻中解說的樣例，之後不再用操心本身找不到「北」了！