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 词法分析

    JavaScript代码运行前有一个类似编译的过程即词法分析,词法分析主要有三个步骤: 1.分析函数的参数 2.分析函数的变量声明 3.分析函数的函数声明表达式 具体步骤如下: 函数在运行的瞬间,生成 ...

  4. JavaScript词法分析(尽力理解)

    JavaScript中在调用函数的那一瞬间之前,会先进行词法分析 词法分析的过程: 当函数调用的前一瞬间,会先形成一个激活对象:Avtive Object(AO),并会分析以下3个方面: 1:函数参数 ...

  5. Javascript词法分析

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

  6. JavaScript的连续赋值的思考

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

  7. JavaScript词法分析解析

    函数在调用之前,会进行词法分析或者叫语法分析: 1. 函数在形成调用的那一瞬间,会有一个活动对象叫 active object ,简称AO,会分析如下几条: 形式参数 函数内局部变量声明 函数声明表达 ...

  8. 理解javascript中的连续赋值

    之前在扒源码时经常看到类似的连续赋值操作:  var a = b = 1;  在某度搜了众多前辈的博客,总算对这骚操作有点眉目. Case analysis 首先,javascript中连续赋值最典型 ...

  9. 前端——JavaScript

    何谓JavaScript?它与Java有什么关系? JavaScript与HTML.CSS组合使用应用于前端开发,JavaScript是一门独立的语言,浏览器内置了JS的解释器.它除了和Java名字长 ...

随机推荐

  1. IOS 开发中 Whose view is not in the window hierarchy 错误的解决办法

    在 IOS 开发当中经常碰到 whose view is not in the window hierarchy 的错误,该错误简单的说,是由于 "ViewController" ...

  2. Mac SVN 设置代理(Proxy)并 Checkout 代码

    1. 设置代理 Finder 菜单里面 -> 前往 -> 前往文件夹 -> /Users/username/.subversion -> 编辑文件 servers 在文件的 [ ...

  3. Entity Framework 6 Code First新特性:支持存储过程

    Entity Framework 6提供支持存储过程的新特性,本文具体演示Entity Framework 6 Code First的存储过程操作. Code First的插入/修改/删除存储过程 默 ...

  4. JSDeferred 源码分析

    不经意看到了一个构思非常惊人的异步流程控制库,发出来分享下 http://cho45.stfuawsc.com/jsdeferred/ 关于CommonJS Promises请看另一个异步库 http ...

  5. 【转】WPF 给DataGridTextColumn统一加上ToolTip

    源地址:http://dongguojun.iteye.com/blog/1671963 我发现WPF中DataGridTextColumn直接设置它的ToolTipService.Tooltip并不 ...

  6. 浏览器内核、渲染引擎、js引擎

    [1]定义 浏览器内核分成两部分渲染引擎和js引擎,由于js引擎越来越独立,内核就倾向于只指渲染引擎 渲染引擎是一种对HTML文档进行解析并将其显示在页面上的工具 [2]常见引擎 渲染引擎: fire ...

  7. 基于X86平台的PC机通过网络发送一个int(32位)整数的字节顺序

    1.字节顺序 字节顺序是指占内存多于一个字节类型的数据在内存中的存放顺序,通常有小端.大端两种字节顺序.小端字节序指低字节数据存放在内存低地址处,高字节数据存放在内存高地址处:大端字节序是高字节数据存 ...

  8. C#:根据银行卡卡号判断银行名称

    原文地址:android 根据银行卡卡号判断银行 原文是 java ,现在将它翻译成 C# ,并对代码重新编排整理,博主是一个今年刚出来的应届毕业生,不足之处请多多包涵. 根据银行卡号判断所属银行,依 ...

  9. iOS开发之窥探UICollectionViewController(四) --一款功能强大的自定义瀑布流

    在上一篇博客中<iOS开发之窥探UICollectionViewController(三) --使用UICollectionView自定义瀑布流>,自定义瀑布流的列数,Cell的外边距,C ...

  10. EntityFramework 7 smallint short 奇怪问题(已解决)

    在使用 EF7 进行条件查询的时候,遇到一个很奇怪的问题,不知道 EF 其他版本有没有这种情况,怎么说呢?一句话描述不清楚,具体请看下面内容. 问题场景 BloggingContext 配置代码: u ...