javascript深拷贝、浅拷贝和循环引用深入理解


Posted in Javascript onMay 27, 2018

一、为什么有深拷贝和浅拷贝?

这个要从js中的数据类型说起,js中数据类型分为基本数据类型和引用数据类型。

基本类型值指的是那些保存在栈内存中的简单数据段,即这种值是完全保存在内存中的一个位置。包含Number,String,Boolean,Null,Undefined ,Symbol。

引用类型值指的是那些保存在堆内存中的对象,所以引用类型的值保存的是一个指针,这个指针指向存储在堆中的一个对象。除了上面的 6 种基本数据类型外,剩下的就是引用类型了,统称为 Object 类型。细分的话,有:Object 类型、Array 类型、Date 类型、RegExp 类型、Function 类型 等。

正因为引用类型的这种机制, 当我们从一个变量向另一个变量复制引用类型的值时,实际上是将这个引用类型在栈内存中的引用地址复制了一份给新的变量,其实就是一个指针。因此当操作结束后,这两个变量实际上指向的是同一个在堆内存中的对象,改变其中任意一个对象,另一个对象也会跟着改变。

javascript深拷贝、浅拷贝和循环引用深入理解

因此深拷贝和浅拷贝只发生在引用类型中。简单来说他们的区别在于:

1. 层次

  • 浅拷贝 只会将对象的各个属性进行依次复制,并不会进行递归复制,也就是说只会赋值目标对象的第一层属性。
  • 深拷贝不同于浅拷贝,它不只拷贝目标对象的第一层属性,而是递归拷贝目标对象的所有属性。

2. 是否开辟新的栈

  • 浅拷贝 对于目标对象第一层为基本数据类型的数据,就是直接赋值,即「传值」;而对于目标对象第一层为引用数据类型的数据,就是直接赋存于栈内存中的堆内存地址,即「传址」,并没有开辟新的栈,也就是复制的结果是两个对象指向同一个地址,修改其中一个对象的属性,则另一个对象的属性也会改变,
  • 深拷贝 而深复制则是开辟新的栈,两个对象对应两个不同的地址,修改一个对象的属性,不会改变另一个对象的属性。

二、浅拷贝

以下是实现浅拷贝的几种实现方式:

1.Array.concat()

const arr = [1,2,3,4,[5,6]];
  const copy = arr.concat(); \\ 利用concat()创建arr的副本
  
  \\改变基本类型值,不会改变原数组
  copy[0] = 2; 
  arr; //[1,2,3,4,[5,6]];

  \\改变数组中的引用类型值,原数组也会跟着改变
  copy[4][1] = 7;
  arr; //[1,2,3,4,[5,7]];

能实现类似效果的还有slice()和Array.from()等,大家可以自己尝试一下~

2.Object.assign()

const obj1 = {x: 1, y: 2};
const obj2 = Object.assign({}, obj1);

obj2.x = 2; \\修改obj2.x,改变对象中的基本类型值
console.log(obj1) //{x: 1, y: 2} //原对象未改变
console.log(obj2) //{x: 2, y: 2}
const obj1 = {
  x: 1, 
  y: {
    m: 1
  }
};
const obj2 = Object.assign({}, obj1);

obj2.y.m = 2; \\修改obj2.y.m,改变对象中的引用类型值
console.log(obj1) //{x: 1, y: {m: 2}} 原对象也被改变
console.log(obj2) //{x: 2, y: {m: 2}}

三、深拷贝

1.JSON.parse()和JSON.stringify()

const obj1 = {
  x: 1, 
  y: {
    m: 1
  }
};
const obj2 = JSON.parse(JSON.stringify(obj1));
console.log(obj1) //{x: 1, y: {m: 1}}
console.log(obj2) //{x: 1, y: {m: 1}}

obj2.y.m = 2; //修改obj2.y.m
console.log(obj1) //{x: 1, y: {m: 1}} 原对象未改变
console.log(obj2) //{x: 2, y: {m: 2}}

这种方法使用较为简单,可以满足基本日常的深拷贝需求,而且能够处理JSON格式能表示的所有数据类型,但是有以下几个缺点:

  • undefined、任意的函数、正则表达式类型以及 symbol 值,在序列化过程中会被忽略(出现在非数组对象的属性值中时)或者被转换成 null(出现在数组中时);
  • 它会抛弃对象的constructor。也就是深拷贝之后,不管这个对象原来的构造函数是什么,在深拷贝之后都会变成Object;
  • 如果对象中存在循环引用的情况无法正确处理。

2.递归

