写了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 相关文章推荐
Extjs学习笔记之九 数据模型(上)
Jan 11 Javascript
javascript中数组和字符串的方法对比
Jul 20 Javascript
jQuery鼠标事件总结
Oct 13 Javascript
Bootstrap在线电子商务网站实战项目5
Oct 14 Javascript
JS检测数组类型的方法小结
Mar 14 Javascript
JavaScript数据结构之数组的表示方法示例
Apr 12 Javascript
vue多种弹框的弹出形式的示例代码
Sep 18 Javascript
js定时器实现倒计时效果
Nov 05 Javascript
Vuex 入门教程
Jan 10 Javascript
JavaScript数组方法的错误使用例子
Sep 13 Javascript
JavaScript碎片—函数闭包(模拟面向对象)
Mar 13 Javascript
解决vue更新路由router-view复用组件内容不刷新的问题
Nov 04 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 读取和修改大文件的某行内容的代码
2009/10/30 PHP
CI框架常用方法小结
2016/05/17 PHP
Yii视图操作之自定义分页实现方法
2016/07/14 PHP
简单解决微信文章图片防盗链问题
2016/12/17 PHP
PHP实现RSA签名生成订单功能【支付宝示例】
2017/06/06 PHP
PHP空值检测函数与方法汇总
2017/11/19 PHP
redis+php实现微博(一)注册与登录功能详解
2019/09/23 PHP
解决php扩展安装不生效问题
2019/10/25 PHP
利用JS进行图片的切换即特效展示图片
2013/12/03 Javascript
使用JQuery快速实现Tab的AJAX动态载入(实例讲解)
2013/12/11 Javascript
javascript实现图片延迟加载方法汇总(三种方法)
2015/08/27 Javascript
jQuery通用的全局遍历方法$.each()用法实例
2016/07/04 Javascript
AngularJS ng-style中使用filter
2016/09/21 Javascript
vue基于element的区间选择组件
2018/09/07 Javascript
Vue.js 事件修饰符的使用教程
2018/11/01 Javascript
Vue插槽原理与用法详解
2019/03/05 Javascript
浅谈目前可以使用ES10的5个新特性
2019/06/25 Javascript
js实现掷骰子小游戏
2019/10/24 Javascript
Vue3为什么这么快
2020/09/23 Javascript
[01:01:35]Optic vs paiN 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python编程线性回归代码示例
2017/12/07 Python
python文件选择对话框的操作方法
2019/06/27 Python
让Python脚本暂停执行的几种方法(小结)
2019/07/11 Python
python框架Django实战商城项目之工程搭建过程图文详解
2020/03/09 Python
python2和python3哪个使用率高
2020/06/23 Python
html5新特性与用法大全
2018/09/13 HTML / CSS
定制别致的瑜伽垫:Sugarmat
2019/06/21 全球购物
Vita Fede官网:在意大利手工制作,在纽约市设计
2019/10/25 全球购物
智乐游戏测试笔试题
2014/05/21 面试题
车贷收入证明范本
2014/09/14 职场文书
体检通知范文
2015/04/21 职场文书
2015年学校总务工作总结
2015/07/20 职场文书
2015少先队大队辅导员工作总结
2015/07/24 职场文书
Python基础知识之变量的详解
2021/04/14 Python
浅谈GO中的Channel以及死锁的造成
2022/03/18 Golang
Java工作中实用的代码优化技巧分享
2022/04/21 Java/Android