谈谈javascript中使用连等赋值操作带来的问题


Posted in Javascript onNovember 26, 2015

前言

文章标题这句话原本是在国外某JavaScript规范里看到的,当时并没有引起足够的重视,直到最近一次出现了bug发现JS里的连等赋值操作的特色(坑)。

网上搜索一番发现一个非常好的连等赋值的(来源1,来源2)例子:

var a = {n:1};
a.x = a = {n:2};
console.log(a.x); // 输出?

答案是:

console.log(a.x); // undefined

不知道各位有没有答对,至少我是答错了。

遂借此机会好好看看JS连等赋值是怎么回事

赋值顺序?

假设有一句代码: A=B=C; ,赋值语句的执行顺序是从右至左,所以问题在于:

是猜想1: B = C; A = C; ?

还是猜想2: B = C; A = B;  ?

我们都知道若两个对象同时指向一个对象,那么对这个对象的修改是同步的,如:

var a={n:1};
var b=a;
a.n=2;
console.log(b);//Object {n: 2}

所以可以根据这个特性来测试连续赋值的顺序。

按照猜想1,把C换成具体的对象,可以看到对a的修改不会同步到b上,因为在执行第一行和第二行时分别创建了两个 {n:1} 对象。如:

var b={n:1};
var a={n:1};
a.n=0;
console.log(b);//Object {n: 1}

再按照猜想2,把C换成具体的对象,可以看到对a的修改同步到了b,因为a和b同时引用了一个对象,如:

var b={n:1};
var a=b;
a.n=0;
console.log(b);//Object {n: 0}

测试真正的连等赋值:

var a,b;
a=b={n:1};
a.n=0;
console.log(b);//Object {n: 0}

可以看到是符合猜想2的,如果有人觉得这个测试不准确可以再来测试,使用ECMA5的setter和getter特性来测试。

首先setter和getter是应用于变量名的,而不是变量真正储存的对象,如下:

Object.defineProperty(window,"obj",{
 get:function(){
  console.log("getter!!!");
 }
});
var x=obj;
obj;//getter!!! undefined
x;//undefined

可以看到只有obj输出了“getter!!!”,而x没有输出,用此特性来测试。

连等赋值测试2:

Object.defineProperty(window,"obj",{
 get:function(){
  console.log("getter!!!");
 }
});
a=b=obj;//getter!!! undefined

谈谈javascript中使用连等赋值操作带来的问题

通过getter再次证实,在A=B=C中,C只被读取了一次。

所以,连等赋值真正的运算规则是  B = C; A = B;  即连续赋值是从右至左永远只取等号右边的表达式结果赋值到等号左侧。

连续赋值能拆开写么?

通过上面可以看到连续赋值的真正规则,那么再回归到文章开头的那个案例,如果按照上述规则将连续赋值拆开会发现结果不一样了,如:

var a={n:1};
a={n:2};
a.x=a;
console.log(a.x);//Object {n: 2, x: Object}

所以连续赋值语句虽然是遵从从右至左依次赋值的规则但依然不能将语句拆开来写,至于为什么

我猜测:js内部为了保证赋值语句的正确,会在一条赋值语句执行前,先把所有要赋值的引用地址取出一个副本,再依次赋值。

所以我认为这段代码 a.x=a={n:2}; 的逻辑是:

1、在执行前,会先将a和a.x中的a的引用地址都取出来,此值他们都指向{n:1}

2、在内存中创建一个新对象{n:2}

3、执行a={n:2},将a的引用从指向{n:1}改为指向新的{n:2}

4、执行a.x=a,此时a已经指向了新对象,而a.x因为在执行前保留了原引用,所以a.x的a依然指向原先的{n:1}对象,所以给原对象新增一个属性x,内容为{n:2}也就是现在a

5、语句执行结束,原对象由{n:1}变成{n:1,x:{n:2}},而原对象因为无人再引用他,所以被GC回收,当前a指向新对象{n:2}

6、所以就有了文章开头的运行结果,再执行a.x,自然就是undefined了

上述过程按序号图示:

谈谈javascript中使用连等赋值操作带来的问题

谈谈javascript中使用连等赋值操作带来的问题

按照上述过程可以看出旧的a.x和新的a都指向新创建的对象{n:2},所以他们应该是全等的。

测试:

var a = {n:1};
var b = a;
a.x = a = {n:2};
console.log(a===b.x); //true

谈谈javascript中使用连等赋值操作带来的问题

因为我们增加了var b=a,即将原对象增加了一条引用,所以在上述第5步时不会被释放,证实了上面的结论。

