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

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