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

1.分析函数的参数

2.分析函数的变量声明

3.分析函数的函数声明表达式

具体步骤如下:

  • 函数在运行的瞬间,生成一个活动对象(Active Object),简称AO
  • 第一步:分析参数:
  1. 函数接收形式参数,添加到AO的属性,并且这个时候值为undefine,即AO.age=undefine
  2. 接收实参,添加到AO的属性,覆盖之前的undefine
  • 第二步:分析变量声明:如var age;或var age=18;
  1. 如果上一步分析参数中AO还没有age属性,则添加AO属性为undefine,即AO.age=undefine
  2. 如果AO上面已经有age属性了,则不作任何修改
  • 第三步:分析函数的声明:
  • 如果有function age(){}把函数赋给AO.age ,覆盖上一步分析的值

例1:

function func(age) {
console.log(age);
var age = 25;
console.log(age);
function age() {
}
console.log(age); }
func(18);

词法分析:

第一步,分析函数参数:

  形参:AO.age = undefined

  实参:AO.age = 18

第二步,分析局部变量:

  第3行代码有var age,但此时第一步中已有AO.age = 18,故不做任何改变

  即AO.age = 18

第三步,分析函数声明:

  第5行代码有函数age,则将function age(){}赋给AO.age,即AO.age = function age(){}

所以,执行代码时:

  第2行代码运行时拿到的age是词法分析后的AO.age,结果是:function age() {};

  第3行代码:25赋给age,此时age=25;

  第4行代码运行时age已被赋值为25,结果25;

  第5,6行代码是一个函数表达式,所以不会做任何操作;

  第7行代码运行时age仍然是25,结果也是25,运行结果如下

词法分析时应该注意var age = function age(){},这个语句,参与了第二步和第三步;

执行代码时应注意函数表达式不做任何操作,且只声明变量没赋值时,age仍然等于AO.age。

例2:

function func(age) {
var age;
console.log(age);
var age = 25;
console.log(age);
function age() {
}
console.log(age); }
func(18);

运行结果:

例3:

function func(age) {
var age;
console.log(age);
var age = 25;
console.log(age);
function age() {
console.log(age);
}
age();
console.log(age); }
func(18);

运行结果: 

例4:

function func(age) {
var age;
console.log(age);
function age() {
console.log(age);
}
age();
console.log(age); }
func(18);  

运行结果:

例5:

function func(age) {
console.log(age);
var age = function age() {
console.log(age);
};
age();
console.log(age);
}
func(18);

运行结果: 

 

小结:
函数在运行的瞬间,需经历两个步骤:词法分析和语句执行

词法分析:
1.形参和实参,实参会覆盖实参
2.分析变量声明,如var age = 18;会提取出age=undefined,但不会执行赋值语句
3.分析函数声明,如function age(){}等同于var age = function(){},但函数体不执行

语句执行:
1.console.log(age);
2.var age = 25;
3.function age(){console.log(age);}是不执行的,age()才执行

注意事项:
1.函数声明 function age(){console.log(age);} 整体会赋给 AO.age
2.var age = function age(){console.log(age);} 属于词法分析第二步变量声明

