JavaScript 深拷贝和浅拷贝

一、前言

hello，大家好~ ，本文主要介绍在 JavaScript 中什么是深拷贝和浅拷贝，以及如何实现一个对象的深拷贝。

二、随处可见的 “赋值”

在 JavaScript 中我们最常见的操作之一是将一个变量的值赋值给另一个变量，这个过程我们也可以称为 “拷贝” 一份变量的值给另一个变量。

2.1 基本数据类型的赋值操作

在涉及到基本数据类型（string、Boolean、number...）赋值操作的时候，原始变量值被复制给另外一个变量。我们来考虑下下面这段代码：我们将值为 10 的变量 x 赋值给变量 y，此时 x 和 y 已经失去“联系”了，所以改变 x 的值不会影响 y 的值，最后输出 20 和 10。

<script>
    let x = 10;
    let y = x;
    x += 10;
    console.log(x, y); // 20 10
</script>

2.2 引用数据类型的赋值操作

与基本数据类型赋值相反，引用数据类型（Object、Array...）在赋值的时候传递的只是一个 引用 （原始值和拷贝赋值后的值指向同一块内存空间） ，所以当被复制出来的对象值改变的时候，原始的对象值也会跟着改变，这种现象被称为 浅拷贝 。

对象赋值案例: 将 user 对象赋值给 user2 变量，修改 user2 属性值后 user 属性值也会跟着变，两者的值始终保持同步，这便是浅拷贝带来的 副作用 ，拷贝出来的值和原始值始终保持着关联。基本数据类型的赋值没有这种现象，所以说 浅拷贝 和 深拷贝 是相对引用数据类型而言的。

<script>
    let user = {
        name: 'zjl712',
        age: 18,
        local: 'shanghai'
    }
    let user2 = user;
    user2.name = 'zjl';
    console.log('user:', user, 'user2:', user2);
</script>

三、实现对象的深拷贝

通过以上的介绍我们知道什么是 浅拷贝 以及浅拷贝带来的 副作用 ，为了消除这种“副作用”我们需要对对象进行 深拷贝 。下面将介绍一些对象拷贝的方法，它们各有优缺点。

• "=" 号直接赋值

通过等号（=）将原始值赋值给一个新的值，优点是简便快捷，缺点 是只能进行 浅拷贝

let obj = {name:'zjl712', age:18}
let obj2 = obj;
console.log(obj == obj2) //true

• Object.assign()

通过 Object 的 assign 方法可以对对象进行深拷贝，缺点是不能对含有多层嵌套结构的对象进行深拷贝。

深拷贝单层结构的对象，改变拷贝对象的值不会改变原始对象的值。

<script>
    let obj = {
        name: 'zjl712', 
        age: 18, 
        getName:function(){
            return this.name
        }
    }
    let obj2 = Object.assign({}, obj)
    console.log(obj == obj2); // false
    obj2.name = 'zjl'
    console.log(obj, obj2);
</script>

尝试拷贝多层嵌套结构对象，改变拷贝对象内嵌套的对象值（obj2.local.nickname）后,原始对象嵌套的值也会跟着改变。改变拷贝对象非嵌套的值，原始对象的值不会跟着变。所以 Object.assign() 只能实现部分深拷贝。

<script>
    let obj = {
        name: 'zjl712', 
        age: 18, 
        getName:function(){
            return this.name
        },
        local: {
            name: 'shanghai',
            nickname: 'modu',
        }
    }
    let obj2 = Object.assign({}, obj)
    console.log(obj == obj2); // false
    obj2.local.nickname = '魔都'
    obj2.name = 'zjl'
    console.log(obj, obj2);
    console.log(obj.local == obj2.local) // true
</script>

• JSON.stringify() 和 JSON.parse()

JSON.stringify() 方法接收一个对象作为参数，将对象转为 JSON 字符串。JSON.parse() 接收一个 JSON 字符串，将该字符串转为一个对象。结合这两个方法可以对一个对象进行深拷贝。

结合以上两个方法对对象进行深拷贝

let obj = {name: 'zjl712',age: 18}
let obj2 = JSON.parse(JSON.stringify(obj))
console.log(obj == obj2); // false
obj2.name = 'zjl'
console.log(obj, obj2);

当对象属性值含有 函数（function） 时,且含有嵌套对象时。拷贝的值 属性值为函数的属性会丢失 。优点是能对多层嵌套对象进行深拷贝。

let obj = {
    name: 'zjl712', 
    age: 18, 
    getName:function(){
        return this.name
    },
    local: {
        name: 'shanghai',
        nickname: 'modu',
    }
}
let obj2 = JSON.parse(JSON.stringify(obj))
console.log(obj == obj2); // false
obj2.local.nickname = '魔都'
obj2.name = 'zjl'
console.log(obj, obj2);
console.log(obj.local == obj2.local) // false

• 对象扩展符（...）

使用 ES6 的扩展操作符，使用三个点（...）将原始对象的值拷贝给另一个对象。然而三点扩展符和 Object.assign() 很相似，扩展符不能对多层嵌套对象进行深拷贝。

let obj = {
    name: 'zjl712', 
    age: 18, 
    getName:function(){
        return this.name
    },
    local: {
        name: 'shanghai',
        nickname: 'modu',
    }
}
let obj2 = {...obj}
console.log(obj == obj2); // false
obj2.local.nickname = '魔都'
obj2.name = 'zjl'
console.log(obj, obj2);

• 递归的方式实现对象的深拷贝

实现含有嵌套结构、函数对象的深拷贝以上方法都无能为力，我们可以用递归的方法完成对象的深拷贝。缺点是对复杂的对象（Buffer、Date 等实例对象）无法实现深拷贝

function myDeepClone(obj){
    let clone;
    // 排除非引用类型数据
    if(obj == null || typeof obj != 'object') return obj;
    if(Array.isArray(obj)){
        // obj 是数组
        clone = new obj.constructor(obj.length)
        obj.forEach((value, index) => {
            clone[index] = typeof value === 'object'?myDeepClone(value):value
        })
    }else{
        // 浅拷贝一份原始数据
        clone = Object.assign({}, obj)
        // 递归 clone 内的每一个属性值
        Object.keys(clone).forEach(key => {
            clone[key] = typeof obj[key] === 'object'?myDeepClone(obj[key]):obj[key]
        })
    }
    return clone;
}

以上递归代码有相似代码（两个 forEach 内的代码），可简化为以下代码：

function myDeepClone(obj){
    let clone;
    if(obj == null || typeof obj != 'object') return obj;
    clone = Object.assign({}, obj)
    Object.keys(clone).forEach(key => {
        clone[key] = typeof obj[key] === 'object'?myDeepClone(obj[key]):obj[key]
    })
    if(Array.isArray(obj)){
        clone.length = obj.length
        clone = Array.from(clone)
    }
    return clone
}

• 以上的自定义递归方法不够全面，但对于基本的对象（ {} ）和数组（ [] ）深拷贝还是够用的，要想实现复杂对象的深拷贝可以使用 lodash 的 cloneDeep 方法，这个方法实现深拷贝是比较完美的。

// 安装 lodash ：npm i lodash
// 使用
let lang = require('lodash/lang')
let clone = lang.cloneDeep(obj)