对Js赋值运算的新认识

此文的目的是为了解释如下现象：

1
2
3
4

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

赋值运算符

关键点在于它的返回值，用一个栗子来解释就是说：如果有表达式foo.x，则它的返回值是一个指向foo对象x属性的引用。

那么在知道了这一点后，开始解释上面的现象：
首先是两个变量的声明和初始化，var foo = { n: 1 }; var bar = foo;，这个很好理解，就是foo和bar同时指向了一个相同的对象{ n: 1 }。

接下来，对于表达式foo.x = foo = { n: 2 };，我们都知道它实际上等于是foo.x = (foo = { n: 2 })。我们开始应用上ECMA规范上的步骤，虽然赋值运算符具有右结合性，然而它首先做的是得到表达式foo.x的值，根据我们对Property Accessors的解释它返回一个指向对象{ n: 1}的x成员的引用，需要注意的是，这个时候foo并没有改变引用的指向。

继续，开始计算右边的结果，就是让foo指向另外的一个对象{n: 2}，返回值就是其右边运算式的结果，即对象{n: 2}这个容易理解。

那么现在应该清楚了，赋值语句中foo.x的结果是指向对象一成员x的引用，而下面的console.log(foo.x)中的foo指向的是对象二，所以这里foo.x返回undefined就理所当然了。
所以试着输出对象一，即bar（因为它从始至终指向的是对象一）：

{ n: 1, x: { n: 2 } }