控制台观察对象问题

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

console .  log  ( user )  ; 

user . parents . father . age  =   ; 
 

这段 代码 逻辑非常简单，就是定义了 一个 对象，然后 输出 ，但是观察控制台，会发现数据并不是刚定义好时候的数据，而是 修改 后的数据。

根据现象推测 chrome 在展开对象时，对应的是当前该对象的状态，而不是 一个 副本。

很多时候会因为这个问题排错很久，业务逻辑中可能查看对象的是在 代码 20 行处，但在 200 行的地方被别人改过这个对象，这时候就可能要定位很久问题。

通常有两个方式来避免这个问题：

只 输出 想看的数据

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

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

user . parents . father . age  =   ; 
 

这样就 输出 了预期的结果。

要注意的是，如果观察的是 一个 对象下的子对象，这个 方法 就不灵了，原因是同理的：

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

console .  log  ( user . parents )  ; 

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

在 输出 时候深拷贝一份对象

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

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

console .  log  (  clone  ( user )  )  ; 

user . parents . father . age  =   ; 
 

因为在 输出 时创建了 一个 副本，而不是对对象的引用了，所以数据就保留在了 输出 时候的状态。

需要注意的是这个方案适合观察没有 方法 的对象，因为 方法 在被序列化后会被剔除。

根据环境选择语言特性 ► ◄避免全局污染

查看更多关于控制台观察对象问题的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did92464