聊聊对象深拷贝和浅拷贝

时间  2019-11-05
标签 聊聊 对象 拷贝 繁體版
原文   原文链接

写在前面

各种技术论坛关于深拷贝的博客有不少,有些写的也比我好,那为何我还要坚持写这篇博客呢,以前看到的一篇博客中有句话写的很是好javascript

学习就比如是座大山，人们沿着不一样的路爬山，分享着本身看到的风景。你不必定能看到别人看到的风景，体会到别人的心情。只有本身去爬山，才能看到不同的风景，体会才更加深入。前端

写博客的初衷也是做为本身学到的知识点的总结,同时也但愿能给点开这篇文章的人一些帮助,在前端开发的路上可以少一点坎坷多一点但愿java

基本类型的值和引用类型的值

JavaScript的变量中包含两种类型的值jquery

  1. 基本类型值 基本类型值指的是存储在栈中的一些简单的数据段
let str = 'a';
let num = 1;
复制代码

在JavaScript中基本数据类型有String,Number,Undefined,Null,Boolean，在ES6中，又定义了一种新的基本数据类型Symbol,因此一共有6种git

基本类型是按值访问的，从一个变量复制基本类型的值到另外一个变量后这2个变量的值是彻底独立的，即便一个变量改变了也不会影响到第二个变量github

let str1 = 'a';
let str2 = str1;
str2 = 'b';
console.log(str2); //'b'
console.log(str1); //'a'
复制代码
  1. 引用类型值 引用类型值是引用类型的实例，它是保存在堆内存中的一个对象，引用类型是一种数据结构，最经常使用的是Object,Array,Function类型，另外还有Date,RegExp,Error等，ES6一样也提供了Set,Map2种新的数据结构

JavaScript是如何复制引用类型的

JavaScript对于基本类型和引用类型的赋值是不同的数组

let obj1 = {a:1};
let obj2 = obj1;
obj2.a = 2;
console.log(obj1); //{a:2}
console.log(obj2); //{a:2}
复制代码

在这里只修改了obj1中的a属性，却同时改变了ob1和obj2中的a属性bash

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

变量的值也就是这个指针是存储在栈上的，当变量obj1复制变量的值给变量obj2时，obj1,obj2只是一个保存在栈中的指针,指向同一个存储在堆内存中的对象，因此当经过变量obj1操做堆内存的对象时，obj2也会一块儿改变 函数

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

再举个例子，小明(obj1变量)知道他家的地址(对象{a:1})，而后小明告诉了小刚(obj2变量)他家的地址(复制变量)，小刚这个时候就知道了小明家的地址，而后小刚去小明家把小明家的门给拆了(修改对象)，小明回家一看就会发现门没了,这时小明和小刚去这个地址的时候都会看到一个没有门的家-.-(对象的修改反映到变量)

浅拷贝

对于浅拷贝的定义能够理解为

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

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

Object.assign

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

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

let target = {};
let source = { a: { b: 2 } };
Object.assign(target, source);
console.log(target); // { a: { b: 2 } };
复制代码

首先咱们先经过 Object.assign 将 source 拷贝到 target 对象中，而后咱们尝试将 source 对象中的 b 属性修改由 2 修改成 10

let target = {};
let source = { a: { b: 2 } };
Object.assign(target, source);
console.log(target); // { a: { b: 10 } };
source.a.b = 10;
console.log(source); // { a: { b: 10 } };
console.log(target); // { a: { b: 10 } };
复制代码

经过控制台能够发现，打印结果中，三个 target 里的 b 属性都变为 10 了，证实 Object.assign 是一个浅拷贝

Object.assign 只是在根属性(对象的第一层级)建立了一个新的对象，可是对于属性的值是对象的话只会拷贝一份相同的内存地址

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

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

能够这样理解，Object.assign 会从左往右遍历源对象(sources)的全部属性，而后用 = 赋值到目标对象(target)

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

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

题外话: 在Object.assgin中target,source参数若是是基本数据类型会被包装成一个基本包装类型,更多介绍请参考MDN

扩展运算符

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

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

let obj = {a:1,b:{c:1}}
let 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
复制代码

Array.prototype.concat

对于数组的concat方法其实也是浅拷贝,因此链接一个含有引用类型的数组须要注意修改原数组中的元素的属性会反映到链接后的数组

深拷贝

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

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

一个简单的深拷贝

let obj1 = {
    a: {
        b: 1
    },
    c: 1
};
let 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字符串变成一个新的对象

let obj1 = {
    a:1,
    b:[1,2,3]
}
let str = JSON.stringify(obj1)
let 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)
}
let obj1 = new Obj();
Object.defineProperty(obj1,'innumerable',{
    enumerable:false,
    value:'innumerable'
})
console.log('obj1',obj1);
let str = JSON.stringify(obj1);
let obj2 = JSON.parse(str);
console.log('obj2',obj2);
复制代码

打印出来的结果以下

能够看到除了Object对象和数组其余基本都和原来的不同，obj1的constructor是Obj构造函数,而obj2的constructor指向了Object,对于循环引用则是直接报错了

虽然说经过JSON.stringify()方法深拷贝对象也有不少没法实现的功能，可是对于平常的开发需求(对象和数组)，使用这种方法是最简单和快捷的

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

1.lodash

2.jQuery

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

本身来实现一个深拷贝函数

递归

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

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

可是还有不少问题

  • 首先这个deepClone函数并不能复制不可枚举的属性以及Symbol类型
  • 这里只是针对Object引用类型的值作的循环迭代，而对于Array,Date,RegExp,Error,Function引用类型没法正确拷贝
  • 对象成环，即循环引用 (例如：obj1.a = obj)

本人总结的深拷贝的方法

看过不少关于深拷贝的博客，本人总结出了一个可以深拷贝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. 利用WeakMap类型做为哈希表,WeakMap由于是弱引用的能够有效的防止内存泄露,做为检测循环引用颇有帮助,若是存在循环引用直接返回WeakMap存储的值

这里我用全等判断打印了2个对象的属性是否相等,经过打印的结果能够看到,虽然值是同样的,可是在内存中是两个彻底独立的对象

上述的深拷贝函数中Null和Function类型引用的仍是同一个对象,由于deepClone函数对于对象的值是函数或者null时直接返回,这里没有深拷贝函数,若是须要深拷贝一个函数,能够考虑使用Function构造函数或者eval?这里还有待研究

总结

  1. 封装的deepClone方法虽然能实现对ECMAScript原生引用类型的拷贝,可是对于对象来讲范围太广了,仍有不少没法准确拷贝的(好比DOM节点),可是在平常开发中通常并不须要拷贝不少特殊的引用类型，深拷贝对象使用JSON.stringify依然是最方便的方法之一（固然也须要了解JSON.stringify的缺点）

  2. 实现一个完整的深拷贝是很是复杂的,须要考虑到不少边界状况,这里我也只是对部分的原生的构造函数进行了深拷贝,对于特殊的引用类型有拷贝需求的话,建议仍是借助第三方完整的库

  3. 对于深刻研究深拷贝的原理有助于理解JavaScript引用类型的特色，以及遇到相关特殊的问题也能迎刃而解，对于提升JavaScript的基础仍是颇有帮助的~~~

感谢观看

参考资料

深刻JS深拷贝对象

JavaScript高级程序设计第三版

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程