前端面试中，JS代码的坑（堆与栈）

---

前言

两题均来自大厂
✨ 若能理解以下重点，可直接做题，不看解析

💡本文重点

1、当一个对象A的属性名为另一个对象B，赋值时候会自动将对象B转化为字符串[object Object]。

A[B]=20  // 实际上运行的是 A['[object Object]']=20；注意这里的第二个Object首字母大写

2、.的优先级大于=

✍️A.x=A=B的执行过程

• 先执行A.x=，若A中无x，则将x赋undefined放入A，A.x=一直停留等待赋值。
• 再执行A=B，A的指向发生改变，但由于A.x已经悬挂起，还是可以赋值，不影响。
• 将A的值赋给A.x。

🙌题目一

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

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

🌟提炼知识点如下：

• 引用数据类型的数据存放位置：地址存放在栈（内存大小固定，运行速度快）中；值存放在堆中。
• 引用数据类型的变量是一个存放在栈内存的指针，该指针指向堆内存的一个地址。
• 引用数据类型的值可变（基本数据类型不可，改变实际上是创建了一个新的值）
• 深拷贝与浅拷贝：引用数据类型的拷贝属于浅拷贝（传址）【只有当拷贝引用数据类型时，拷贝才存在浅拷贝与深拷贝之分】

🌟做题步骤

1. let a = {n : 1};

• 栈内存中的a指向堆内存中的{n:1}
• 

2. let b = a;

• a浅拷贝给了b，此时b也指向{n:1}
• • 

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

• 按优先级，先执行a.x=，a中无x，所以加了x后赋值undefined。此时a.x=被挂起等待别人赋值。
• • 
• • 执行后面 a = {n: 2} 操作，栈内存中的a改变指向，指向堆内存中的{n:2}
• • 
• • 执行 a.x = a，将a浅拷贝给a.x，即a.x={n:2}【刚刚a.x=已经被挂起，a的指向改变也不会造成影响】
• • 

4. console.log(a.x)

• 由上图，a里面没有x，所以输出undefined

5. console.log(b.x)

• {n:2}

🌟答案

🙌题目二

      let a = {a:30};   
      let b = {b:10};       
      let obj={a:10};
      obj[b]=20;
      
      console.log(obj[a])    

🌟提炼知识点如下

• ES6中属性名表达式的理解：如果属性名表达式是一个对象的话，那么默认情况下会自动将对象转为字符串[object Object]

🌟做题步骤

1. let a = {a:30};

• 

2. let b = {b:10};
   
3. let obj={a:10};

• 

4. obj[b]=20;

• 由于属性名b是一个对象，所以默认将b转换为字符串[object Object]
• • 

5. console.log(obj[a])

• 属性名a是一个对象，默认将a转换为字符串[object Object]，即要求输出obj[‘[object Object]’]
• 答案为20

🌟答案

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