深入JavaScript:词法分析、连续赋值猜想
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步:分析函数声明
如果存在函数嵌套,则从外往内进行词法分析
具体步骤:
- 在函数执行的一瞬间,产生一个空的 Active Object(活动对象),下面简称AO
- AO对象初始化
2.1 函数声明的形参,形成AO的属性,默认值是undefined,
2.2 接收实参,给刚刚形成AO的属性的形参赋值 - var声明、函数声明均被提升到函数体顶部(若var声明、函数声明同名,则函数声明将覆盖变量声明),注意,var声明只提前了声明部分,而函数声明提前了整个函数定义。
- 分析var声明变量!如 var age;(变量的值是在运行时期决定)
4.1 如果AO上没有age属性,则给AO添加age属性,默认值是undefined
4.2 如果AO上有age属性,则不做任何操作。 - 分析函数声明!如 function foot(){}
51 如果AO上没有foot属性,则把函数赋给AO.foot属性
5.2 如果AO上有foot属性,则会直接覆盖,把函数赋给AO.foot属性(因为:若var声明、函数声明同名,则函数声明将覆盖变量声明) - 依据此时AO的值,自上而下执行代码
代码演示与分析:
function a(b){
alert(b);
function b(){
alert(b);
}
b();
}
a(1);
这是个常见的面试题,如果不懂JavaScript的词法分析,根本看不懂,下面就按照JavaScript的词法步骤进行分析,前面说过JavaScript自上而下执行,但是先进行词法分析后执行代码
分析过程:
- 形成活动对象AO={}
- 分析形参,--> AO={b:undefined}; 分析传参,--> AO={b:1}
- 分析变量声明var,没有
- 分析函数声明,AO.b=function(){alert(b);},执行覆盖操作
执行过程:
alert(b);//function
b(); // 执行function b...alert(b),在函数b的作用域内部找不到b,根据作用域链原理往外层寻找,找到b就是函数自己,打印出function ...
深入JavaScript:词法分析、连续赋值猜想的更多相关文章
- javascript --- 词法分析
JavaScript代码自上而下执行,但是在js代码执行前,会首先进行词法分析,所以事实上,js运行要分为词法分析和执行两个阶段. 词法分析主要分为三步: 第一步: 分析形参: 第二步: 分析变量声明 ...
- 浅谈JavaScript词法分析步骤
JavaScript代码运行前有一个类似编译的过程即词法分析,词法分析主要有三个步骤: 分析参数 再分析变量的声明 分析函数声明 具体步骤如下: 函数在运行的瞬间,生成一个活动对象(Active Ob ...
- 前端开发 - JavaScript 词法分析
JavaScript代码运行前有一个类似编译的过程即词法分析,词法分析主要有三个步骤: 1.分析函数的参数 2.分析函数的变量声明 3.分析函数的函数声明表达式 具体步骤如下: 函数在运行的瞬间,生成 ...
- JavaScript词法分析(尽力理解)
JavaScript中在调用函数的那一瞬间之前,会先进行词法分析 词法分析的过程: 当函数调用的前一瞬间,会先形成一个激活对象:Avtive Object(AO),并会分析以下3个方面: 1:函数参数 ...
- Javascript词法分析
词法分析的过程: 先分析参数 分析变量声明 分析函数声明 具体步骤: 在函数运行前的一瞬间,先生成Active Object活动对象; 函数声明的参数,形成AO的属性,值为undefined 接收参数 ...
- JavaScript的连续赋值的思考
下面是一个连续赋值的例子: 在这里面,先创建a对象并添加n:1,然后将a对象赋值给b,这时候a和b引用同一个对象.最后我们要着重理解这最后一行代码 a.x = a = {n:2}; 按照我们平常的思维 ...
- JavaScript词法分析解析
函数在调用之前,会进行词法分析或者叫语法分析: 1. 函数在形成调用的那一瞬间,会有一个活动对象叫 active object ,简称AO,会分析如下几条: 形式参数 函数内局部变量声明 函数声明表达 ...
- 理解javascript中的连续赋值
之前在扒源码时经常看到类似的连续赋值操作: var a = b = 1; 在某度搜了众多前辈的博客,总算对这骚操作有点眉目. Case analysis 首先,javascript中连续赋值最典型 ...
- 前端——JavaScript
何谓JavaScript?它与Java有什么关系? JavaScript与HTML.CSS组合使用应用于前端开发,JavaScript是一门独立的语言,浏览器内置了JS的解释器.它除了和Java名字长 ...
随机推荐
- IOS 开发中 Whose view is not in the window hierarchy 错误的解决办法
在 IOS 开发当中经常碰到 whose view is not in the window hierarchy 的错误,该错误简单的说,是由于 "ViewController" ...
- Mac SVN 设置代理(Proxy)并 Checkout 代码
1. 设置代理 Finder 菜单里面 -> 前往 -> 前往文件夹 -> /Users/username/.subversion -> 编辑文件 servers 在文件的 [ ...
- Entity Framework 6 Code First新特性:支持存储过程
Entity Framework 6提供支持存储过程的新特性,本文具体演示Entity Framework 6 Code First的存储过程操作. Code First的插入/修改/删除存储过程 默 ...
- JSDeferred 源码分析
不经意看到了一个构思非常惊人的异步流程控制库,发出来分享下 http://cho45.stfuawsc.com/jsdeferred/ 关于CommonJS Promises请看另一个异步库 http ...
- 【转】WPF 给DataGridTextColumn统一加上ToolTip
源地址:http://dongguojun.iteye.com/blog/1671963 我发现WPF中DataGridTextColumn直接设置它的ToolTipService.Tooltip并不 ...
- 浏览器内核、渲染引擎、js引擎
[1]定义 浏览器内核分成两部分渲染引擎和js引擎,由于js引擎越来越独立,内核就倾向于只指渲染引擎 渲染引擎是一种对HTML文档进行解析并将其显示在页面上的工具 [2]常见引擎 渲染引擎: fire ...
- 基于X86平台的PC机通过网络发送一个int(32位)整数的字节顺序
1.字节顺序 字节顺序是指占内存多于一个字节类型的数据在内存中的存放顺序,通常有小端.大端两种字节顺序.小端字节序指低字节数据存放在内存低地址处,高字节数据存放在内存高地址处:大端字节序是高字节数据存 ...
- C#:根据银行卡卡号判断银行名称
原文地址:android 根据银行卡卡号判断银行 原文是 java ,现在将它翻译成 C# ,并对代码重新编排整理,博主是一个今年刚出来的应届毕业生,不足之处请多多包涵. 根据银行卡号判断所属银行,依 ...
- iOS开发之窥探UICollectionViewController(四) --一款功能强大的自定义瀑布流
在上一篇博客中<iOS开发之窥探UICollectionViewController(三) --使用UICollectionView自定义瀑布流>,自定义瀑布流的列数,Cell的外边距,C ...
- EntityFramework 7 smallint short 奇怪问题(已解决)
在使用 EF7 进行条件查询的时候,遇到一个很奇怪的问题,不知道 EF 其他版本有没有这种情况,怎么说呢?一句话描述不清楚,具体请看下面内容. 问题场景 BloggingContext 配置代码: u ...