Fork me on GitHub

探究JS中的连等赋值问题

发表于 | 分类于 | 评论：

一、引子

最近在看别人的博客时无意中看到一个这样的问题

1
2
3
4
5
6
7
var a = {n: 1};
var b = a;
a.x = a = {n:2};

console.log(a.x);  //undefined
console.log(a);  // {n: 2} 
console.log(b);  // {n: 1, x: {n: 2}}

这是一个典型的连等赋值问题，是不是发现打印的结果跟自己预料的不太一样，就算一样你能具体讲出内部的执行机制吗？

二、直观理解

咋一看这个表达式，我会本能地把它拆解为这样

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

所以根据这个理解得出的打印结果是

1
console.log(a.x);  //{n: 2}

显然结果是不对的，那问题出在了哪里呢？要想从原理上解释这个问题，还得首先理解以下几个知识点

三、需要理解的知识点

  • 内存的的运行机制
  • JS引擎的解析过程，从左往右
  • 连等赋值的执行方向，从右往左

放在这个例子中对应的理解就是：

  • a、b这些变量名存储的只是一串指向具体对象的指针，这些指针占用的空间是非常小的，而{n: 1}这些对象才是实实在在存在内存中的值
  • JS引擎在执行到a.x = a = {n:2}这句时，并不是直接的从右往左的执行过程。而是计算机会先从左往右解析各个变量名，转换成变量值（计算机只会记变量值，人的话记变量名）。再从右往左执行赋值。

  • 也就是在这个表达式中第一个a和第二个a指向的都是{n: 1};

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

  • 解析完成后，从右往左执行赋值,第二个等号赋值时，a重定向到了{n: 2},第一个等号赋值时，实际上是{n:1}.x={n, 2};
    而这个时候指向{a:1, x:{n:2}}这个值的只有b了

  • 所以a.x的值就变为了undefined，因为a已经重定向赋值为{n:2}了，而b就指向了复合之后的对象

四、理解中的误区及思考

我最开始查了连等赋值的相关文章时，对于以上这些原理的理解是没什么问题的，关键是在理解最后那个赋值过程时，我有过一种理解

1
2
3
a = {n:2};
a.x={n:2};
// 所以此时a= {n:2, x:{n:2}}

产生这种理解的原因是觉得对a的赋值有个先后顺序，但事实上好像是不存在的。我对上面那种从解析赋值角度去理解的核心就是在连等赋值执行过程中，总共分为两步，一步是变量名解析，一步是赋值，然后根据赋值之后的值去看相应的变量名与变量之间的对应关系。

五、参考文档