JavaScript连续赋值陷阱：a.x = a = {n:2}的执行顺序解析

预期与现实的差异

在处理 JavaScript 对象引用时，如果将复杂的赋值逻辑拆开来看，结果往往符合直觉；但写成一行后，输出结果却可能大相径庭。以下代码展示了这一典型现象：

var a = { n: 1 };
var b = a;
a.x = a = { n: 2 };

console.log(a.x);  // 输出: undefined
console.log(b.x);  // 输出: Object { n: 2 }

若将其拆解为独立步骤：var a = {n:1}, var b = a, a = {n:2}, a.x = {n:2}，此时 a.x 会返回 {n:2} 而 b.x 为 undefined。这种差异源于 JavaScript 解释器处理单行表达式的特定顺序。

核心原理分析

要理解 a.x = a = {n:2} 的执行过程，必须掌握两个核心规则：一是赋值运算符的结合性，二是属性访问名的求值时机。

第1步：理解运算符结合性（从右向左）

在 JavaScript 中，赋值运算符（=）具有“从右向左”的结合性。因此，a.x = a = {n:2} 等价于 a.x = (a = {n:2})。这意味着内部的 a = {n:2} 会被优先计算并产生一个返回值，该返回值再被用于左侧的赋值操作。

第2步：确定左侧目标（从左向右求值）

虽然内部赋值先执行，但在完整表达式解析时，JavaScript 引擎首先需要确定等号左边（即 a.x）指向的目标对象。这一步发生在内部赋值改变 a 的指向之前。

• 引擎解析到 a.x，此时变量 a 仍指向初始对象 { n: 1 }。
• 引擎在内存中查找 n:1 对象的 x 属性。由于不存在，它会在该对象上创建一个名为 x 的新属性。
• 此时，左半部分的操作已锁定，引擎暂停等待右侧表达式的最终结果来填充这个新创建的 x 属性。

  第3步：执行右侧赋值并改变引用

  随后，引擎开始计算括号内的表达式 (a = {n:2})：

  • 创建一个新的对象字面量 { n: 2 }。
  • 将变量 a 的引用从旧的 { n: 1 } 修改为新创建的 { n: 2 }。
  • 赋值运算的结果就是这整个右边表达式的值，即新的对象 { n: 2 }。
  

  第4步：完成赋值闭环

  最后，引擎将步骤三生成的结果（即新对象 { n: 2 }）赋值给步骤二锁定的目标——旧对象 { n: 1 } 上的 x 属性。

  最终状态如下：

  • 变量 a 指向新对象 { n: 2 }（该对象没有 x 属性，所以 a.x 为 undefined）。
  • 变量 b 仍指向旧对象，而旧对象的 x 属性已被赋值为新对象 { n: 2 }（所以 b.x 为 { n: 2 }）。

  延伸：动态设置超链接

  在实际 DOM 操作中，有时需要动态更改元素的属性（例如 <a> 标签的 href）。利用上述 DOM API 知识，可以简单实现：

  // HTML结构
  // <form id="myform">
  //   <a href="#" id="links">信息提示</a>
  // </form>
  
  <script>
  // 通过ID获取元素并修改href属性
  document.getElementById("links").href = "http://www.baidu.com";
  </script>

  以上就是JavaScript连续赋值详细内容的详细讲解，更多关于JavaScript表达式求值技巧的资料请关注本站其它相关文章！