function deepCopy1(obj) {
  // 创建一个新对象
  let result = {}
  let keys = Object.keys(obj),
    key = null,
    temp = null;

  for (let i = 0; i < keys.length; i++) {
    key = keys[i];  
    temp = obj[key];
    // 如果字段的值也是一个对象则递归操作
    if (temp && typeof temp === 'object') {
      result[key] = deepCopy(temp);
    } else {
    // 否则直接赋值给新对象
      result[key] = temp;
    }
  }
  return result;
}

const obj1 = {
  x: {
    m: 1
  },
  y: undefined,
  z: function add(z1, z2) {
    return z1 + z2
  },
  a: Symbol("foo")
};

const obj2 = deepCopy1(obj1);
obj2.x.m = 2;

console.log(obj1); //{x: {m: 1}, y: undefined, z: ƒ, a: Symbol(foo)}
console.log(obj2); //{x: {m: 2}, y: undefined, z: ƒ, a: Symbol(foo)}

四、循环引用

看似递归已经完全解决我们的问题了,然而还有一种情况我们没考虑到,那就是循环引用

1.父级引用

这里的父级引用指的是,当对象的某个属性,正是这个对象本身,此时我们如果进行深拷贝,可能会在子元素->父对象->子元素...这个循环中一直进行,导致栈溢出。比如下面这个例子:

const obj1 = {
  x: 1, 
  y: 2
};
obj1.z = obj1;

const obj2 = deepCopy1(obj1); \\栈溢出

解决办法是:只需要判断一个对象的字段是否引用了这个对象或这个对象的任意父级即可,可以修改上面的deepCopy函数:

function deepCopy2(obj, parent=null) {
  //创建一个新对象
  let result = {};
  let keys = Object.keys(obj),
     key = null,
     temp = null,
     _parent = parent;
  //该字段有父级则需要追溯该字段的父级
  while(_parent) {
    //如果该字段引用了它的父级,则为循环引用
    if(_parent.originParent === obj) {
      //循环引用返回同级的新对象
      return _parent.currentParent;
    }
    _parent = _parent.parent
  }
  for(let i=0,len=keys.length;i<len;i++) {
    key = keys[i]
    temp = obj[key]
    // 如果字段的值也是一个新对象
    if(temp && typeof temp === 'object') {
      result[key] = deepCopy(temp, {
        //递归执行深拷贝,将同级的待拷贝对象与新对象传递给parent,方便追溯循环引用
        originParent: obj,
        currentParent: result,
        parent: parent
      });
    } else {
      result[key] = temp;
    }
  }
  return result;
}

const obj1 = {
  x:1
}
obj1.z = obj1;

const obj2 = deepCopy2(obj1);

2. 同级引用

假设对象obj有a,b,c三个子对象,其中子对象c中有个属性d引用了对象obj下面的子对象a。

const obj= {
  a: {
    name: 'a'
  },
  b: {
    name: 'b'
  },
  c: {

  }
};
c.d.e = obj.a;

此时c.d.e和obj.a 是相等的,因为它们引用的是同一个对象

console.log(c.d.e === obj.a); //true

如果我们调用上面的deepCopy2函数

const copy = deepCopy2(obj);
console.log(copy.a); // 输出: {name: "a"}
console.log(copy.d.e);// 输出: {name: "a"}
console.log(copy.a === copy.d.e); // 输出: false

以上表现我们就可以看出,虽然opy.a 和copy.d.e在字面意义上是相等的,但二者并不是引用的同一个对象,这点上来看对象copy和原对象obj还是有差异的。

这种情况是因为obj.a并不在obj.d.e的父级对象链上,所以deepCopy2函数就无法检测到obj.d.e对obj.a也是一种引用关系,所以deepCopy2函数就将obj.a深拷贝的结果赋值给了copy.d.e。

解决方案:父级的引用是一种引用,非父级的引用也是一种引用,那么只要记录下对象A中的所有对象,并与新创建的对象一一对应即可。

function deepCopy3(obj) {
  // hash表,记录所有的对象的引用关系
  let map = new WeakMap();
  function dp(obj) {
    let result = null;
    let keys = Object.keys(obj);
    let key = null,
      temp = null,
      existobj = null;

    existobj = map.get(obj);
    //如果这个对象已经被记录则直接返回
    if(existobj) {
      return existobj;
    }

    result = {}
    map.set(obj, result);

    for(let i =0,len=keys.length;i<len;i++) {
      key = keys[i];
      temp = obj[key];
      if(temp && typeof temp === 'object') {
        result[key] = dp(temp);
      }else {
        result[key] = temp;
      }
    }
    return result;
  }
  return dp(obj);
}

