JavaScript:词法分析、连续赋值猜想

原创文章,转摘请注明出处:苏福:http://www.cnblogs.com/susufufu/p/5851642.html

深夜发文,先吐槽下博客园的编辑器,真不方便!我都是本地编辑好了在粘过来的,要是不用MarkDown写的话,那每次都得改改改啊!

先说下这个老话题:连续赋值
例1:

function a(){
    var o1 = o2 = 5;
}
a();
console.log(o1);
console.log(o2);

结果是什么?console.log(o1);这句简单undefined,而console.log(o2);这句呢?答案是5,o2变成了全局变量了
这是实际执行顺序:

var o1;
o2 = 5; //o2未使用var声明,所以变全局变量了
o1 = o2;

例2:

var foo = {n:1};
var bar = foo;
foo.x = foo = {n:2};
console.log(foo.x);
console.log(bar.x); 

很早以前的面试题目了,相信很多人知道答案,考点:词法分析、执行顺序、运算符优先级等
这是我理解的实际执行顺序:

var foo;
var bar;
foo = {n:1};
bar = foo; //bar = {n:1}
foo.x = undefined; //
foo.x = (foo = {n:2});
console.log(foo.x); //undefined
console.log(bar.x); //{ n: 2 }

我是这么猜想的:自我感觉勉强说的通,有不对的地方请指出!
JS引擎遇foo.x = foo = {n:2}; 词法分析为foo.x, =, foo, =, {n:2}
执行顺序:
1. 先为foo添加x属性,未赋值(undefined),这里的foo还是{n:1}
2. 遇到第一个'=',准备为x赋值
3. '='优先级最低,先计算右边表达式的值
4. 执行foo = {n:1},并将结果赋值给x
最终foo的引用指向了{n:2}
而bar的引用没变,始终指向原来的{n:1},而{n:1}被添加了x属性{n:2}变为{n:1,x:{n:2}},这就是最后bar引用的值

下面给大家介绍下JS的词法分析,参考自《javascript权威指南》《你不知道的javascript》

JavaScript代码自上而下执行,但是在js代码执行前,会首先进行词法分析,所以事实上,js运行要分为词法分析和执行两个阶段。

词法分析

词法分析主要分为3步:
第1步:分析形参
第2步:分析变量声明
第3步:分析函数声明
如果存在函数嵌套,则从外往内进行词法分析

具体步骤:

  1. 在函数执行的一瞬间,产生一个空的 Active Object(活动对象),下面简称AO
  2. AO对象初始化
    2.1 函数声明的形参,形成AO的属性,默认值是undefined,
    2.2 接收实参,给刚刚形成AO的属性的形参赋值
  3. var声明、函数声明均被提升到函数体顶部(若var声明、函数声明同名,则函数声明将覆盖变量声明),注意,var声明只提前了声明部分,而函数声明提前了整个函数定义。
  4. 分析var声明变量!如 var age;(变量的值是在运行时期决定)
    4.1 如果AO上没有age属性,则给AO添加age属性,默认值是undefined
    4.2 如果AO上有age属性,则不做任何操作。
  5. 分析函数声明!如 function foot(){}
    51 如果AO上没有foot属性,则把函数赋给AO.foot属性
    5.2 如果AO上有foot属性,则会直接覆盖,把函数赋给AO.foot属性(因为:若var声明、函数声明同名,则函数声明将覆盖变量声明)
  6. 依据此时AO的值,自上而下执行代码

代码演示与分析:

  function a(b){
       alert(b);
       function b(){
           alert(b);
       }
       b();
   }
   a(1);

这是个常见的面试题,如果不懂JavaScript的词法分析,根本看不懂,下面就按照JavaScript的词法步骤进行分析,前面说过JavaScript自上而下执行,但是先进行词法分析后执行代码

分析过程:

  1. 形成活动对象AO={}
  2. 分析形参,--> AO={b:undefined}; 分析传参,--> AO={b:1}
  3. 分析变量声明var,没有
  4. 分析函数声明,AO.b=function(){alert(b);},执行覆盖操作

执行过程:
alert(b);//function
b(); // 执行function b...alert(b),在函数b的作用域内部找不到b,根据作用域链原理往外层寻找,找到b就是函数自己,打印出function ...

