写了10年的Javascript也未必全了解的连续赋值运算


Posted in Javascript onMarch 25, 2011

一、引子

var a = {n:1}; 
a.x = a = {n:2}; 
alert(a.x); // --> undefined

这是蔡蔡在看 jQuery源码 时发现这种写法的。以上第二句 a.x = a = {n:2} 是一个连续赋值表达式。这个连续赋值表达式在引擎内部究竟发生了什么?是如何解释的?

二、猜想

猜想1:从左到右赋值,a.x 先赋值为{n:2},但随后 a 赋值为 {n:2},即 a 被重写了,值为 {n:2},新的 a 没有 x属性,因此为undefined。步骤如下
1, a.x = {n:2};
2, a = {n:2};
这种解释得出的结果与实际运行结果一致,貌似是对的。注意猜想1中 a.x 被赋值过。
猜想2:从右到左赋值,a 先赋值为{n:2},a.x 发现 a 被重写后(之前a是{a:1}),a.x = {n:2} 引擎限制a.x赋值,忽略了。步骤如下:
1, a = {n:2};
2, a.x 未被赋值{n:2}
等价于 a.x = (a = {n:2}),即执行了第一步,这样也能解释a.x为undefined了。注意猜想2中a.x压根没被赋值过。

三、证明

上面两种猜想相信多数人都有,群里讨论呆呆认为是猜想1, 我认为是猜想2。其实都错了。我忽略了引用的关系。如下,加一个变量b,指向a。

var a = {n:1}; 
var b = a; // 暂存a 
a.x = a = {n:2}; 
alert(a.x);// --> undefined 
alert(b.x);// --> [object Object]

发现a.x仍然是undefined,神奇的是 b.x 并未被赋值过(比如:b.x={n:2}),却变成了[object Object]。b 是指向 a({n:1})的,只有a.x = {n:2}执行了才说明b是有x属性的。实际执行过程:从右到左,a 先被赋值为{n:2},随后a.x被赋值{n:2}。
1, a = {n:2};
2, a.x = {n:2};
等价于
a.x = (a = {n:2});
与猜想2的区别在于a.x 被赋值了,猜想2中并未赋值。最重要的区别,第一步 a = {n:2} 的 a 指向的是新的对象{n:2} , 第二步 a.x = {n:2} 中的 a 是 {a:1}。即在这个连等语句
a.x = a = {n:2};

a.x 中的a指向的是 {n:1},a 指向的是 {n:2}。如下图

写了10年的Javascript也未必全了解的连续赋值运算
四:解惑

这篇写完,或许部分人看完还是晕晕的。因为里面的文字描述实在是绕口。最初我在理解这个连等赋值语句时

var a = {n:1}; 
a.x = a = {n:2};

认为引擎会限制a.x的重写(a被重写后),实际却不是这样的。指向的对象已经不同了。引擎也没有限制a.x={n:2}的重写。
谢谢所有参与讨论的人:蔡蔡、呆呆、儒儒。这个问题最早是蔡蔡提出的。儒儒在 菜鸟灰呀灰 群里每次的讨论都那么投入,认真,哪怕是别人提出的话题。

五:结束

呵,以另一个连续赋值题结束。fun执行后,这里的 变量 b 溢出到fun外成为了全局变量。想到了吗?

function fun(){ 
var a = b = 5; 
} 
fun(); 
alert(typeof a); // --> undefined 
alert(typeof b); // --> number
Javascript 相关文章推荐
基于jQuery的history历史记录插件
Dec 11 Javascript
js iframe跨域访问(同主域/非同主域)分别深入介绍
Jan 24 Javascript
JavaScript实现网页图片等比例缩放实现代码及调用方式
Feb 25 Javascript
文本框只能选择数据到文本框禁止手动输入
Nov 22 Javascript
从QQ网站中提取的纯JS省市区三级联动菜单
Dec 25 Javascript
深入学习JavaScript中的原型prototype
Aug 13 Javascript
Node.js+Express配置入门教程详解
May 19 Javascript
Angular学习笔记之angular的$filter服务浅析
Nov 12 Javascript
基于require.js的使用(实例讲解)
Sep 07 Javascript
详解微信小程序文件下载--视频和图片
Apr 24 Javascript
JavaScript构造函数原理及实现流程解析
Nov 19 Javascript
react合成事件与原生事件的相关理解
May 13 Javascript
js 实现图片预加载(js操作 Image对象属性complete ,事件onload 异步加载图片)
Mar 25 #Javascript
基于jquery的3d效果实现代码
Mar 23 #Javascript
jquery 操作表格实现代码(多种操作打包)
Mar 20 #Javascript
jQuery实现的Email中的收件人效果(按del键删除)
Mar 20 #Javascript
jquery图片上下tab切换效果
Mar 18 #Javascript
javascript一些实用技巧小结
Mar 18 #Javascript
jquery获取下拉列表的值为null的解决方法
Mar 18 #Javascript
You might like
php 删除目录下N分钟前创建的所有文件的实现代码
2013/08/10 PHP
php读取富文本的时p标签会出现红线是怎么回事
2014/05/13 PHP
php多文件打包下载的实例代码
2017/07/12 PHP
firefox下frameset取不到值的解决方法
2010/09/06 Javascript
ajax更新数据后,jquery、jq失效问题
2011/03/16 Javascript
了解一点js的Eval函数
2012/07/26 Javascript
jQuery中:submit选择器用法实例
2015/01/03 Javascript
jQuery实现友好的轮播图片特效
2015/01/12 Javascript
jquery中trigger()无法触发hover事件的解决方法
2015/05/07 Javascript
js实现YouKu的漂亮搜索框效果
2015/08/19 Javascript
Javascript中函数名.length属性用法分析(对比arguments.length)
2016/09/16 Javascript
Javascript动画效果(2)
2016/10/11 Javascript
JS中使用gulp实现压缩文件及浏览器热加载功能
2017/07/12 Javascript
微信小程序实现点击返回顶层的方法
2017/07/12 Javascript
Vue2.0 实现移动端图片上传功能
2018/05/30 Javascript
微信小程序中使用ECharts 异步加载数据实现图表功能
2018/07/13 Javascript
javascript二维数组和对象的深拷贝与浅拷贝实例分析
2019/10/26 Javascript
Django自定义插件实现网站登录验证码功能
2017/04/19 Python
python中lambda()的用法
2017/11/16 Python
利用Opencv中Houghline方法实现直线检测
2018/02/11 Python
浅谈Python中的zip()与*zip()函数详解
2018/02/24 Python
原生python实现knn分类算法
2019/10/24 Python
flask框架蓝图和子域名配置详解
2020/01/25 Python
Python使用内置函数setattr设置对象的属性值
2020/10/16 Python
如何开发一款堪比APP的微信小程序(腾讯内部团队分享)
2016/12/22 HTML / CSS
Html5自定义字体解决方法
2019/10/09 HTML / CSS
匈牙利墨盒和碳粉购买网站:CDRmarket
2018/04/14 全球购物
俄罗斯第一家篮球店:StreetBall
2020/07/30 全球购物
团队精神演讲稿
2013/12/31 职场文书
软件部经理岗位职责范本
2014/02/25 职场文书
小学班级口号
2014/06/09 职场文书
铣床操作工岗位职责
2014/06/13 职场文书
工作简历自我评价
2015/03/11 职场文书
演讲开场白台词大全
2015/05/29 职场文书
解决pycharm下载库时出现Failed to install package的问题
2021/09/04 Python
MySQL中int (10) 和 int (11) 的区别
2022/01/22 MySQL