控制臺觀察對象問題

var user = {
  parents: {
    father: {
      age: 66,
    },
  },
};

console.log(user);

user.parents.father.age = 44;

這段代碼邏輯非常簡單，就是定義了一個對象，然后輸出，但是觀察控制臺，會發現數據并不是剛定義好時候的數據，而是修改后的數據。

根據現象推測 chrome 在展開對象時，對應的是當前該對象的狀態，而不是一個副本。

很多時候會因為這個問題排錯很久，業務邏輯中可能查看對象的是在代碼 20 行處，但在 200 行的地方被別人改過這個對象，這時候就可能要定位很久問題。

通常有兩個方式來避免這個問題：

1. 只輸出想看的數據

var user = {
  parents: {
    father: {
      age: 66,
    },
  },
};

console.log(user.parents.father.age);

user.parents.father.age = 44;

這樣就輸出了預期的結果。

要注意的是，如果觀察的是一個對象下的子對象，這個方法就不靈了，原因是同理的：

var user = {
  parents: {
    father: {
      age: 66,
    },
  },
};

console.log(user.parents);

user.parents.father = {
  name: '爸爸',
};

2. 在輸出時候深拷貝一份對象

function clone(obj) {
  return JSON.parse(JSON.stringify(obj));
}

var user = {
  parents: {
    father: {
      age: 66,
    },
  },
};

console.log(clone(user));

user.parents.father.age = 44;

因為在輸出時創建了一個副本，而不是對對象的引用了，所以數據就保留在了輸出時候的狀態。

需要注意的是這個方案適合觀察沒有方法的對象，因為方法在被序列化后會被剔除。