位置: 编程技术 - 正文
谈谈javascript中使用连等赋值操作带来的问题(简述javascript)
编辑：rootadmin推荐整理分享谈谈javascript中使用连等赋值操作带来的问题(简述javascript)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:简述javascript,javascript的,javascript的理解,javascript的理解,javascript的语句,简述javascript,请问在javascript程序中,简要说明javascript的作用,内容如对您有帮助，希望把文章链接给更多的朋友！
前言
文章标题这句话原本是在国外某JavaScript规范里看到的，当时并没有引起足够的重视，直到最近一次出现了bug发现JS里的连等赋值操作的特色(坑)。
网上搜索一番发现一个非常好的连等赋值的（来源1，来源2）例子：
答案是：
不知道各位有没有答对，至少我是答错了。
遂借此机会好好看看JS连等赋值是怎么回事
赋值顺序？
假设有一句代码： A=B=C; ，赋值语句的执行顺序是从右至左，所以问题在于：
是猜想1： B = C; A = C; ？
还是猜想2： B = C; A = B; ？
我们都知道若两个对象同时指向一个对象，那么对这个对象的修改是同步的，如：
所以可以根据这个特性来测试连续赋值的顺序。
按照猜想1，把C换成具体的对象，可以看到对a的修改不会同步到b上，因为在执行第一行和第二行时分别创建了两个 {n:1} 对象。如：
再按照猜想2，把C换成具体的对象，可以看到对a的修改同步到了b，因为a和b同时引用了一个对象，如：
测试真正的连等赋值：
可以看到是符合猜想2的，如果有人觉得这个测试不准确可以再来测试，使用ECMA5的setter和getter特性来测试。
首先setter和getter是应用于变量名的，而不是变量真正储存的对象，如下：
可以看到只有obj输出了“getter!!!”，而x没有输出，用此特性来测试。
连等赋值测试2：
通过getter再次证实，在A=B=C中，C只被读取了一次。
所以，连等赋值真正的运算规则是 B = C; A = B; 即连续赋值是从右至左永远只取等号右边的表达式结果赋值到等号左侧。
连续赋值能拆开写么？
通过上面可以看到连续赋值的真正规则，那么再回归到文章开头的那个案例，如果按照上述规则将连续赋值拆开会发现结果不一样了，如：
所以连续赋值语句虽然是遵从从右至左依次赋值的规则但依然不能将语句拆开来写，至于为什么
我猜测：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了
上述过程按序号图示：
按照上述过程可以看出旧的a.x和新的a都指向新创建的对象{n:2}，所以他们应该是全等的。
测试：
因为我们增加了var b=a，即将原对象增加了一条引用，所以在上述第5步时不会被释放，证实了上面的结论。
后记
通过这次了解了连续赋值的特点，再回过头看文章标题，似乎应该叫：
尽量不要使用JS的连续赋值操作，除非真的了解它的内部机制及可能会产生的后果。
javascript给span标签赋值的方法 js给span标签赋值的方法？一般有两种方法：第一种方法：输出htmlbodyonload="s()"spanid="hello"/spanscriptlanguage="javascript"functions(){document.getElementById("hello").innerHTM
基于jquery实现全屏滚动效果 那么今天就来介绍这款fullPage，与fullPage.js是不同的，fullpage兼容性更佳，能向下兼容到IE6，不依赖任何js库，可独立使用。功能上虽然不如fullPage.js强大
JavaScript中使用sencha gridpanel 编辑单元格、改变单元格颜色 表格GridPanel概述ExtJS中的表格功能非常强大，包括了排序、缓存、拖动、隐藏某一列、自动显示行号、列汇总、单元格编辑等实用功能。表格由类Ext.grid.
标签: 简述javascript
本文链接地址:https://www.jiuchutong.com/biancheng/386297.html 转载请保留说明！