后记

通过这次了解了连续赋值的特点,再回过头看文章标题,似乎应该叫:

尽量不要使用JS的连续赋值操作,除非真的了解它的内部机制及可能会产生的后果。

Javascript 相关文章推荐
一款基jquery超炫的动画导航菜单可响应单击事件
Nov 02 Javascript
使用js实现数据格式化
Dec 03 Javascript
javascript封装简单实现方法
Aug 11 Javascript
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
Oct 14 Javascript
jQuery实现table中的tr上下移动并保持序号不变的实例代码
Jul 11 Javascript
ES6正则表达式的一些新功能总结
May 09 Javascript
深入理解Vue2.x的虚拟DOM diff原理
Sep 27 Javascript
从零开始搭建一个react项目开发
Feb 09 Javascript
layer弹出的iframe层在执行完毕后关闭当前弹出层的方法
Aug 17 Javascript
初探Vue3.0 中的一大亮点Proxy的使用
Dec 06 Javascript
详解在vue-cli3.0中自定css、js和图片的打包路径
Aug 26 Javascript
小程序组件传值和引入sass的方法(使用vant Weapp组件库)
Nov 24 Javascript
jQuery实现的AJAX简单弹出层效果代码
Nov 26 #Javascript
js检测iframe是否加载完成的方法
Nov 26 #Javascript
学习JavaScript设计模式(策略模式)
Nov 26 #Javascript
深入浅析同源策略和跨域访问
Nov 26 #Javascript
js实现iframe框架取值的方法(兼容IE,firefox,chrome等)
Nov 26 #Javascript
学习JavaScript设计模式(单例模式)
Nov 26 #Javascript
javascript bom是什么及bom和dom的区别
Nov 26 #Javascript
You might like
php读取msn上的用户信息类
2008/12/05 PHP
Yii实现MySQL多数据库和读写分离实例分析
2014/12/03 PHP
Zend Framework实现多服务器共享SESSION数据的方法
2016/03/22 PHP
php 使用html5 XHR2实现上传文件与进度显示功能示例
2020/03/03 PHP
js实现ASP分页函数 HTML分页函数
2006/09/22 Javascript
JavaScript的Cookies
2008/01/16 Javascript
DD_belatedPNG,IE6下PNG透明解决方案(国外)
2010/12/06 Javascript
如何判断鼠标是否在DIV的区域内
2013/11/13 Javascript
JQuery与Ajax调用新浪API获取短网址的代码
2014/02/07 Javascript
jquery跟js初始化加载的多种方法及区别介绍
2014/04/02 Javascript
EasyUI,点击开启编辑框,并且编辑框获得焦点的方法
2015/03/01 Javascript
Javascript 跨域知识详细介绍
2016/10/30 Javascript
微信小程序图片轮播组件gallery slider使用方法详解
2018/01/31 Javascript
微信小程序实现图片上传功能
2018/05/28 Javascript
JavaScript实现PC端横向轮播图
2020/02/07 Javascript
微信小程序 scroll-view的使用案例代码详解
2020/06/11 Javascript
javascript的hashCode函数实现代码小结
2020/08/11 Javascript
Vue实现点击当前行变色
2020/12/14 Vue.js
[01:04:29]DOTA2-DPC中国联赛 正赛 Phoenix vs XG BO3 第二场 1月31日
2021/03/11 DOTA
用Python制作检测Linux运行信息的工具的教程
2015/04/01 Python
使用Python进行二进制文件读写的简单方法(推荐)
2016/09/12 Python
Python实现多线程HTTP下载器示例
2017/02/11 Python
Python中的函数作用域
2018/05/07 Python
python 美化输出信息的实例
2018/10/15 Python
Python3实现的判断回文链表算法示例
2019/03/08 Python
python 修改本地网络配置的方法
2019/08/14 Python
python实现两个一维列表合并成一个二维列表
2019/12/02 Python
Django+Uwsgi+Nginx如何实现生产环境部署
2020/07/31 Python
弄清Pytorch显存的分配机制
2020/12/10 Python
出国考察邀请函
2014/01/21 职场文书
党员活动日总结
2014/05/05 职场文书
车间安全生产标语
2014/06/06 职场文书
英语教师求职信
2014/06/16 职场文书
旅游局领导班子“四风”问题对照检查材料思想汇报
2014/09/29 职场文书
党员“四风”问题批评与自我批评思想汇报
2014/10/06 职场文书
python 网络编程要点总结
2021/06/18 Python