前端开发 - JavaScript 词法分析的更多相关文章

  1. 1+x 证书 Web 前端开发 JavaScript 专项练习

    官方QQ群 1+x 证书 Web 前端开发 JavaScript 专项练习 http://blog.zh66.club/index.php/archives/198/

  2. 第十一章 前端开发-JavaScript

    第十一章 前端开发-JavaScript 11.3.1 js引入方式 行内样式 <p id="" class="" style="" ...

  3. 前端开发 JavaScript 干货知识点汇总

    很多初学的朋友经常问我,前端JavaScript都需要学习哪些东西呀?哪些是JavaScript的重点知识啊? 其实做前端开发工程师,所有的知识点都是我们学习必备的东西,只有扎实的技术基础才是高薪的关 ...

  4. 前端开发 JavaScript 规范文档

    一,规范目的 为提高团队协作效率,便于前端后期优化维护,输出高质量的文档. 二.基本准则 符合web标准,结构表现行为分离,兼容性优良.页面性能方面,代码要求简洁明了有序, 尽可能的减小服务器负载,保 ...

  5. 15款不容错过的前端开发Javascript和css类库 - 2017版本~

    前端的JS和CSS类库日新月异, 在今天这篇介绍中,我们将精挑细选15款超棒的JS/CSS类库, 希望大家在开发过程中会觉得有帮助~ Core UI 基于Bootstrap4的一套UI类库, Core ...

  6. 前端开发 - JavaScript - 总结

    一.JavaScript的特征 javaScript是一种web前端的描述语言,也是一种基于对象(object)和事件驱动(Event Driven)的.安全性好的脚本语言.它运行在客户端从而减轻服务 ...

  7. 前端开发JavaScript入门——JavaScript介绍&基本数据类型

    JavaScript 诞生于1995年,它的出现主要是用于处理网页中的 前端验证. • 所谓的前端验证,就是指检查用户输入的内容是否符合一定的 规则. • 比如:用户名的长度,密码的长度,邮箱的格式等 ...

  8. Web前端开发JavaScript基础

    JavaScript 一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型,它的解释器被称为JavaScript引擎,是浏览器的一部分,并且是被广泛用于客户端的脚本语言,JavaS ...

  9. 前端开发JavaScript清除浏览器缓存的方法

    查看和删除浏览器缓存的方法=====>打开 最近在开发项目中发现有时候总要频繁地清除浏览器缓存,不然总是显示的过时的信息 浏览器缓存有利有弊,有些数据需要缓存下来使得页面打开更快提高网站性能,但 ...

随机推荐

  1. BZOJ1856或洛谷1641 [SCOI2010]生成字符串

    BZOJ原题链接 洛谷原题链接 可以将\(1\)和\(0\)的个数和看成是\(x\)轴坐标,个数差看成\(y\)轴坐标. 向右上角走,即\(x\)轴坐标\(+1\),\(y\)轴坐标\(+1\),表示 ...

  2. iOS push新的调用方法

    // IOS8 新系统需要使用新的代码if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 8.0){    [[UIAppl ...

  3. python爬虫 urllib库基本使用

    以下内容均为python3.6.*代码 学习爬虫,首先有学会使用urllib库,这个库可以方便的使我们解析网页的内容,本篇讲一下它的基本用法 解析网页 #导入urllib from urllib im ...

  4. robot framework测试驱动无法定位页面元素

    robot framework错误提示: [ WARN ] Keyword 'Capture Page Screenshot' could not be run on failure: NoSuchW ...

  5. [Robot Framework] Robot Framework用Execute Javascript对XPath表示的元素执行scrollIntoView操作

    有些元素需要通过滚动条滚动才能变得可见. 如果这些元素在DOM结构里面存在,可以通过scrollIntoView让其可见,但如果在DOM结构里面不存在那就要通过拖动滚动条让其变的可见. Execute ...

  6. Python之路(第十五篇)sys模块、json模块、pickle模块、shelve模块

    一.sys模块 1.sys.argv 命令行参数List,第一个元素是程序本身路径 2.sys.exit(n) 退出程序,正常退出时exit(0) 3.sys.version . sys.maxint ...

  7. xcode资源管理

    1. 在根目录放图片. UIImageView *image = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"ok.pn ...

  8. Vue学习笔记:基础

    Vue实例 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的 插值 数据绑定最常见的形式就是使用“Mustache”语法(双大括号)的文本插值 指令 指令的定义:Direct ...

  9. 【算法专题】工欲善其事必先利其器—— 常用函数和STL

    一.    常用函数 #include <stdio.h> int getchar( void );               //读取一个字符, 一般用来去掉无用字符 char *ge ...

  10. JS高级-String-正则表达式:

    1. String: 由多个字符组成的字符只读数组 vs 数组: 相同: 1. 下标, 2. .length, 3. 遍历, 4. .slice 不同: 类型不同!  API不通用 API: 所有字符 ...