对象里的对象 在栈和堆的储存

Question

老师，为什么会出现下面两种情况，对象里面的 对象的属性值修改后会影响前面的输出？
对象里面的对象，在栈和堆上具体是怎么储存的呢？

let obj = {
    name: 'LiMing',
    age: '30',
    skill: {
        name: 'code'
    }
};

console.log(obj);
// {name: "LiMing", age: "30", skill: {…}}
obj.age = '31';
console.log(obj);
// {name: "LiMing", age: "31", skill: {…}}

let obj = {
    name: 'LiMing',
    age: '30',
    skill: {
        name: 'code',
        year: 1
    }
};

console.log(obj);
//{name: "LiMing", age: "30", skill: {name: "code", year: 2}}
obj.skill.year = 2;
console.log(obj);
//{name: "LiMing", age: "30", skill: {name: "code", year: 2}}

Answer 1

谢成 2020-12-28 15:54:42

问题中第一个例子中的obj.age属性是number型，所以是在栈内存，一个对象的改变不会影响其他对象。

问题中第二例子中的obj.skill属性是object，所以是存在堆内存的，只是一个引用，一个对象的改变会影响其他对象。

• 提问者 慕莱坞9430059 #1

  /*老师，我还是没太明白。
  1，对象的属性是基本数据类型，就存在栈内存中；对象的属性是引用数据类型，就存在堆内存中；是这样吗？
  2，为什么会出现下面代码的这种情况？
  语句：console.log(obj)在chrome中输出是折叠的，按理说此时输出的obj.skill.year是1，没错。
  但是为什么输出的obj手动展开后会看到obj.skill.year是2？是浏览器在代码执行完成后重新读取内存吗？
  */
  let obj = {
      name: 'LiMing',
      age: '30',
      skill: {
          name: 'code',
          year: 1
      }
  };
  console.log(obj.skill.year); //1
  console.log(obj.skill); //{name: "code", year: 1}
  console.log(obj);
  // 展开前： {name: "LiMing", age: "30", skill: {…}}
  /*手动展开后：
  {name: "LiMing", age: "30", skill: {…}}
  age: "30"
  name: "LiMing"
  skill: {name: "code", year: 2}
  __proto__: Object
  */
  obj.skill.year = 2;

• 谢成 回复 提问者 慕莱坞9430059 #2

  year开始是1，然后改变成2的时候，改变的是同一个对象。控制台不会实时来变化。

• 提问者 慕莱坞9430059 #3

  非常感谢！