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

  • 分析参数
  • 再分析变量的声明
  • 分析函数声明

具体步骤如下:

  • 函数在运行的瞬间,生成一个活动对象(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 ,覆盖上一步分析的值

看一段代码练练手:

 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。看看浏览器执行的结果,bingo~~

词法分析时应该注意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);

答案:

浅谈JavaScript词法分析步骤的更多相关文章

  1. 浅谈javascript函数节流

    浅谈javascript函数节流 什么是函数节流? 函数节流简单的来说就是不想让该函数在很短的时间内连续被调用,比如我们最常见的是窗口缩放的时候,经常会执行一些其他的操作函数,比如发一个ajax请求等 ...

  2. 浅谈JavaScript中的闭包

    浅谈JavaScript中的闭包 在JavaScript中,闭包是指这样一个函数:它有权访问另一个函数作用域中的变量. 创建一个闭包的常用的方式:在一个函数内部创建另一个函数. 比如: functio ...

  3. 浅谈JavaScript浮点数及其运算

    原文:浅谈JavaScript浮点数及其运算     JavaScript 只有一种数字类型 Number,而且在Javascript中所有的数字都是以IEEE-754标准格式表示的.浮点数的精度问题 ...

  4. 浅谈 JavaScript 编程语言的编码规范

    对于熟悉 C/C++ 或 Java 语言的工程师来说,JavaScript 显得灵活,简单易懂,对代码的格式的要求也相对松散.很容易学习,并运用到自己的代码中.也正因为这样,JavaScript 的编 ...

  5. 浅谈javascript的原型及原型链

    浅谈javascript的原型及原型链 这里,我们列出原型的几个概念,如下: prototype属性 [[prototype]] __proto__ prototype属性 只要创建了一个函数,就会为 ...

  6. 浅谈JavaScript中的null和undefined

    浅谈JavaScript中的null和undefined null null是JavaScript中的关键字,表示一个特殊值,常用来描述"空值". 对null进行typeof类型运 ...

  7. 浅谈JavaScript中的正则表达式(适用初学者观看)

    浅谈JavaScript中的正则表达式 1.什么是正则表达式(RegExp)? 官方定义: 正则表达式是一种特殊的字符串模式,用于匹配一组字符串,就好比用模具做产品,而正则就是这个模具,定义一种规则去 ...

  8. [转载]浅谈JavaScript函数重载

     原文地址:浅谈JavaScript函数重载 作者:ChessZhang 上个星期四下午,接到了网易的视频面试(前端实习生第二轮技术面试).面了一个多小时,自我感觉面试得很糟糕的,因为问到的很多问题都 ...

  9. 浅谈JavaScript的面向对象和它的封装、继承、多态

    写在前面 既然是浅谈,就不会从原理上深度分析,只是帮助我们更好地理解... 面向对象与面向过程 面向对象和面向过程是两种不同的编程思想,刚开始接触编程的时候,我们大都是从面向过程起步的,毕竟像我一样, ...

随机推荐

  1. centos6.5安装tomcat8.0.15

    首先需要在http://tomcat.apache.org/download-80.cgi下载最新安装包 安装tomcat 将apache-tomcat-8.0.15.tar.gz文件上传到/usr/ ...

  2. [React] React Fundamentals: Component Lifecycle - Mounting Basics

    React components have a lifecycle, and you are able to access specific phases of that lifecycle. Thi ...

  3. Android中滑屏实现----手把手教你如何实现触摸滑屏以及Scroller类详解

    前言:  虽然本文标题的有点标题党的感觉,但无论如何,通过这篇文章的学习以及你自己的实践认知,写个简单的滑屏小 Demo还是just so so的. 友情提示: 在继续往下面读之前,希望您对以下知识点 ...

  4. vim中的一些高级命令的使用

    现在一般在windows下面对txt文档操作的时候,我一般使用gvim软件来操作,虽然没有unix/linu下面的正宗,并且很多命令没有,但是还是有很多方便之处的 下面是重温vim命令时,我我自己以前 ...

  5. qt 共享内存(QSharedMemory)

    ——————————————————写入部分—————————————————— (本次程序基于控制台程序) 首先 使用共享内存得召唤一下: #include <QSharedMemory> ...

  6. Windows8下如何使用命令行--转载

    原文地址:http://jingyan.baidu.com/article/a501d80ce26fecec630f5ee0.html 命令行可用于实现一些没有图形界面的操作,然而windows8下的 ...

  7. 关于Xcode7中的tbd文件

    tbd 是 text-based stub libraries的意思, 是苹果在Xcode7中使用的一个技术,便于减少Xcode7中SDK的体积. 下面讲解下Xcode7如何通过tbd这个技术减少SD ...

  8. 无法从“object”转换为“string”

    就我在项目中遇到的问题,和大家分享一下“无法从“object”转换为“string” 在把我出错的代码复制上来,  Guid userid = new Guid(Membership.GetUser( ...

  9. iOS之定位与地图

    概览 现在很多社交.电商.团购应用都引入了地图和定位功能,似乎地图功能不再是地图应用 和导航应用所特有的.的确,有了地图和定位功能确实让我们的生活更加丰富多彩,极大的改变了我们的生活方式.例如你到了一 ...

  10. 移动终端学习一:css3 Media Queries简介

    移动终端学习之一 css3 Media Queries简介 1.简介 别人写过的我就不重复了,来个链接:http://www.w3cplus.com/content/css3-media-querie ...