浅拷贝和深拷贝

最新推荐文章于 2021-03-17 16:52:15 发布
最新推荐文章于 2021-03-17 16:52:15 发布
阅读量562 收藏
点赞数
分类专栏： 前端 js
原文链接：https://www.jianshu.com/p/c651aeabf582
版权
前端 同时被 2 个专栏收录
58 篇文章 0 订阅
订阅专栏
js
29 篇文章 0 订阅
订阅专栏

以前开发的时候遇到一个坑，就是对象的拷贝赋值问题，现在把它记录一下。

大致是这样子的：

var obj1 = {
    a: 1
}
var obj2 = obj1;
obj2.a = 2;

console.log(obj2.a);  // 2
console.log(obj1.a);  // 2

发现当我改变obj2.a值的时候，obj1.a值也相应的改变了。为什么会这样子呢？

这就需要我们理解javascript的引用类型。

引用类型的值

引用类型值是引用类型的实例，它是保存在堆内存中的一个对象，引用类型是一种数据结构，最常用的是Object,Array,Function类型，另外还有Date,RegExp,Error等，ES6同样也提供了Set,Map2种新的数据结构

JavaScript是如何复制引用类型的

当变量复制引用类型值的时候，同样和基本类型值一样会将变量的值复制到新变量上，不同的是对于变量的值，它是一个指针，指向存储在堆内存中的对象（JS规定放在堆内存中的对象无法直接访问，必须要访问这个对象在堆内存中的地址，然后再按照这个地址去获得这个对象中的值，所以引用类型的值是按引用访问）

变量的值也就是这个指针是存储在栈上的，当变量obj1复制变量的值给变量obj2时，obj1,obj2只是一个保存在栈中的指针,指向同一个存储在堆内存中的对象，所以当通过变量obj1操作堆内存的对象时，obj2也会一起改变；

保存在于栈中的变量和堆内存中对象的关系

浅拷贝

对于浅拷贝的定义可以理解为

创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址 ，所以如果其中一个对象改变了这个地址，就会影响到另一个对象。

以下是一些JavaScript提供的浅拷贝方法

Object.assign()

ES6中拷贝对象的方法，接受的第一个参数是拷贝的目标，剩下的参数是拷贝的源对象（可以是多个）

语法：Object.assign(target, ...sources)

var target = {};
var source = {a:1};
Object.assign(target ,source);
console.log(target); //{a:1}
source.a = 2;
console.log(source); //{a:2}
console.log(target); //{a:1}

Object.assign是一个浅拷贝,它只是在根属性(对象的第一层级)创建了一个新的对象，但是对于属性的值是仍是对象的话依然是浅拷贝，

Object.assign还有一些注意的点是:

  1. 不会拷贝对象继承的属性
  2. 不可枚举的属性
  3. 属性的数据属性/访问器属性
  4. 可以拷贝Symbol类型

可以理解为Object.assign就是使用简单的=来赋值,遍历从右往左遍历源对象(sources)的所有属性用 = 赋值到目标对象(target)上

var obj1 = {
    a:{
        b:1
    },
    sym:Symbol(1)
};
Object.defineProperty(obj1,'innumerable',{
    value:'不可枚举属性',
    enumerable:false
});
var obj2 = {};
Object.assign(obj2,obj1)
obj1.a.b = 2;
console.log('obj1',obj1); 
console.log('obj2',obj2);

可以看到Symbol类型可以正确拷贝，但是不可枚举的属性被忽略了并且改变了obj1.a.b的值，obj2.a.b的值也会跟着改变，说明依旧存在访问的是堆内存中同一个对象的问题

扩展运算符

利用扩展运算符可以在构造字面量对象时,进行克隆或者属性拷贝

语法：var cloneObj = { ...obj };

var obj = {a:1,b:{c:1}}
var obj2 = {...obj};
obj.a=2;
console.log(obj); //{a:2,b:{c:1}}
console.log(obj2); //{a:1,b:{c:1}}

obj.b.c = 2;
console.log(obj); //{a:2,b:{c:2}}
console.log(obj2); //{a:1,b:{c:2}}

扩展运算符Object.assign()有同样的缺陷，对于值是对象的属性无法完全拷贝成2个不同对象,但是如果属性都是基本类型的值的话,使用扩展运算符更加方便

Array.prototype.slice()

slice() 方法返回一个新的数组对象，这一对象是一个由 begin和 end（不包括end）决定的原数组的浅拷贝。原始数组不会被改变。

语法: arr.slice(begin, end);

在ES6以前,没有剩余运算符,Array.from的时候可以用 Array.prototype.slice将arguments类数组转为真正的数组,它返回一个浅拷贝后的的新数组

