解析 JavaScript 连续赋值的求值顺序与引用陷阱

连续赋值问题的现象与对比

偶然在网上看到一个关于 JavaScript 的问题，其预期结果与实际运行结果存在显著差异。

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

undefined
Object{n:2}

如果将语句拆分为独立的赋值操作，结果符合直觉预期。

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

a.x=a={n:2} 执行机制解析

具体分析如下：

代码示例：a.x=a={n:2}

JavaScript 的赋值运算符具有右结合性，因此上述语句等价于 a.x=(a={n:2})。

JavaScript 的求值顺序是从左到右（注：曾与同事讨论，对方认为从左到右，我起初认为是从右到左，经核实确认是从左到右）。

1）首先计算等号右侧括号内的最终结果，并将其赋值给左侧 a.x。

在求值过程中，JavaScript 引擎首先查找对象 a 的属性 x。由于该属性不存在，引擎会在 a 当前指向的对象中创建一个新属性 x，并准备将右侧的计算结果赋给它，此时引擎等待右侧表达式的结果。

2）由于左侧属性 x 需要接收右侧表达式的返回值，引擎开始求值右侧的括号内容 a={n:2}，并将得到的结果返回给新创建的属性 x。

3）在处理右侧表达式 a={n:2} 时，变量 a 的引用指向发生了改变，指向了新创建的对象 {n:2}。

以上即为 JavaScript 连续赋值的执行过程解析，希望对大家有所帮助，也欢迎继续支持本站。