您的位置: 首页  >  文章  >  深入理解浅拷贝与深拷贝

深入理解浅拷贝与深拷贝

分类: 文章 • 2025-02-06 10:17:58

浅拷贝与深拷贝这是很多人都会混淆的概念，包括我自己。写这篇博客的目的：一、让自己能对浅拷贝与深拷贝有一个统一的认识；二、及时分享，让更多的人能够深入认识

基础

  1. 前提
    最近接触到immutable.js，看了一些文章，发现immutable.js解决的问题：让数据持久化(Persistent Data Structure)。如何让数据保持不变呢，我们值得沉思。。。
  • 传统的让数据持久化方法
  1. 扩展运算符 …
  2. object.asign
  3. deepCopy(基本类型)
  4. …
  • 自从immutable.js出现，解决此问题，自身拥有很多API

学到这里就想把浅拷贝与深拷贝温习一下，下面进入正题
2. 定义
浅拷贝(shallowCopy)：只拷贝一层，针对引用类型：把引用地址拷贝；针对基本类型：把值进行拷贝
深拷贝(deepCopy)：深层次的拷贝，只针对于引用类型（多层拷贝）
3. js中基本数据类型与引用数据类型
基本数据类型：Number、String、Boolean
引用数据类型(复合数据类型)：Object
特殊类型： Null、 Undefined
es6： Symbol（ES6）
Object：Object、Function、Array、Date
4.类型检测
typeof:判断是哪一种类型，当然有一些特殊的要格外注意一下
深入理解浅拷贝与深拷贝
typeof null === ‘object’
深入理解浅拷贝与深拷贝
instanceof是判断该对象是否是此对象的实例对象
eg: String instanceof Object

  1. 栈内存与堆内存

栈内存(stack)：存放基本数据类型，大小固定，可直接访问，可自动释放内存
堆内存（heap）：存放引用数据类型，大小不固定，不可直接访问（通过地址），不能自动释放内存

let a = 10;
let b = a;
b = 20;
console.log(a,b) // 10 ,20

const arr = [1,2,3,4]
let newArr = arr; //俩共用内存空间
arr[1] = 20
console.log(arr, newArr)
深入理解浅拷贝与深拷贝
深入理解浅拷贝与深拷贝
存放在堆中的内容不能用完不能及时释放目前解决办法，将变量置为null

浅拷贝

  1. 传统方式一
function simpleClone(initalObj) {
    var obj = {};
    for ( var i in initalObj) {
        obj[i] = initalObj[i];
    }
    return obj;
}
var obj = {
    a: "hello",
    b:{
        a: "world",
        b: 21
    },
    c:["Bob", "Tom", "Jenny"],
    d:[function aa() {
        alert("hello world");
    }]
};
// 拷贝一层
const cloneObj = simpleClone(obj)
cloneObj.a = 'liuting' //cloneObj.a是基本类型（一层拷贝）：浅拷贝，拷贝的是值，存放在栈中
cloneObj.b.a = 'newWorld' //cloneObj.b是复合类型，cloneObj.b.a是基本类型：这里是深拷贝（拷贝多层），拷贝的是值，存放在栈中
// cloneObj.d[0] = '123' //cloneObj.d是复合数据类型,拷贝的是引用，存放在堆中
cloneObj.d = '123' //拷贝了一层，而共享地址是针对子元素
console.log('obj', obj)
console.log('cloneObj', cloneObj)

深入理解浅拷贝与深拷贝
2.object.assign,扩展运算符…
ES6中的Object.assign方法，Object.assign是ES6的新函数。Object.assign() 方法可以把任意多个的源对象自身的可枚举属性拷贝给目标对象，然后返回目标对象。但是 Object.assign() 进行的是浅拷贝，拷贝的是对象的属性的引用，而不是对象本身。
Object.assign(target, …sources)
参数：

target：目标对象。
sources：任意多个源对象。
返回值：目标对象会被返回。

var obj1 = {
  a: 'hello',
  b: {
    a: 'hello',
    b: 21
  }
}
// var cloneObj1 = Object.assign({},obj1);
var cloneObj1 = {...obj1}
cloneObj1.a = 'world';
cloneObj1.b.a = 'world';
console.log(obj1)
console.log(cloneObj1)

深入理解浅拷贝与深拷贝

深拷贝

1、手动复制

把一个对象的属性复制给另一个对象的属性

var obj1 = { a: 10, b: 20, c: 30 };
var obj2 = { a: obj1.a, b: obj1.b, c: obj1.c };
obj2.b = 100;
console.log(obj1);
// { a: 10, b: 20, c: 30 } <-- 沒被改到
console.log(obj2);
// { a: 10, b: 100, c: 30 }

