写了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 相关文章推荐
对YUI扩展的Gird组件 Part-1
Mar 10 Javascript
JS 文件传参及处理技巧分析
May 13 Javascript
jquery 插件开发备注
Aug 27 Javascript
js弹出模式对话框,并接收回传值的方法
Mar 12 Javascript
js判断输入是否为数字的具体实例
Aug 03 Javascript
实例分析js和C#中使用正则表达式匹配a标签
Nov 26 Javascript
JS字符串的切分用法实例
Feb 22 Javascript
详解基于javascript实现的苹果系统底部菜单
Dec 02 Javascript
JS作用域深度解析
Dec 29 Javascript
微信小程序通过保存图片分享到朋友圈功能
May 24 Javascript
vue debug 二种方法
Sep 16 Javascript
JavaScript实现简单日历效果
Sep 11 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
MySQL中create table语句的基本语法是
2007/01/15 PHP
解决phpmyadmin中文乱码问题。。。
2007/01/18 PHP
php ignore_user_abort与register_shutdown_function 使用方法
2009/06/14 PHP
dvwa+xampp搭建显示乱码的问题及解决方案
2015/08/23 PHP
php从数据库中读取特定的行(实例)
2017/06/02 PHP
jQuery chili图片远处放大插件
2009/11/30 Javascript
web前端开发也需要日志
2010/12/09 Javascript
js修改table中Td的值(定义td的单击事件)
2013/01/10 Javascript
JavaScript 创建运动框架的实现代码
2013/05/08 Javascript
JavaScript用select实现日期控件
2015/07/17 Javascript
NodeJS使用formidable实现文件上传
2016/10/27 NodeJs
vue+socket.io+express+mongodb 实现简易多房间在线群聊示例
2017/10/21 Javascript
js中事件对象和事件委托的介绍
2019/01/21 Javascript
vue中动态select的使用方法示例
2019/10/28 Javascript
Vue+Element实现网页版个人简历系统(推荐)
2019/12/31 Javascript
js实现抽奖的两种方法
2020/03/19 Javascript
js实现小时钟效果
2020/03/25 Javascript
编写自定义的Django模板加载器的简单示例
2015/07/21 Python
用python实现简单EXCEL数据统计的实例
2017/01/24 Python
Python对接六大主流数据库(只需三步)
2019/07/31 Python
Python 实用技巧之利用Shell通配符做字符串匹配
2019/08/23 Python
python实现ssh及sftp功能(实例代码)
2020/03/16 Python
python中for in的用法详解
2020/04/17 Python
python算的上脚本语言吗
2020/06/22 Python
django美化后台django-suit的安装配置操作
2020/07/12 Python
scrapy结合selenium解析动态页面的实现
2020/09/28 Python
python实现逻辑回归的示例
2020/10/09 Python
Expedia意大利旅游网站:酒店、机票和租车预订
2017/10/30 全球购物
在对linux系统分区进行格式化时需要对磁盘簇(或i节点密度)的大小进行选择,请说明选择的原则
2012/11/24 面试题
幼儿园教师节活动方案
2014/02/02 职场文书
员工安全生产责任书
2014/07/22 职场文书
财务工作检讨书
2014/10/29 职场文书
2014年学生工作总结
2014/11/20 职场文书
python cv2图像质量压缩的算法示例
2021/06/04 Python
Python实现信息轰炸工具(再也不怕说不过别人了)
2021/06/11 Python
python开发飞机大战游戏
2021/07/15 Python