Array.prototype.slice.call({0: "aaa", length: 1}) //["aaa"]

let arr = [1,2,3,4]
console.log(arr.slice() === arr); //false

深拷贝

浅拷贝只在根属性上在堆内存中创建了一个新的的对象，复制了基本类型的值,但是复杂数据类型也就是对象则是拷贝相同的地址，而深拷贝则是对于复杂数据类型在堆内存中开辟了一块内存地址用于存放复制的对象并且把原有的对象复制过来，这2个对象是相互独立的,也就是2个不同的地址

将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象,且修改新对象不会影响原对象

一个简单的深拷贝

var obj1 = {
    a: {
        b: 1
    },
    c: 1
};
var obj2 = {};

obj2.a = {}
obj2.c = obj1.c
obj2.a.b = obj1.a.b;
console.log(obj1); //{a:{b:1},c:1};
console.log(obj2); //{a:{b:1},c:1};
obj1.a.b = 2;
console.log(obj1); //{a:{b:2},c:1};
console.log(obj2); //{a:{b:1},c:1};

在上面的代码中，我们新建了一个obj2对象,同时根据obj1对象的a属性是一个引用类型,我们给obj2.a的值也新建一个新对象(即在内存中新开辟了一块内存地址),然后把obj1.a.b属性的值数字1复制给obj2.a.b，因为数字1是基本类型的值，所以改变obj1.a.b的值后，obj2.a不会收到影响，因为他们的引用是完全2个独立的对象,这就完成了一个简单的深拷贝

JSON.stringify()

JSON.stringify()是目前前端开发过程中最常用的深拷贝方式，原理是把一个对象序列化成为一个JSON字符串，将对象的内容转换成字符串的形式再保存在磁盘上，再用JSON.parse()反序列化将JSON字符串变成一个新的对象

 

var obj1 = {
    a:1,
    b:[1,2,3]
}
var str = JSON.stringify(obj1)
var obj2 = JSON.parse(str)
console.log(obj2); //{a:1,b:[1,2,3]}
obj1.a=2
obj1.b.push(4);
console.log(obj1); //{a:2,b:[1,2,3,4]}
console.log(obj2); //{a:1,b:[1,2,3]}

通过JSON.stringify实现深拷贝有几点要注意

  1. 拷贝的对象的值中如果有函数,undefined,symbol则经过JSON.stringify()序列化后的JSON字符串中这个键值对会消失
  2. 无法拷贝不可枚举的属性，无法拷贝对象的原型链
  3. 拷贝Date引用类型会变成字符串
  4. 拷贝RegExp引用类型会变成空对象
  5. 对象中含有NaN、Infinity和-Infinity，则序列化的结果会变成null
  6. 无法拷贝对象的循环应用(即obj[key] = obj)
function Obj() {
    this.func = function () {
        alert(1) 
    };
    this.obj = {a:1};
    this.arr = [1,2,3];
    this.und = undefined;
    this.reg = /123/;
    this.date = new Date(0);
    this.NaN = NaN
    this.infinity = Infinity
    this.sym = Symbol(1)
}
var obj1 = new Obj();
Object.defineProperty(obj1,'innumerable',{
    enumerable:false,
    value:'innumerable'
})
console.log('obj1',obj1);
var str = JSON.stringify(obj1);
var obj2 = JSON.parse(str);
console.log('obj2',obj2);

打印出来的结果如下

image

可以看到除了Object对象和数组其他基本都和原来的不一样，obj1的constructor是Obj(),而obj2的constructor指向了Object()，而对于循环引用则是直接报错了

虽说通过JSON.stringify()方法深拷贝对象也有很多无法实现的功能，但是对于日常的开发需求(对象和数组)，使用这种方法是最简单和快捷的

使用第三方库实现对象的深拷贝

1.lodash

2.jQuery

以上2个第三方的库都很好的封装的深拷贝的方法，有兴趣的同学可以去深入研究一下

自己来实现一个深拷贝函数

递归

这里简单封装了一个deepClone的函数，for in遍历传入参数的值，如果值是引用类型则再次调用deepClone函数，并且传入第一次调用deepClone参数的值作为第二次调用deepClone的参数，如果不是引用类型就直接复制

var obj1 = {
    a:{
        b:1
    }
};
function deepClone(obj) {
    var cloneObj = {}; //在堆内存中新建一个对象
    for(var key in obj){ //遍历参数的键
       if(typeof obj[key] ==='object'){ 
          cloneObj[key] = deepClone(obj[key]) //值是对象就再次调用函数
       }else{
           cloneObj[key] = obj[key] //基本类型直接复制值
       }
    }
    return cloneObj 
}
var obj2 = deepClone(obj1);
obj1.a.b = 2;
console.log(obj2); //{a:{b:1}}