但这样很麻烦，要一个一个自己复制；而且这样的本质也不能算是 Deep Copy，因为对象里面也可能回事对象，如像下面这个状况：

var obj1 = { body: { a: 10 } };
var obj2 = { body: obj1.body };
obj2.body.a = 20;
console.log(obj1);
// { body: { a: 20 } } <-- 被改到了
console.log(obj2);
// { body: { a: 20 } }
console.log(obj1 === obj2);
// false
console.log(obj1.body === obj2.body);
// true

虽然obj1跟obj2是不同对象，但他们会共享同一个obj1.body，所以修改obj2.body.a时也会修改到旧的。
2、对象只有一层的话可以使用上面的：Object.assign()函数
Object.assign({}, obj1)的意思是先建立一个空对象{}，接着把obj1中所有的属性复制过去，所以obj2会长得跟obj1一样，这时候再修改obj2.b也不会影响obj1。

因为Object.assign跟我们手动复制的效果相同，所以一样只能处理深度只有一层的对象，没办法做到真正的 Deep Copy。不过如果要复制的对象只有一层的话可以考虑使用它。
3. 转成 JSON 再转回来
用JSON.stringify把对象转成字符串，再用JSON.parse把字符串转成新的对象。

var obj1 = { body: { a: 10 } };
var obj2 = JSON.parse(JSON.stringify(obj1));
obj2.body.a = 20;
console.log(obj1);
// { body: { a: 10 } } <-- 沒被改到
console.log(obj2);
// { body: { a: 20 } }
console.log(obj1 === obj2);
// false
console.log(obj1.body === obj2.body);
// false

这样做是真正的Deep Copy，这种方法简单易用。

但是这种方法也有不少坏处，譬如它会抛弃对象的constructor。也就是深拷贝之后，不管这个对象原来的构造函数是什么，在深拷贝之后都会变成Object。

这种方法能正确处理的对象只有 Number, String, Boolean, Array, 扁平对象，即那些能够被 json 直接表示的数据结构。RegExp对象是无法通过这种方式深拷贝。

也就是说，只有可以转成JSON格式的对象才可以这样用，像function没办法转成JSON。

var obj1 = { fun: function(){ console.log(123) } };
var obj2 = JSON.parse(JSON.stringify(obj1));
console.log(typeof obj1.fun);
// 'function'
console.log(typeof obj2.fun);
// 'undefined' <-- 没复制

要复制的function会直接消失，所以这个方法只能用在单纯只有数据的对象。
4. 递归拷贝

function deepClone(initalObj, finalObj) {    
  var obj = finalObj || {};    
  for (var i in initalObj) {        
    if (typeof initalObj[i] === 'object') {
      obj[i] = (initalObj[i].constructor === Array) ? [] : {};            
      arguments.callee(initalObj[i], obj[i]);
    } else {
      obj[i] = initalObj[i];
    }
  }    
  return obj;
}
var str = {};
var obj = { a: {a: "hello", b: 21} };
deepClone(obj, str);
console.log(str.a);

上述代码确实可以实现深拷贝。但是当遇到两个互相引用的对象，会出现死循环的情况。

为了避免相互引用的对象导致死循环的情况，则应该在遍历的时候判断是否相互引用对象，如果是则退出循环。

改进版代码如下：

function deepClone(initalObj, finalObj) {    
  var obj = finalObj || {};    
  for (var i in initalObj) {        
    var prop = initalObj[i];        // 避免相互引用对象导致死循环，如initalObj.a = initalObj的情况
    if(prop === obj) {            
      continue;
    }        
    if (typeof prop === 'object') {
      obj[i] = (prop.constructor === Array) ? [] : {};            
      arguments.callee(prop, obj[i]);
    } else {
      obj[i] = prop;
    }
  }    
  return obj;
}
var str = {};
var obj = { a: {a: "hello", b: 21} };
deepClone(obj, str);
console.log(str.a);
  1. 使用Object.create()方法
    直接使用var newObj = Object.create(oldObj)，可以达到深拷贝的效果
function deepClone(initalObj, finalObj) {    
  var obj = finalObj || {};    
  for (var i in initalObj) {        
    var prop = initalObj[i];        // 避免相互引用对象导致死循环，如initalObj.a = initalObj的情况
    if(prop === obj) {            
      continue;
    }        
    if (typeof prop === 'object') {
      obj[i] = (prop.constructor === Array) ? [] : Object.create(prop);
    } else {
      obj[i] = prop;
    }
  }    
  return obj;
}

相关推荐