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

词法分析

词法分析方法:

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的分析基本一样,结果也是一样:

总结

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏微信公众号:Java团长

2017年Java面试题整理

面试是我们每个人都要经历的事情,大部分人且不止一次,这里给大家总结最新的2017年面试题,让大家在找工作时候能够事半功倍。

732
来自专栏陈树义

注解的那些事儿(三)| 注解的使用

在上面的 SweetDemo 中会发现我们在使用 @Sweet 注解的时候,手动给 sweetLevel 属性赋值。如果没有赋值,那么会报错。

942
来自专栏上善若水

s002android逆向安全初级篇之android smali语法总结

smali中有两类数据类型:基本类型和引用类型。 引用类型是指数组和对象,其他都是基础类型。

1224
来自专栏LanceToBigData

JavaSE(十一)之异常处理详解

一、异常概述   在我们日常生活中,有时会出现各种各样的异常,例如:职工小王开车去上班,在正常情况下,小王会准时到达单位。但是天有不测风云,在小王去上班时,可能...

1779
来自专栏从零开始学 Web 前端

04 - JavaSE之异常处理

2.throw new someExpresion("错误原因"); 表示的是手动抛出异常。 **

1094
来自专栏谦谦君子修罗刀

静态内存区域解析

通常在代码中产生的bug,往往是源于概念不清晰。知己知彼百战不殆,对内存这块了如指掌,能极大优化代码的性能。 一、内存四区建立流程讲解 ? 如上图所示,首先操作...

2596
来自专栏数据库新发现

关于shared pool的深入探讨(一)

http://www.eygle.com/internal/shared_pool-1.htm

753
来自专栏Java技术栈

一张图搞清楚Java异常机制

下面是Java异常类的组织结构,红色区域的异常类表示是程序需要显示捕捉或者抛出的。 ? Throwable Throwable是Java异常的顶级类,所有的异常...

2765
来自专栏北京马哥教育

Python 错误和异常小结

引言 这不是一篇关于Python异常的全面介绍的文章,这只是在学习Python异常后的一篇笔记式的记录和小结性质的文章。 1.Python异常类 Python...

3835
来自专栏吴伟祥

switch接受的参数类型 原

switch接受的参数类型有10种,分别是基本类型的byte,short,int,char,以及引用类型的String(只有JavaSE 7 和以后的版本 可以...

1033

扫码关注云+社区