js高级之词法分析与作用域链

词法分析,共分析三样东西

  • 第一步:先分析参数
  • 第二步:再分析变量声明
  • 第三步:分析函数声明

一个函数能使用的局部变量,就从上面的3步分析而来

具体步骤:

  1. 函数运行的前一瞬间,生成active object(活动对象) 简称为 AO
  2. 把函数声明的参数(即传入函数的参数),形成AO的属性, 参数的值即为属性的值 , 全是undefined
  3. 分析变量声明(var xx)
  • 如果AO上没有xx属性, 则添加AO属性, 值是undefined
  • 如果有AO上有xx这个属性 ,则不做任何修改
  1. 分析函数声明 , 如 function foo(){} , 则把函数赋给 AO.foo属性, 如果此前已有foo属性已经存在, 则就会被无情的覆盖掉

例如

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function t3() {
var greet = 'hello';
alert(greet);

function greet() {

}
alert(greet);

}

t3(null);
</script>
</head>


<body>

词法分析过程:
0:AO={}
1:
1.1 分析参数 AO={great:undefined}
1.2 分析实参 AO={greet:null}

2:分析greet变量声明 , AO 已经有greet属性 ,因此不做任何修改
3:分析函数声明 ,AO.greet= function(){} , 最后被覆盖成函数

执行过程:
greet ='hello;
alert(greet);

alert(greet);

因此, 最终结果为 两个hello

</body>
</html>

好的, 接下来我们看第二个例子, 如何我们将函数设置为一个函数表达式, 那么结果又会是怎样呢?(匿名函数转成“函数声明的形式”)

function t(age) {
// var age;
console.log(age);
var age=function age () {
console.log(age);
}
age();

}
t(5);

这个结果为 5 , function ..
age 只不过是个赋值过程, 值是右侧表达式的返回结果(即函数)

作用域链就是指, 函数由外到内 , 产生的AO链, 叫做作用域链

先分析, 再执行

词法分析是外到内, 分析AO链, 执行时, 从内到外, 寻找AO链

分享到