JavaScript中执行foo.x = foo = {n:2}后foo.x为undefined的原因

这个问题的核心是JavaScript赋值运算的求值顺序，咱们一步步拆解这段代码的执行过程，就能明白原因了：

先看完整代码：

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

步骤1：初始化对象与变量 #

• var foo = {n: 1};：在内存中创建一个对象{n: 1}，变量foo指向这个对象。
• var bar = foo;：变量bar和foo指向同一个对象，相当于两个变量都“指着”{n:1}这个内存地址。

步骤2：关键的赋值语句解析 #

重点看foo.x = foo = {n: 2};这一行，JavaScript的执行逻辑是：

1. 先从左到右解析所有左操作数：首先计算foo.x，此时foo还没被重新赋值，所以仍然指向原来的{n:1}对象——这一步相当于先给旧对象“预定”了一个x属性的位置。
2. 执行右边的赋值操作：处理foo = {n: 2}，创建新对象{n:2}，并把变量foo的指向切换到这个新对象上。
3. 完成最终赋值：把新对象{n:2}赋值给第一步中预定的旧对象的x属性。

最终状态与结果 #

执行完所有代码后：

• 变量foo现在指向新对象{n:2}，这个对象并没有x属性；
• 变量bar仍然指向旧对象{n:1, x: {n:2}}，旧对象的x属性才是你预期的{n:2}。

所以当你打印foo.x时，实际是在问新对象有没有x属性，结果自然是undefined；如果打印bar.x，就能得到你想要的{n:2}了。

内容的提问来源于stack exchange，提问作者knomdlo