深入JavaScript:词法分析、连续赋值猜想的更多相关文章

  1. javascript --- 词法分析

    JavaScript代码自上而下执行,但是在js代码执行前,会首先进行词法分析,所以事实上,js运行要分为词法分析和执行两个阶段. 词法分析主要分为三步: 第一步: 分析形参: 第二步: 分析变量声明 ...

  2. 浅谈JavaScript词法分析步骤

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

  3. Javascript词法分析

    词法分析的过程: 先分析参数 分析变量声明 分析函数声明 具体步骤: 在函数运行前的一瞬间,先生成Active Object活动对象; 函数声明的参数,形成AO的属性,值为undefined 接收参数 ...

  4. JavaScript的连续赋值的思考

    下面是一个连续赋值的例子: 在这里面,先创建a对象并添加n:1,然后将a对象赋值给b,这时候a和b引用同一个对象.最后我们要着重理解这最后一行代码 a.x = a = {n:2}; 按照我们平常的思维 ...

  5. (转)深入理解javascript连续赋值表达式

    引入 今天逛园子的时候看到一道javascript面试题,是关于连续赋值的,正好最近读jQuery源码经常看到这种连续赋值的表达式,所以很感兴趣. 废话不多说,来看题: var a = {n: 1} ...

  6. javascript --- 再谈词法分析

    javascript代码是如何执行的呢,分为六个步骤(就像把大象装进冰箱总共分几步?): 第一步:载入第一个js代码段(注:script标签对内的代码或是引用js代码,这也说明js并不是一行一行(单纯 ...

  7. Javascript 笔记与总结(1-2)词法分析

    词法分析,按顺序分析 3 样: 第 1 步:先分析参数 第 2 步:再分析变量声明 第 3 步:再分析函数声明 一个函数能使用的局部变量,就从上面 3 步分析而来. 具体步骤: 0:函数运行前的瞬间, ...

  8. python成长之路【第十六篇】:JavaScript的高级知识---词法分析

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

  9. javascript的词法分析

    -.arguments的解释: 1.是一个对象,是一个长的很像数组的对象 二.arguments内容是什么? 1.arguments是函数运行时的实参列表 2.arguments收集的“所有”的实参, ...

随机推荐

  1. LINUX 编译安装 PHP 环境

    今天终于有时间 总结一下 linux 的编译安装 php 环境同学给我发了他写的文档 ,基本就可以实现编译安装了我同学文章地址: http://penghui.link/articles/2016/0 ...

  2. JavaWeb学习总结-06 Listener 学习和使用

    一 Listener 当Web应用在Web容器中运行时,Web应用内部会不断地发生各种事件:如Web应用被启动.Web应用被停止.用户session开始.用户session结束.用户请求到达等,可以用 ...

  3. 使用aspose.cell导出excel需要注意什么?

    1.如果导出的数据源是汇总出来的,最好方法是将数据源放到缓存里面,当基本数据源变化的时候,在改变数据2.使用模板导出EXCEL,这样很多样式可以在模板文件里面直接设置,例如:默认打开页签,让列头固定3 ...

  4. 【转】启动 Eclipse 弹出“Failed to load the JNI shared library jvm.dll”错误的解决方法! .

    转载地址:http://blog.csdn.net/zyz511919766/article/details/7442633 原因1:给定目录下jvm.dll不存在. 对策:(1)重新安装jre或者j ...

  5. oracle之to_char,to_date用法

    [转载自]http://www.jb51.net/article/45591.htm 这篇文章主要介绍了oracle中to_date详细用法示例,包括期和字符转换函数用法.字符串和时间互转.求某天是星 ...

  6. hadoop2.5.1搭建(一)

    1.1配置 1.1.1修改hosts vi /etc/hosts 192.168.220.64 cluster4 192.168.220.63 cluster3 1.2安装jdk rpm安装 rpm ...

  7. cf 403 D

    D. Beautiful Pairs of Numbers time limit per test 3 seconds memory limit per test 256 megabytes inpu ...

  8. HDU 2040 亲和数 [补] 分类: ACM 2015-06-25 23:10 10人阅读 评论(0) 收藏

    今天和昨天都没有做题,昨天是因为复习太累后面忘了,今天也是上午考毛概,下午又忙着复习计算机图形学,晚上也是忘了结果打了暗黑3,把暗黑3 打通关了,以后都不会玩太多游戏了,争取明天做3题把题目补上,拖越 ...

  9. C# RSA和Java RSA互通

    今天调查了C# RSA和Java RSA,网上很多人说,C#加密或者java加密 ,Java不能解密或者C#不能解密 但是我尝试了一下,发现是可以的,下面就是我尝试的代码,如果您有什么问题,我想看看, ...

  10. 开源YYKit-b

    转自 ibireme的博客,大家可以去他博客看看,有很多开发过程的一些调研和评测. YYModel 类似 Mantle/JSONModel 的工具,性能比 Mantle 高一个数量级,有更好的容错性, ...