谈谈javascript中使用连等赋值操作带来的问题
前言
文章标题这句话原本是在国外某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
通过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了
上述过程按序号图示：
按照上述过程可以看出旧的a.x和新的a都指向新创建的对象{n:2}，所以他们应该是全等的。
测试：
var a = {n:1};
var b = a;
a.x = a = {n:2};
console.log(a===b.x); //true
因为我们增加了var b=a，即将原对象增加了一条引用，所以在上述第5步时不会被释放，证实了上面的结论。
后记
通过这次了解了连续赋值的特点，再回过头看文章标题，似乎应该叫：
尽量不要使用JS的连续赋值操作，除非真的了解它的内部机制及可能会产生的后果。
相关推荐
-
JavaScript中的函数的两种定义方式和函数变量赋值
复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript"> /*I总结: 1.函数名可以做变量使用,可以赋值,可以传值 2.函数名当参数,传递给另一个函数 */ //===========
-
javascript引用赋值（地址传值）用法实例
本文实例讲述了javascript引用赋值(地址传值)用法.分享给大家供大家参考.具体如下: javascript在默认情况下,数组.对象和函数是引用赋值,如下代码所示: 复制代码 代码如下: <html> <head> <script type="text/javascript"> var a={age:20,height:175}; var b = a; alert(b.age); b.age = 25; alert(a.age); </s
-
用JAVASCRIPT如何给<textarea></textarea>赋值
1楼 表单名.多行广西域名.value="你要赋的值"; 2楼 文本域它没有VALUE属性. 3楼 楼主你试了没有?? 我这怎么可以用value赋值 4楼 搞定了,谢谢了.现在给分.
-
用javascript将数据库中的TEXT类型数据动态赋值到TEXTAREA中
我想动态将text类型的数据加入到TEXTAREA中,如下程序不能正常显示 ShtForm为Form域,Txt_CmpnyPrms为TEXTAREA Response.Write("<script language='javascript'>") tempStr = "ShtForm.Txt_CmpnyPrms.innerText = ' " + HTMLEncode(v_Rs("C
-
分析 JavaScript 中令人困惑的变量赋值
Javascript是一门弱类型的语言,声明变量不需要声明其类型,var x 就可以等于任何类型的值. 比如: var str = "string...."; var arr = ["this","is","array"]; var obj = {name:"caizhongqi",age:26,sex:"male"}; 这些都是正确的,这似乎非常简单方便,但是这种方便也会带来一些令人难
-
谈谈javascript中使用连等赋值操作带来的问题
前言 文章标题这句话原本是在国外某JavaScript规范里看到的,当时并没有引起足够的重视,直到最近一次出现了bug发现JS里的连等赋值操作的特色(坑). 网上搜索一番发现一个非常好的连等赋值的(来源1,来源2)例子: var a = {n:1}; a.x = a = {n:2}; console.log(a.x); // 输出? 答案是: console.log(a.x); // undefined 不知道各位有没有答对,至少我是答错了. 遂借此机会好好看看JS连等赋值是怎么回事 赋值顺序?
-
谈谈JavaScript中的函数
JS中的函数简介 JS中的函数是一种通过调用来完成具体业务的一段代码块.最核心的目的是将可重复执行的操作进行封装,然后供调用方无限制的调用. JS中的函数的定义 JS中函数定义,有如下两种形式: 方式1 function f1(){} //函数声明,f1为函数名,可以将其理解为变量f1指向一个函数 function f2(){return 100;}//函数允许有返回值 function f3(a,b){}//函数中可以定义多个参数,无需指定变量类型 方式2 var f4=function(){
-
谈谈JavaScript中的垃圾回收机制
JavaScript 具有自动垃圾收集机制,也就是说,执行环境会负责管理代码执行过程中使用的内存. 在编写 JavaScript 程序时,开发人员不用再关心内存使用问题,所需内存的分配以及无用内存的回收完全实现了自动管理. 这种垃圾收集机制的原理其实很简单:找出那些不再继续使用的变量,然后释放其占用的内存.为此,垃圾收集器会按照固定的时间间隔(或代码执行中预定的收集时间), 周期性地执行这一操作. 具体到浏览器中的实现,则通常有两个策略,分别为标记清除和引用计数. 一.标记清除 JavaScri
-
简单谈谈javascript中的变量、作用域和内存问题
[变量] [1]定义:可变的量,相当于给一个不定的数据起了一个外号.变量是存储信息的容器. [2]特性:js中的变量是松散类型的,可以保存任何类型的数据.它只是在特定时间用于保存特定值的一个名字而已.由于不存在定义某个变量必须要保存何种数据类型值的规则,变量的值及其数据类型可以在脚本的生命周期内改变. [3]变量声明:变量可以在声明时赋值,但不能有其他操作,如+=.-=等 var a = 2;//是正确的 var a += 2;//是错误的 var a = 2++;//是错误的,++只能用于变量
-
详细谈谈JavaScript中循环之间的差异
目录 前言 可枚举的属性 可迭代对象 在 forEach 与 map 方法 链式调用 性能 结论 前言 在 JavaScript 中使用循环时,需要正确定义两个关键内容:可枚举属性(enumerable properties)和可迭代对象(iterable objects). 可枚举的属性 可枚举对象的一个定义特征是,当我们通过赋值运算符将属性赋值给对象时,我们将内部可枚举标志(enumerable)设置为 true.这是默认值. 但是,我们可以通过将其设置为 false 来更改此行为. 经验法
-
谈谈JavaScript中的几种借用方法
前言 通过call().apply()和bind()方法,我们可轻易地借用其它对象的方法,而无须从这些对象中继承它. 在JavaScript中借用方法 在JavaScript中,有时可以重用其它对象的函数或方法,而不一定非得是对象本身或原型上定义的.通过 call().apply() 和 bind() 方法,我们可轻易地借用其它对象的方法,而无须继承这些对象.这是专业 JavaScript 开发者常用的手段. 原型方法 在 JavaScript 中,除了不可更改的原始数据类型,如 string.
-
JavaScript中日期函数的相关操作知识
时间对象是一个我们经常要用到的对象,无论是做时间输出.时间判断等操作时都与这个对象离不开.除开JavaScript中的时间对象外,在VbScript中也有许多的时间对象,而且非常好用.下面还是按照我们的流程来进行讲解JavaScript中日期函数. new Date() new Date(milliseconds) new Date(datestring) new Date(year, month) new Date(year, month, day) new Date(year, month,
-
Javascript中的解构赋值语法详解
前言 首先在 ES6中引入的"解构赋值语法"允许把数组和对象中的值插入到不同的变量中.虽然看上去可能很难,但实际上很容易学习和使用. 解构赋值语法是一种 JS表达式.ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构.通过解构赋值, 可以将属性/值从对象/数组中取出,赋值给其他变量. 在ES6解构赋值出现之前,我们需要为变量赋值的时候,只能直接指定值. 比如: let a = 1; let b = 2; let c = 3; let d = 4; let e
-
谈谈JavaScript中的函数与闭包
闭包这东西,说难也难,说不难也不难,下面我就以自己的理解来说一下闭包 一.闭包的解释说明 对于函数式语言来说,函数可以保存内部的数据状态.对于像C#这种编译型命令式语言来说,由于代码总是在代码段中执行,而代码段是只读的,因此函数中的数据只能是静态数据.函数内部的局部变量存放在栈上,在函数执行结束以后,所占用的栈被释放,因此局部变量是不能保存的. Javascript采用词法作用域,函数的执行依赖于变量作用域,这个作用域是在定义函数时确定的.因此Javascript中函数对象不仅保存代码逻辑,还必
-
谈谈JavaScript中浏览器兼容问题的写法小议
前言 JavaScript中很多坑,其中对浏览器的兼容也是一个问题,本文就简略的归纳了部分针对浏览器兼容问题的写法的例子,旨在便于查找.如果读者有什么好的意见建议,请留言交流,谢谢! window窗口大小 1.在IE9+.Chrome.Firefox.Opera以及Safari中 window.innerHeight获取浏览器窗口的内部高度 window.innerWidth获取浏览器窗口的内部宽度 var msg = "窗口宽度:" + window.innerHeight + &q