章节索引 :

控制台观察对象问题

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: '爸爸',
};

图片描述

  1. 在输出时候深拷贝一份对象
function clone(obj) {
  return JSON.parse(JSON.stringify(obj));
}

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

console.log(clone(user));

user.parents.father.age = 44;

图片描述

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

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

前置知识
什么是JavaScript 开发与学习环境准备 调试方案
基础
JavaScript 变量 JavaScript 数据类型 JavaScript if 语句 JavaScript for 语句 JavaScript 算数运算符 JavaScript 比较运算符 JavaScript 逻辑运算符 JavaScript 表达式 JavaScript 函数 JavaScript 对象 JavaScript 字符串 JavaScript 数字 JavaScript 数组 JavaScript switch 语句 JavaScript while 语句 JavaScript break与continue JavaScript with document.cookie
内置对象
JavaScript Function JavaScript Math JavaScript Date JavaScript RegExp JavaScript JSON
JavaScript 与 DOM
什么是DOM DOM和JavaScript的关系 获取和操作 DOM 节点 JavaScript DOM与事件 JavaScript DOM 事件绑定 JavaScript DOM 事件对象 JavaScript DOM 事件流 JavaScript DOM 事件优化 JavaScript DOM 自定义事件
表单处理
使用 JavaScript 校验表单
BOM
BOM window 对象 常用的 BOM 相关对象 BOM 常用属性和方法
AJAX
JavaScript AJAX
进阶知识
JavaScript 异常处理 JavaScript 三元运算符 JavaScript 逗号操作符 JavaScript void JavaScript typeof JavaScript delete JavaScript debugger JavaScript getter &setter JavaScript 原型 JavaScript new操作符和构造函数 JavaScript instanceof JavaScript this JavaScript 严格模式 JavaScript 作用域 JavaScript 闭包 JavaScript 变量提升 JavaScript 对象包装器
常用库
jQuery Lodash moment.js swiper
进阶指南
ECMAScript6 Node.js Babel CSS 预处理器 代码规范 TypeScript Web Components 小程序 Vue / React / Angular JavaScript 关键字
常见疑点与误区
分号问题 对象属性访问问题 this 使用问题 浮点数精度问题 独一无二的 NaN 避免全局污染 控制台观察对象问题 根据环境选择语言特性
扩展
相关资源