Javascript 笔记与总结(1-2)词法分析

时间:2022-09-01 15:52:53

词法分析,按顺序分析 3 样:

第 1 步:先分析参数

第 2 步:再分析变量声明

第 3 步:再分析函数声明

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

具体步骤:

0:函数运行前的瞬间,生成 Active Object(活动对象)

1: 1.1 把函数声明的参数,形成 AO (Active Object)的属性,值全是 undefined,

  1.2 接受实参形成 AO 相应属性的值

2:分析变量声明,如 var age,如果 AO 上已经有 age 属性,则不作任何影响;如果 AO 上还没有 age 属性,则添加 AO 属性,但此时没赋值,值是 undefined

3:分析函数声明,如 function foo(){},则把函数赋给 AO.foo 属性

注:如果此前 foo 属性已经存在,则会被覆盖成函数

例1

<script>
function a(b){
alert(b);
function b(){
alert(b);
}
b();
}
a(1);
</script>

【答案】:两次弹出

function b(){

alert(b);

}

【分析】

分析期:

0. AO = {}

1.

  1.1 分析参数 AO = {b:undefined}

  1.2 接收参数 AO = {b:1}

2. 分析 var 声明,此处函数没有 var

3. 分析函数声明,AO = {b:function(){alert(b);}}

执行期:

alert(b);   // function

b();  // 由作用域寻找到 a 函数中的 b,即 function,alert() 出来

例2

<script>
function t(age){
alert(age);
}
t(5); //
t(); //undefined
</script>

【分析】

词法分析过程:

AO{ age = undefined }

运行过程:

t(5); → AO.age = 5; alert(AO.age); //5

t(); → AO.age = undefined; //AO.age 没有得到赋值,还是 undefined

例3

<script>
function t(age){
var age = 10;
alert(age);
}
t(5);
</script>

弹出 10。

【分析】

词法分析过程:

0. 形成AO = {}

1.

  1.1 分析形参 AO = {age:undefined}

1.2 接收形参:AO = {age:5}

2. 分析 var age,发现 AO 已有 age 属性,不做任何影响

执行过程:

AO.age = 10

alert(age); //10

例4(和例1 做对比):

<script>
function t(greet){
var greet = 'hello';
alert(greet);
function greet(){
}
alert(greet);
}
t(null);
</script>

弹出两次 'hello'

【分析】

词法分析过程:

0. AO = {}

1.

  1.1 分析形参:AO = {greet = undefined}

  1.2 接收形参:AO = {greet:null}

2. 分析 greet 变量声明,AO 已经有 greet 属性,因此不做任何影响

3. 分析 greet 函数声明,AO.greet = function(){},被覆盖成函数

执行过程:

greet = 'hello';

alert(greet);

alert(greet);

【再分析】

var greet = 'hello';

这一句要当成两句看(两次执行):① 分析期的 var 声明过程 ② 运行期的 赋值 过程

由于在运行期被赋值成了 'hello',因此两次 alert 弹出的都是 'hello'

如果去掉该句(则和例 1 一样)或者改为 var greet; ,则弹出两次

function greet(){}

例5

<script>
function a(b){
alert(b);
b = function (){
alert(b);
}
b();
}
a(1);
</script>

分别弹出 1 和 function (){alert(b)}

【词法分析过程】:

0:AO = {}

1.分析参数 AO = {b:undefined}  → {b:1}

2.分析 var 声明,没有

3.分析函数声明,没有

注:b = function(){alert(b)} ,是一个赋值过程,在执行器才起作用

【执行过程】:

alert(b);   //b = 1

b = function(){

  alert(b);    //往上找,找到b = function(){}

}

b(); // funtion

【函数声明 与 函数表达式】

函数可以赋值给变量,可以作为参数来传递

function t1(){
}

t2 = function(){
}

t1 是函数声明,虽然全局内也得到一个 t1 变量,值是 function;

t2 只是一个赋值过程,值是右侧的表达式的返回结果,即函数

因此 t1 和 t2 两种方式在词法分析时,有着本质区别:前者在词法分析阶段就发挥作用,后者在函数运行阶段才发挥作用

例如:

(function(window,undefined){
})(window)

这是 jQuery 的最外层代码

【分析】

(function(window,undefined){})

这是内层表达式,返回值是函数,包在小括号里,当成表达式来执行

(function(window,undefined){})(window)

立即调用

而内层函数又没有起名字,成为匿名函数

这种手法,匿名函数,立即执行,不污染全局,称为 立即执行匿名函数表达式

传 window 是为了速度,不传 undefined 是为了防止外界对 undefined 的污染(在 IE 、FF 低版本中,undefined 可以重新赋值,例如 undefined = 3;)

【作用域链】

指函数由内到外,产生的 AO 链

Javascript 笔记与总结(1-2)词法分析

词法分析时由外至内,分析 AO 链;执行时由内到外,寻找 AO 链

更多词法作用域文章:JavaScript的词法作用域