不变性-扩展语法和Object.assign更新原始对象

Question

我正在学习ES6中的不变性。对于为什么使用spread语法和Object.assign创建原始对象的副本同时更新我的​​原始对象，我感到困惑。

var person = {
    name: 'John',
    add: {
        street: 'Rose',
        city: 'Irvine',
        zip: '92602'
    }
};

let newPerson = person;
let secondPerson = { ...person };
let thirdPerson = Object.assign({}, person);

newPerson.add.street = "Monterey";
secondPerson.add.city = "Alhambra";
thirdPerson.add.zip = "91801";

console.log({
    person,
    newPerson,
    secondPerson,
    thirdPerson,
});

预期

{
  person: {
    name: 'John',
    add: { street: 'Monterey', city: 'Irvine', zip: '92602' }
  },
  newPerson: {
    name: 'John',
    add: { street: 'Monterey', city: 'Irvine', zip: '92602' }
  },
  secondPerson: {
    name: 'John',
    add: { street: 'Rose', city: 'Alhambra', zip: '92602' }
  },
  thirdPerson: {
    name: 'John',
    add: { street: 'Rose', city: 'Irvine', zip: '91801' }
  }
}

实际

{
  person: {
    name: 'John',
    add: { street: 'Monterey', city: 'Alhambra', zip: '91801' }
  },
  newPerson: {
    name: 'John',
    add: { street: 'Monterey', city: 'Alhambra', zip: '91801' }
  },
  secondPerson: {
    name: 'John',
    add: { street: 'Monterey', city: 'Alhambra', zip: '91801' }
  },
  thirdPerson: {
    name: 'John',
    add: { street: 'Monterey', city: 'Alhambra', zip: '91801' }
  }
}