JavaScript的高级知识---词法分析

词法分析

词法分析方法:

js运行前有一个类似编译的过程即词法分析,词法分析主要有三个步骤:

  • 分析参数
  • 再分析变量的声明
  • 分析函数说明
  • 函数在运行的瞬间,生成一个活动对象(Active Object),简称AO
  • 分析参数

具体步骤如下:

  1. 函数接收形式参数,添加到AO的属性,并且这个时候值为undefine,例如AO.age=undefine
  2. 接收实参,添加到AO的属性,覆盖之前的undefine
  • 分析变量声明,如var age;或var age=23;
  1. 如果上一步分析参数中AO还没有age属性,则添加AO属性为undefine,即AO.age=undefine
  2. 如果AO上面已经有age属性了,则不作任何修改
  • 分析函数的声明,如果有function age(){}

把函数赋给AO.age ,覆盖上一步分析的值

代码例子1

这样我们先通过一段代码来理解词法分析:

<script>

function t1(age) {

console.log(age);

var age = 27;

console.log(age);

function age() {}

console.log(age);

}

t1(3);

</script>

词法分析阶段:

  • 首先形成Active Object即AO对象
  • 第一步:分析形式参数

AO.age = undefine

传入实参即对AO.age=undefine进行覆盖:

AO.age = 3

  • 第二步:分析局部变量

存在var age = 27;

这个时候遵循如果AO.age存在值则不作任何修改,按照第一步分析的最后结果AO.age = 3,所以这里不作任何修改即:

AO.age = 3

  • 第三步:分析函数的声明,

因为函数中存在function age(){}函数

所以按照规则应该将函数赋值给AO.age覆盖第二步分析的AO.age = 3即:

AO.age = function age(){}

执行阶段

执行t1函数,到console.log(age)时,词法分析的最后AO.age= function age(){},所以会打印:

function age(){}

var age=27;给age赋值27

到第二个console.log(age)这个时候age已经重新被赋值27,所以这个时候会打印:

27

function age() 并没有调用所以并不会执行

到第三个console.log(age)这个时候age的值并没有被再次修改,所以这个时候会打印:

27

运行js查看结果如下与我们分析的完全相符:

代码例子2

<script>

function t1(age) {

var age;

console.log(age);

var age = 23;

console.log(age);

function age() {}

console.log(age);

}

t1(22)

</script>

和上面的词法分析过程一样

词法分析阶段:

  • 首先形成Active Object即AO对象
  • 第一步:分析形式参数

AO.age = undefine

传入实参即对AO.age=undefine进行覆盖:

AO.age = 22

 

  • 第二步:分析局部变量

第一步中最后得到AO.age = 22

所以这里var age;以及var age =23 ,因为AO.age属性已经存在值,所以这个时候遵循如果存在则不作任何修改,即:

AO.age = 22

  • 第三步:分析函数的声明,

因为函数中存在function age(){}函数

所以按照规则应该将函数赋值给AO.age覆盖第二步分析的AO.age = 22即:

AO.age = function age(){}

执行阶段

执行t1函数,到console.log(age)时,词法分析的最后AO.age= function age(){},所以会打印:

function age(){}

var age=23;给age赋值23

到第二个console.log(age)这个时候age已经重新被赋值23,所以这个时候会打印:

23

function age() 并没有调用所以并不会执行

到第三个console.log(age)这个时候age的值并没有被再次修改,所以这个时候会打印:

23

运行js查看结果如下与我们分析的完全相符:

代码例子3

<script>

function t1(age) {

var age;

console.log(age);

age = 23;

console.log(age);

function age() {

console.log(age);

}

age();

console.log(age)

}

t1(22)

</script>

词法分析阶段:

  • 首先形成Active Object即AO对象
  • 第一步:分析形式参数

AO.age = undefine

传入实参即对AO.age=undefine进行覆盖:

AO.age = 22

 

  • 第二步:分析局部变量

第一步中最后得到AO.age = 22,所以这里遵循,如果AO.age存在值则不作任何修改即:

AO.age = 22

  • 第三步:分析函数的声明

因为函数中存在function age(){console.log(age)}函数

