深入了解JavaScript的词法分析
之前对JavaScript的底层运行机制不是很了解,错了很多面试图,痛定思痛,决定认真对待 JavaScript,好好了解一下它.
JavaScript代码运行前,有一个类似编译的过程,叫做词法分析,就是分析代码或函数的一些变量,声明,对于重复命名的变量的处理.
词法分析主要有三个步骤:
- 分析参数
- 分析变量的声明
- 分析函数的声明
具体步骤如下:
函数在运行前,会生成一个活动对象我们叫做 Active Object 简称AO
第一步 分析参数
- 函数接收形式参数,添加到AO的属性中,并且这个时候属性的值是undefine 如:
function fun1 (name) {}在这个阶段,name是undefine的,
-
接收实参,添加到AO的属性下,覆盖之前的undefine
-
function fun1 (name) {}
-
fun1(27)
-
这个时候函数接收到的是实参, 那么 在这个词法分析的阶段name就是27
第二步 分析变量声明
如var name; var name = function () {} var name = 27
如果上一步分析参数中AO还没有name属性,则添加AO属性为undefine,即AO.name = undefine
如果AO上面已经有了name属性,则不作任何修改
第三步 分析函数的声明
如果有function name () {} 把函数赋值给AO.name 则覆盖上一步分析的值
看一段练手的代码
-
function func(name) {
-
console.log(name)
-
var name = 25;
-
console.log(name)
-
function name () {
-
}
-
console.log(name)
-
}
-
-
func(18)
词法分析:
第一步:分析函数参数
形参: AO.name = undefine
实参:AO.name = 18
第二步:分析局部变量
第三行代码有var name,但此时第一步已经有AO.name = 18 故不作任何改变
即AO.name = 18
第三步:分析函数声明
第五行代码有函数name, 则将function name(){} 付给AO.name 即AO.name = function name (){}
所以执行代码时:
第2行代码执行时,拿到name时词法分析后的AO.name 结果是 function name () {};
第3行代码 25 赋值给name 此时name = 25
第4行代码运行时name已经是25了,故结果是25
第5,6行代码时一个函数表达式,所以不会做任何操作;
第7行的结果依然是name=25
词法分析应该注意var name = function () {} 这样一个语句,参与了第二步和第三步 ;
执行代码时应注意函数表达式不做任何操作,且只声明变量没赋值时,nane仍然等于AO.name
下面给大家几个试炼题
-
// 例子2
-
function func (name) {
-
var name;
-
console.log(name)
-
var name = 25;
-
console.log(name)
-
function name () {}
-
console.log(name)
-
}
-
// 例子3
-
function func (name) {
-
var name;
-
console.log(name)
-
var name = 25;
-
console.log(name)
-
function name () {
-
console.log(name)
-
}
-
name()
-
console.log(name)
-
}
-
func(18)
-
// 例子4
-
function func (name) {
-
var name
-
console.log(name)
-
function name () {
-
console.log(name)
-
}
-
name()
-
console.log(name)
-
}
-
func(18)
-
// 例子5
-
function func (name) {
-
console.log(name)
-
var name = function name () {
-
console.log(name)
-
}
-
console.log(name)
-
}
-
func(18)
文章来源: fizzz.blog.csdn.net，作者：拿我格子衫来，版权归原作者所有，如需转载，请联系作者。
原文链接：fizzz.blog.csdn.net/article/details/104059743
- 点赞
- 收藏
- 关注作者
评论（0）