控制臺(tái)觀察對(duì)象問題

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

console.log(user);

user.parents.father.age = 44;

這段代碼邏輯非常簡單，就是定義了一個(gè)對(duì)象，然后輸出，但是觀察控制臺(tái)，會(huì)發(fā)現(xiàn)數(shù)據(jù)并不是剛定義好時(shí)候的數(shù)據(jù)，而是修改后的數(shù)據(jù)。

根據(jù)現(xiàn)象推測 chrome 在展開對(duì)象時(shí)，對(duì)應(yīng)的是當(dāng)前該對(duì)象的狀態(tài)，而不是一個(gè)副本。

很多時(shí)候會(huì)因?yàn)檫@個(gè)問題排錯(cuò)很久，業(yè)務(wù)邏輯中可能查看對(duì)象的是在代碼 20 行處，但在 200 行的地方被別人改過這個(gè)對(duì)象，這時(shí)候就可能要定位很久問題。

通常有兩個(gè)方式來避免這個(gè)問題：

1. 只輸出想看的數(shù)據(jù)

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

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

user.parents.father.age = 44;

這樣就輸出了預(yù)期的結(jié)果。

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

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

console.log(user.parents);

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

2. 在輸出時(shí)候深拷貝一份對(duì)象

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

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

console.log(clone(user));

user.parents.father.age = 44;

因?yàn)樵谳敵鰰r(shí)創(chuàng)建了一個(gè)副本，而不是對(duì)對(duì)象的引用了，所以數(shù)據(jù)就保留在了輸出時(shí)候的狀態(tài)。

需要注意的是這個(gè)方案適合觀察沒有方法的對(duì)象，因?yàn)榉椒ㄔ诒恍蛄谢髸?huì)被剔除。