const obj= {
  a: {
    name: 'a'
  },
  b: {
    name: 'b'
  },
  c: {

  }
};
c.d.e = obj.a;

const copy = deepCopy3(obj);

五、总结

其实拷贝的方式还有很多种,比如jquery中的$.extend,lodash的_.cloneDeep等等,关于拷贝中还有很多问题值得深究,比如正则类型的值如何拷贝,原型上的属性如何拷贝,这些我都会慢慢研究哒!大家也可以思考一下~
最后,欢迎点赞和收藏!!错误之处欢迎指正(`・ω・´)

Javascript 相关文章推荐
JqueryMobile动态生成listView并实现刷新的两种方法
Mar 05 Javascript
浅析jQuery中调用ajax方法时在不同浏览器中遇到的问题
Jun 11 Javascript
PHP中CURL的几个经典应用实例
Jan 23 Javascript
最简单的JavaScript图片轮播代码(两种方法)
Dec 18 Javascript
JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析
May 24 Javascript
JavaScript数据结构之二叉查找树的定义与表示方法
Apr 12 Javascript
详解angularjs中如何实现控制器和指令之间交互
May 31 Javascript
js+html5实现复制文字按钮
Jul 15 Javascript
实例学习JavaScript读取和写入cookie
Jan 29 Javascript
详解vue数组遍历方法forEach和map的原理解析和实际应用
Nov 15 Javascript
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
Mar 08 Javascript
js模拟实现烟花特效
Mar 10 Javascript
JavaScript面向对象的程序设计(犯迷糊的小羊)
May 27 #Javascript
JS面向对象的程序设计相关知识小结
May 26 #Javascript
JavaScript门道之标准库
May 26 #Javascript
javascript标准库(js的标准内置对象)总结
May 26 #Javascript
简单明了区分escape、encodeURI和encodeURIComponent
May 26 #Javascript
页面点击小红心js实现代码
May 26 #Javascript
js input输入百分号保存数据库失败的解决方法
May 26 #Javascript
You might like
深入理解PHP之require/include顺序 推荐
2011/01/02 PHP
分享下页面关键字抓取components.arrow.com站点代码
2014/01/30 PHP
php网页标题中文乱码的有效解决方法
2014/03/05 PHP
destoon之一键登录设置
2014/06/21 PHP
Destoon实现多表查询示例
2014/08/21 PHP
标准版Eclipse搭建PHP环境的详细步骤
2015/11/18 PHP
PHP中的use关键字及文件的加载详解
2016/11/28 PHP
自写的利用PDO对mysql数据库增删改查操作类
2018/02/19 PHP
JavaScript数组去重的五种方法
2015/11/05 Javascript
JS实现页面跳转参数不丢失的方法
2016/11/28 Javascript
node.js express中app.param的用法详解
2017/07/16 Javascript
jQuery实现可编辑表格并生成json结果(实例代码)
2017/07/19 jQuery
360提示[高危]使用存在漏洞的JQuery版本的解决方法
2017/10/27 jQuery
详解微信小程序审核不通过的解决方法
2018/01/17 Javascript
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
2018/10/10 jQuery
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
2019/06/17 Javascript
详解在vue-cli3.0中自定css、js和图片的打包路径
2019/08/26 Javascript
[47:04]LGD vs infamous Supermajor小组赛D组 BO3 第二场 6.3
2018/06/04 DOTA
python改变日志(logging)存放位置的示例
2014/03/27 Python
通过C++学习Python
2015/01/20 Python
Python cv2 图像自适应灰度直方图均衡化处理方法
2018/12/07 Python
python 对类的成员函数开启线程的方法
2019/01/22 Python
解决python写入带有中文的字符到文件错误的问题
2019/01/31 Python
纯CSS3实现的8种Loading动画效果
2014/07/05 HTML / CSS
新英格兰最大的特色礼品连锁店:The Paper Store
2018/07/23 全球购物
New Balance俄罗斯官方网上商店:购买运动鞋
2020/03/02 全球购物
模特职业生涯规划范文
2014/02/26 职场文书
库房管理员岗位职责
2014/03/09 职场文书
《动手做做看》教学反思
2014/04/09 职场文书
产品设计开发计划书
2014/05/07 职场文书
联片教研活动总结
2014/07/01 职场文书
大学生推广普通话演讲稿
2014/09/21 职场文书
给领导的感谢信范文
2015/01/23 职场文书
圆明园纪录片观后感
2015/06/03 职场文书
国际贸易实训总结
2015/08/03 职场文书
Windows server 2012 R2 安装IIS服务器
2022/04/29 Servers