所以按照规则应该将函数赋值给AO.age覆盖第二步分析的AO.age = 22即:

AO.age = function age(){console.log(age)}

 

执行阶段

执行t1函数,到console.log(age)时,词法分析的最后AO.age= function age(){console.log(age)},所以会打印:

function age(){console.log(age)}

 

age = 23,这个时候会覆盖原来的function age(){console.log(age)},所以第二个console.log(age)会打印:

23

function age() 是一个函数表达式,所以不会做任何操作

age() 这个时候的age还是23,并不是函数表达式,所以这里会报错

运行js查看结果如下与我们分析的完全相符:

这里的提示错误确实也是说age不是一个函数

代码例子4

<script>

function t1(age) {

var age;

console.log(age);

function  age() {

console.log(age);

}

age();

console.log(age);

}

t1(23)

</script>

词法分析阶段:

  • 首先形成Active Object即AO对象
  • 第一步:分析形式参数

AO.age = undefine

传入实参即对AO.age=undefine进行覆盖:

AO.age = 23

  • 第二步:分析局部变量

第一步中最后得到AO.age = 23,所以这里遵循,如果AO.age存在值则不作任何修改即:

AO.age = 23

  • 第三步:分析函数的声明

因为函数中存在function age(){console.log(age)}函数

所以按照规则应该将函数赋值给AO.age覆盖第二步分析的AO.age = 23即:

AO.age = function age(){console.log(age)}

执行阶段

执行t1函数,到console.log(age)时,词法分析的最后AO.age= function age(){console.log(age)},所以会打印:

function age(){console.log(age)}

 

function age() 是一个函数表达式,所以不会做任何操作

 

age()这个时候age是一个函数表达式,这里会执行function age(){console.log(age)},这个时候函数里console.log(age),age没有被修改所以还是function age(){console.log(age)},即打印:

function age(){console.log(age)}

 

最后一个console.log(age)这里的age没有被修改还是function age(){console.log(age)},所以会打印:

function age(){console.log(age)}

运行js查看结果如下与我们分析的完全相符:

代码例子5:

<script>

function t1(age) {

console.log(age);

var age = function () {

console.log(age)

}

age();

console.log(age);

}

t1(23);

</script>

词法分析阶段:

  • 首先形成Active Object即AO对象
  • 第一步:分析形式参数

AO.age = undefine

传入实参即对AO.age=undefine进行覆盖:

AO.age = 23

 

  • 第二步:分析局部变量

第一步中最后得到AO.age = 23,所以这里遵循,如果AO.age存在值则不作任何修改即:

AO.age = 23

  • 第三步:分析函数的声明

这里并没有函数声明表达式

所以最后分析的结果是:

AO.age = 23

执行阶段

执行t1函数,到console.log(age)时,词法分析的最后AO.age=23

所以第一个console.log(age)会打印

23

var age = function () {console.log(age)},这里将var = 23进行覆盖这个时候age是一个函数表达式

age() 正好调用function () {console.log(age)},这个时候这个函数里的console.log(age),age并没有修改还是一个函数表达式,所以会打印

function () {console.log(age)}

最后一个console.log(age)还是打印:

function () {console.log(age)}

运行js查看结果如下与我们分析的完全相符:

代码例子6:

<script>

function t1(age) {

console.log(age);

var age = function age() {

console.log(age);

}

age();

console.log(age);

}

t1(23);

</script>

代码例子6和代码例子5的分析基本一样,结果也是一样:

总结

总之,按照上述最开始写的方法分析,都能分析出结果来

