谈谈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 源码分析笔记(3) Deferred机制
Jun 19 Javascript
详谈javascript中DOM的基本属性
Feb 26 Javascript
jquery+ajax实现注册实时验证实例详解
Dec 08 Javascript
js实现为a标签添加事件的方法(使用闭包循环)
Aug 02 Javascript
JavaScript实现QQ列表展开收缩扩展功能
Oct 30 Javascript
Angular6笔记之封装http的示例代码
Jul 27 Javascript
vue组件数据传递、父子组件数据获取,slot,router路由功能示例
Mar 19 Javascript
vue设计一个倒计时秒杀的组件详解
Apr 06 Javascript
koa2+vue实现登陆及登录状态判断
Aug 15 Javascript
解决layui追加或者动态修改的表单元素“没效果”的问题
Sep 18 Javascript
js实现带积分弹球小游戏
Jul 21 Javascript
JavaScript中MutationObServer监听DOM元素详情
Nov 27 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
yii2中添加验证码的实现方法
2016/01/09 PHP
PHP微信开发用Cache 解决数据缓存
2016/07/11 PHP
Laravel学习教程之request validation的编写
2017/10/25 PHP
JavaScript的parseInt 进制问题
2009/05/07 Javascript
始终在屏幕中间显示Div的代码(css+js)
2011/03/10 Javascript
html5的自定义data-*属性和jquery的data()方法的使用示例
2013/08/21 Javascript
JavaScript中的console.dir()函数介绍
2014/12/29 Javascript
javascript实现动态加载CSS
2015/01/26 Javascript
浅谈js中的闭包
2015/03/16 Javascript
jQuery EasyUI实现右键菜单变灰不可用效果
2015/09/24 Javascript
Markdown与Bootstrap相结合实现图片自适应属性
2016/05/04 Javascript
jQuery实现checkbox即点即改批量删除及中间遇到的坑
2017/11/11 jQuery
vue购物车插件编写代码
2017/11/27 Javascript
layui表格内放置图片,并点击放大的实例
2019/09/10 Javascript
WEB前端性能优化的7大手段详解
2020/02/04 Javascript
Python设计模式之单例模式实例
2014/04/26 Python
Python实现简单字典树的方法
2016/04/29 Python
Python的几个高级语法概念浅析(lambda表达式闭包装饰器)
2016/05/28 Python
python正则实现提取电话功能
2018/02/24 Python
python计算两个地址之间的距离方法
2018/06/09 Python
Python 通过requests实现腾讯新闻抓取爬虫的方法
2019/02/22 Python
Python解决pip install时出现的Could not fetch URL问题
2019/08/01 Python
python3使用print打印带颜色的字符串代码实例
2019/08/22 Python
Python统计分析模块statistics用法示例
2019/09/06 Python
使用Python来做一个屏幕录制工具的操作代码
2020/01/18 Python
Python基于Dlib的人脸识别系统的实现
2020/02/26 Python
Python threading模块condition原理及运行流程详解
2020/10/05 Python
python工具快速为音视频自动生成字幕(使用说明)
2021/01/27 Python
美国在线印刷公司:PsPrint
2017/10/12 全球购物
高校生生产实习自我鉴定
2013/09/21 职场文书
高中军训广播稿
2014/01/14 职场文书
门诊手术室工作制度
2014/01/30 职场文书
法律进机关实施方案
2014/03/12 职场文书
深入浅析Django MTV模式
2021/09/04 Python
Python中的协程(Coroutine)操作模块(greenlet、gevent)
2022/05/30 Python
JavaScript设计模式之原型模式详情
2022/06/21 Javascript