但是还有很多问题

  • 首先这个deepClone函数并不能复制不可枚举的属性以及Symbol类型
  • 这里只是针对Object引用类型的值做的循环迭代，而对于Array,Date,RegExp,Error,Function引用类型无法正确拷贝
  • 对象循环引用成环了的情况

本人总结的深拷贝的方法

看过很多关于深拷贝的博客，本人总结出了一个能够深拷贝ECMAScript的原生引用类型的方法

const isComplexDataType = obj => (typeof obj === 'object' || typeof obj === 'function') && (obj !== null)

const deepClone = function (obj, hash = new WeakMap()) {

    if (obj.constructor === Date) return new Date(obj);   //日期对象就返回一个新的日期对象
    if (obj.constructor === RegExp) return new RegExp(obj);  //正则对象就返回一个新的正则对象

    //如果成环了,参数obj = obj.loop = 最初的obj 会在WeakMap中找到第一次放入的obj提前返回第一次放入WeakMap的cloneObj
    if (hash.has(obj)) return hash.get(obj)

    let allDesc = Object.getOwnPropertyDescriptors(obj);     //遍历传入参数所有键的特性
    let cloneObj = Object.create(Object.getPrototypeOf(obj), allDesc); //继承原型链

    hash.set(obj, cloneObj)

    for (let key of Reflect.ownKeys(obj)) {   //Reflect.ownKeys(obj)可以拷贝不可枚举属性和符号类型
        // 如果值是引用类型(非函数)则递归调用deepClone
        cloneObj[key] =
            (isComplexDataType(obj[key]) && typeof obj[key] !== 'function') ?
                deepClone(obj[key], hash) : obj[key];
    }
    return cloneObj;
};


let obj = {
    num: 0,
    str: '',
    boolean: true,
    unf: undefined,
    nul: null,
    obj: {
        name: '我是一个对象',
        id: 1
    },
    arr: [0, 1, 2],
    func: function () {
        console.log('我是一个函数')
    },
    date: new Date(0),
    reg: new RegExp('/我是一个正则/ig'),
    [Symbol('1')]: 1,
};

Object.defineProperty(obj, 'innumerable', {
    enumerable: false,
    value: '不可枚举属性'
});

obj = Object.create(obj, Object.getOwnPropertyDescriptors(obj))

obj.loop = obj

let cloneObj = deepClone(obj);

console.log('obj', obj);
console.log('cloneObj', cloneObj);


for (let key of Object.keys(cloneObj)) {
    if (typeof cloneObj[key] === 'object' || typeof cloneObj[key] === 'function') {
        console.log(`${key}相同吗？ `, cloneObj[key] === obj[key])
    }
}

这个函数有几个要点

  1. 利用Reflect.ownKeys()方法,能够遍历对象的不可枚举属性和Symbol类型
  2. 当参数为Date,RegExp类型则直接生成一个新的实例
  3. 使用Object.getOwnPropertyDescriptors()获得对象的所有属性对应的特性,结合Object.create()创建一个新对象继承传入原对象的原型链
  4. 利用WeekMap()类型作为哈希表,WeekMap()因为是弱引用的可以有效的防止内存泄露,作为检测循环引用很有帮助,如果存在循环引用直接返回WeekMap()存储的值

这里我用全等判断打印了2个对象的属性是否相等,通过打印的结果可以看到,虽然值是一样的,但是在内存中是两个完全独立的对象

 

上述的深拷贝函数中Null和Function类型引用的还是同一个对象,因为deepClone函数对于对象的值是函数或者null时直接返回,这里没有深拷贝函数,如果需要深拷贝一个函数,可以考虑使用Function构造函数或者eval?这里还有待研究

 

