js连等赋值分析

Question

<script>
    var a = {n:1};
    a.x = a = {n:2};
    console.log(a.x);   //undefined
    var b = {n:1};
    b = b.x = {n:2};
    console.log(b);     //object{n:2}
    console.log(b.x);   //undefined
</script>

三个输出是什么原理？谢谢

Answer 1

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

等式从右边开始计算，但是在计算之前先求得各个变量的地址。即a.x中的a指向{n:1}这个对象，而连等式中的a指向{n:2}这个对象，即运算完成后，a指向{n:2}，因此在连等赋值后打印a.x是undefined。用下面这个例子更明白点

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

第二个例子同样的道理，等式中间b.x中的b指向的是{n:1}这个对象，然而等式左边的b指向了{n:2}这个对象，即运算完成后，b指向{n:2}，因此后来打印的b为{n:2}，而b.x即为{n:2}[x]，所以是undefined

Answer 2

b = b.x = {n:2};就不解释了。

a.x = a = {n:2};会特殊一点。
“.“运算符的优先级要高于”=“的优先级，所以这里的次序是：

1. 创建了一个x属性，值为undefined，挂在a下。
2. a的指向被改变，指向了{n:2}。
3. 刚才创建的x属性被赋值为{n:2}

但由于a的指向已经改变，不再指向原有的对象，所以a.x就为undefined。

全过程你可以通过以下程序观察清楚。

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