let a = {n : 1}；let b = a；a.x = a = {n: 2}；console.log(a.x) console.log(b.x)

青旅半醒 2023-02-28 08:46 29阅读 0赞

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

console.log(a.x)  
        console.log(b.x)

解题思路：

1.  a指向了一个对象\{n:1\}
2.  a浅拷贝给了b,此时b也指向了对象\{n:1\}
3.  图解![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dlYl9K_size_16_color_FFFFFF_t_70][]
4.  **“.”的优先级高于“=”**，所以先计算a.x，也就是在a中添加属性x（此时这个**x是undefined**).a-->\{n:1,x:undefined\}
5.  a-->\{n:1,x:undefined\}，b-->\{n:1,x:undefined\}   
6.  图解![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dlYl9K_size_16_color_FFFFFF_t_70 1][]
7.  依循“从右往左”的赋值运算顺序先执行 a=\{n:2\} ，这时候，**a指向的对象发生了改变**，变成了新对象\{n:2\}。(可能你在这会有疑惑（重点），之前a不是指向了\{n:1,x:undefined\}吗，赋值不会影响他吗？原因是因为在执行（a.x=）的时候已经被挂起来等待赋值了，即使a发生了指向的变化，但也不再影响此刻的（a.x）了，因为已经对（a.x）进行了指向的确定，只不过他现在正在等待被赋值。a被重新赋值，此时a的指向也就变化了）
8.  a-->\{n:2\}，b-->\{n:1,x:undefined\}   
9.  图解![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dlYl9K_size_16_color_FFFFFF_t_70 2][]
10. 继续执行 a.x=a相当于a.x = \{n: 2\}，由于在第三步时**a.x已经被创建，并且等待赋值**，所以**x = \{n: 2\}** 。（a.x由于一直等待赋值一直被挂起，也就是一直保持着\{n:1,x:undefined\}对象x属性的访问，对象\{n:1,x:undefined\}由于一直有一个b的指向，所以不会被JS的垃圾回收机制给回收，赋值后对象变为了\{n:1,x:\{n:2\}\} ）
11. a-->\{n:2\}，b-->\{n:1,x:\{n: 2\}\} 
12. 图解![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dlYl9K_size_16_color_FFFFFF_t_70 3][]
13. a中没有x，所以a.x=undefined，b.x=\{n: 2\}

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dlYl9K_size_16_color_FFFFFF_t_70]: /images/20230209/7655219f7ce3454182fd8149b1d5d433.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dlYl9K_size_16_color_FFFFFF_t_70 1]: /images/20230209/04888df205aa4811aa504c1b6e28300e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dlYl9K_size_16_color_FFFFFF_t_70 2]: /images/20230209/d368a5247b2b45d8a8e9958fed22d3dc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dlYl9K_size_16_color_FFFFFF_t_70 3]: /images/20230209/6b7d8ff60ef34da98df07dcebc3f6414.png