哈哈哦0
关注
专栏目录
【前端基础】——浅拷贝和深拷贝
m0_50785976的博客
11-03 565
浅拷贝和深拷贝
图解：python中的浅拷贝和深拷贝
12-21
在Python编程语言中，了解如何正确处理对象的拷贝至关重要，特别是浅拷贝和深拷贝的概念。浅拷贝和深拷贝主要涉及到列表、元组等可变对象的复制，以及这些对象内部包含的不可变和可变对象的情况。 浅拷贝（Shallow ...
“浅拷贝”与“深拷贝”
一叶扁舟
07-05 2万+
        C++中对象的复制就如同“克隆”，用一个已有的对象快速地复制出多个完全相同的对象。一般而言，以下三种情况都会使用到对象的复制：（1）建立一个新对象，并用另一个同类的已有对象对新对象进行初始化，例如：class Rect{private: int width; int height;};Rect rect1;Rect rect2(rect1
js浅拷贝与深拷贝
weixin_44347685的博客
03-17 190
概念 浅拷贝：只拷贝最外面一层的数据；更深层次的对象，只拷贝引用。 深拷贝：拷贝多层数据；每一层级别的数据都会拷贝。 总结： 拷贝引用的时候，是属于传址，而非传值。关于传值和传址的区别，是很基础的内容，详见《JavaScript 基础/对象简介.md》这篇文章。 深拷贝会把对象里所有的数据重新复制到新的内存空间，是最彻底的拷贝。 浅拷贝的实现方式 用 for in 实现浅拷贝（比较繁琐） const obj1 = { name: 'qianguyihao', age: 28,
浅拷贝与深拷贝
weixin_33763244的博客
08-01 138
浅拷贝与深拷贝 一、数据类型 数据分为基本数据类型(String, Number, boolean, Null, Undefined，Symbol)和对象数据类型。 基本数据类型的特点：直接存储在栈(stack)中的数据 对象数据类型的特点：存储的是该对象在栈中引用，真实的数据存放在堆内存里 二、浅拷贝与深拷贝 深拷贝和浅拷贝是只针对Object和Array这样的对象数据类...
浅拷贝、深拷贝
热门推荐
Addisoni
10-31 4万+
深拷贝和浅拷贝 　　这两个概念是在项目中比较常见的，在很多时候，都会遇到拷贝的问题，我们总是需要将一个对象赋值到另一个对象上，但可能会在改变新赋值对象的时候，忽略掉我是否之后还需要用到原来的对象，那么就会出现当改变新赋值对象的某一个属性时，也同时改变了原对象，此时我们就需要用到拷贝这个概念了。 深拷贝和浅拷贝的区别 1.浅拷贝： 将原对象或原数组的引用直接赋...
java深入理解浅拷贝和深拷贝
12-21
在Java编程中，深入理解浅拷贝和深拷贝是非常重要的概念，特别是在处理对象复制时。浅拷贝和深拷贝的区别在于复制对象时对内存中数据的处理方式。 浅拷贝（Shallow Copy）指的是创建一个新的对象，该对象与原对象...
JS赋值、浅拷贝和深拷贝（数组和对象的深浅拷贝）实例详解
11-20
深拷贝和浅拷贝是只针对Object和Array这样的引用数据类型的。  浅拷贝 只是拷贝了基本类型的数据，而引用类型数据，复制后也是会发生引用，我们把这种拷贝叫做浅拷贝（浅复制） 浅拷贝只复制指向某个对象的指针，而...
浅拷贝和深拷贝深入理解(shallow copy VS deep copy)
12-25
引言C#中有两种类型变量，一种 是值类型变量，一种是引用类型变量,对于值类型变量，深拷贝和前拷贝都是通过赋值操作符号(=)实现，其效果一致，将对象中的值类型的字段拷贝到新的对象中.这个很容易理解。 本文重点...
JS浅拷贝和深拷贝原理与实现方法分析
12-11
JavaScript中的浅拷贝和深拷贝是两种不同的对象复制方式，它们在处理复杂对象时有着显著的区别。在JavaScript中，对象是引用类型，因此当一个对象被复制时，如果不进行特殊处理，复制的只是指向原对象的引用，而非...
深拷贝和浅拷贝的区别和与原理
涂涂
05-25 6145
一、基本类型和引用类型 https://blog.csdn.net/qq_34645412/article/details/104840390 二、浅拷贝和深拷贝 如图所示： obj2是对obj1的浅拷贝，obj2新建了一个对象，但是obj2对象复制的是obj1的指针，也就是obj1的堆内存地址，而不是复制对象本身。obj1和obj2是共用了内存地址的。 obj3是对obj1的深拷贝，obj3和obj1不共享内存 因此： 浅拷贝只复制指向某个对象的指针，而不复制对象本身，相当于是新建了一个
JS 中赋值，浅拷贝，深拷贝的区别
weixin_47074432的博客
01-21 803
首先我们需要掌握一些基本的知识点： 1、在JS中，我们知道数据类型分为 基本数据类型：Number，String，Undefined，Null，Boolean，Symbol，BigInt 引用数据类型：（object) 分为 =》Array, function, date, RegExp 2、JS中，栈（stack）和 堆（heap）: 栈（stack）为自动分配的内存空间，它由系统自动释放。 堆（heap）为动态分配内存空间，大小不定，不会自动释放。 基本数据类型都是保存在栈当中。 引用类型都是保存在堆
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值