js词法分析的更多相关文章

  1. js作用域和词法分析

    都知道js中不存在类似于c++等语言的块级作用域,例如for循环中定义的变量,其实是属于当前对象下的属性,同一对象下可以随便访问.只有函数可以限定一个变量的作用范围,即函数才是变量的作用域. 对于函数 ...

  2. js 变量提升和函数提升原理

    关于js的变量,开始的时候我们都会被告知,变量声明应该在引用该变量之前.关于为什么要这样做呢,开始的时候本着会用就行的目的,也没去深究.不过后来经常会发现一些让人很费解的..姑且称为现象吧.先看一段代 ...

  3. js作用域的相关知识

    众所周知,在ES6之前,JavaScript是没有块级作用域的,如下图所示: 学过其他语言的同学肯定有点诧异,为什么会这样呢?因为js还是不同于其他语言的,在ES5中,只有全局作用域和函数作用域,并没 ...

  4. 深入浏览器工作原理和JS引擎(V8引擎为例)

    浏览器工作原理和JS引擎 1.浏览器工作原理 在浏览器中输入查找内容,浏览器是怎样将页面加载出来的?以及JavaScript代码在浏览器中是如何被执行的? 大概流程可观察以下图: 首先,用户在浏览器搜 ...

  5. 前端-js-长期维护

    ###############    JS简介和JS引入     ################ <!DOCTYPE html> <html lang="en" ...

  6. js的高级知识---词法分析

    词法分析 词法分析方法: js运行前有一个类似编译的过程即词法分析,词法分析主要有三个步骤: 分析参数 再分析变量的声明 分析函数说明 具体步骤如下: 函数在运行的瞬间,生成一个活动对象(Active ...

  7. 第十九篇 js高级知识---词法分析和AO 链

    上面一篇文章说了js的作用域链,这一节算是对上面的延申,有一个典型的例子,首先看原来的一段代码: var name = "test"; function t() { var b = ...

  8. js高级知识---词法分析和AO 链

    转载自https://www.cnblogs.com/OceanHeaven/p/4957704.html 上面一篇文章说了js的作用域链,这一节算是对上面的延申,有一个典型的例子,首先看原来的一段代 ...

  9. JS中script词法分析

    核心:JS中的script是分段执行的. <script> var i = 10; </script> <script> alert(i); </script ...

随机推荐

  1. Angularjs+node+Mysql实现地图上的多点标注

    注:本文适合对于node有一定基础的人,如果您是小白,请先用1个小时学习node.node文档https://nodejs.org/en/docs/ 该片博文的源码地址:https://github. ...

  2. framebuffer line_length 參數

    以下是在 trace 關機充電動畫所遇到一個疑惑, 關於 framebuffer device 的屬性 line_length 大小值, 一個 display panel,1920 × 1080, 每 ...

  3. Android基础测试题(四)

    看了前两道题大家有没有发现,测试题少了(一),大家猜猜测试题(一)是什么? Android基础测试题(四): 需求: 建一个方法,格式化输出2016-11-14 10:15:26格式的当前时间,然后截 ...

  4. 贝赛尔曲线UIBezierPath

    使用UIBezierPath类可以创建基于矢量的路径,这个类在UIKit中.此类是Core Graphics框架关于path的一个封装.使用此类可以定义简单的形状,如椭圆或者矩形,或者有多个直线和曲线 ...

  5. django 进阶篇

    models(模型) 创建数据库,设计表结构和字段 使用 MySQLdb 来连接数据库,并编写数据访问层代码 业务逻辑层去调用数据访问层执行数据库操作 import MySQLdb def GetLi ...

  6. angular服务一

    angular服务 [$apply()] jquery内数据绑定 要用$apply(),不然不能在js内通过angular绑定数据 <!DOCTYPE html> <html lan ...

  7. ffmpeg获取文件的总时长(mp3/mp4/flv等)

    使用ffmpeg.exe获取文件属性信息,C#中可以在进程外异步调用这个工具,如下: using (System.Diagnostics.Process pro = new System.Diagno ...

  8. awk命令速查

    awk与sed.grep一样都是为了加工数据流而做成的文本加工过滤器命令.awk会事先把输入的数据根据字段单位进行分割.在没有制定分割单位的情况下,以输入数据中的空格或Tab为分隔符.与sed相比,它 ...

  9. php中trait(性状)与generator(生成器)

    PHP中trait(性状)与generator(生成器) 一.trait (性状) 最近在看Josh Lockhat的<Modern PHP>,这本书很薄.但是其中给出了一个很重要的学习方 ...

  10. 个人对B/S项目的一些理解(一)

    以下是我自工作以来,结合对C/S项目的认知,对B/S项目的一些理解. 如有不足或者错误,请各位指正.     B/S browser/server ----对于这两个软件的个人看法 本质上,也是两个软 ...