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

明确了作用域链分析出结果我们才干更好的明确视频中解说的样例,以后再也不用操心自己找不到“北”了!



posted @ 2017-04-15 08:53  lytwajue  阅读(156)  评论(0编辑  收藏  举报