写了12年JS也未必全了解的连续赋值运算

引子

var a = {n:1};

var b = a; // 持有a，以回查

a.x = a = {n:2};

alert(a.x);// --> undefined

alert(b.x);// --> {n:2}

请问结果为何是这样？

连等赋值的赋值顺序

假设有一句代码： 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

image

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

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

赋值表达式的右结合性

但是，你真正懂得右结合性是怎样起作用的吗？

看下面的连续赋值表达式：

exp1 = exp2 = exp3 = ... = expN;

其中的exp是一个表达式，并且除最后一个expN外，其他表达式都必须可以作为左值。

你能告诉我它是怎样运算吗？

是这样的，首先根据赋值运算的右结合性，可以改写成：

exp1 = (exp2 = (exp3 = (... = expN)...);

然后按照下面步骤进行运算：

解析exp1；

解析exp2；

解析exp3；

...

N. 解析expN；

以上步骤完成后，上面表达式变成了：

ref1 = (ref2 = (ref3 = (... = value)...);

其中value是表达式expN的值。接下来的步骤是：

将value赋给引用refN-1；

将value赋给引用refN-2；

...

N-1.将value赋给引用ref1；

结束。

特殊问题的坑

var a = {n:1};

var b = a; // 持有a，以回查

a.x = a = {n:2};

alert(a.x);// --> undefined

alert(b.x);// --> {n:2}

请问结果为何是这样？

赋值是从右到左的，但不要被绕晕了， 其实很简单，从运算符优先级来考虑

a.x = a = {n:2};

.运算优先于=赋值运算，因此此处赋值可理解为

声明a对象中的x属性，用于赋值，此时b指向a，同时拥有未赋值的x属性

对a对象赋值，此时变量名a改变指向到对象{n:2}

对步骤1中x属性，也即a原指向对象的x属性，也即b指向对象的x属性赋值

赋值结果：

a => {n: 2}

b => {n: 1, x: {n: 2 } }

详细解答

var a = {n:1};

/*定义a，a赋值为`{n:1}`；

为a在内存堆中分配一块内存用于存储`{n:1}`，假设其地址为add_1；

此时add_1引用计数为1，即a，内容为`{n:1}`。*/

var b = a;

/*定义b，b赋值a，add_1被b引用。

此时add_1引用计数为2，即a和b，内容为`{n:1}`。*/

a.x = a = {n:2};

/*（`=`赋值运算符：关联性为从右向左，优先级为3。`.`成员访问运算符：关联性为从左向右，优先级为19。19>3，所以先计算成员访问运算符）

（1）：a.x是成员访问运算表达式，a.x中的x赋值为`a = {n:2}`的返回值`{n:2}`，add_1被改写`{n:1,x:{n:2}}`。

此时add_1引用计数为2，即a、b，内容为`{n:1,x:{n:2}}`。

（2）：a赋值为`{n:2}`；

为a在内存堆中分配一块内存用于存储`{n:2}`，假设其地址为add_2；

此时add_1引用计数为1，即b，内容为`{n:1,x:{n:2}}`。

此时add_2引用计数为1，即a，内容为`{n:2}`。*/

alert(a.x);

/*现在a的存储地址add_2，内容为{n:2}，上面并不存在a.x属性，所以为undefined*/

alert(b.x);

/*现在b的存储地址add_1，内容为{n:1,x:{n:2}}，所以b.x为{n:2}*/