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. 如何用Java进行3DES加密解

    原文地址: http://weavesky.com/2008/01/05/java-3des/ 最近一个合作商提出使用3DES交换数据,本来他们有现成的代码,可惜只有.net版本,我们的服务器都是Li ...

  2. [置顶] linux 解压版安装

    1:下载mysql解压版包去官网下载www.mysq.com 下载.下载linux通用版本就好了 2.基本配置 首先,我们准备好Linux环境,我们使用CentOS 5.8进行试验安装.第一步,我们需 ...

  3. [React] React Fundamentals: Owner Ownee Relationship

    The owner-ownee relationship is used to designate a parent-child relationship with React components ...

  4. 通用块层、IO调度层以及设备驱动层的数据结构

    http://blog.chinaunix.net/uid-28897358-id-3775640.html

  5. UIStackView 看我就够了

    介绍 UIStackView 是 iOS9新增的一个布局技术.熟练掌握相当节省布局时间. UIStackView 是 UIView 的子类,是用来约束子控件的一个控件.但他的作用仅限于此,他不能用来呈 ...

  6. Android(java)学习笔记150:为什么局部内部类只能访问外部类中的 final型的常量

    为什么匿名内部类参数必须为final类型: 1)  从程序设计语言的理论上:局部内部类(即:定义在方法中的内部类),由于本身就是在方法内部(可出现在形式参数定义处或者方法体处),因而访问方法中的局部变 ...

  7. bootstrap系列整理

    去年的九月份做第一版文档站时, 就开始尝试使用bootstrap ,由于当时对node 还一知半解,大部分精力放在nodejs上,bootstrap只是拿来就用,起步文档都没看: 当别人提到 Norm ...

  8. Android应用程序所包含的四种组件和DDMS

    关注用户组件         Activity                               编辑文本 .玩游戏 后台进程               Service           ...

  9. Android_Component_example

    xml布局: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:t ...

  10. 页面常见效果js实现

    2015.12.2 页面常见效果js实现 [有没有觉得很坑,[笑哭,邮箱写上]] 复习: Js内置对象: 1.浏览器对象 window document history location event  ...