JavaScript - 浅拷贝 / 深拷贝（函数封装）

电玩女神 2022-11-29 13:07 188阅读 0赞

## 浅拷贝 ##

> 仅仅复制对象的引用，而不是对象本身。

浅拷贝的实现方法比较简单，下面介绍 2 个，都可以直接使用。

**一、简单复制语句实现：**

function simpleClone(initalObj) { 
        var obj = { };
        for ( var i in initalObj) { 
            obj[i] = initalObj[i];
        }
        return obj;
    }

**二、Object.assign()：**

// Object.assign() 方法可以把任意多个的源对象自身的可枚举属性拷贝给目标对象，
    // 然后返回目标对象。但是 Object.assign() 进行的是浅拷贝，拷贝的是对象的属性的引用，
    // 而不是对象本身。
    
    // 创建对象
    var obj = {  a: { a: "hello", b: 21} }; 
    
    // 浅拷贝后赋值给变量(initalObj)
    var initalObj = Object.assign({ }, obj); 
    
    // 测试赋值
    initalObj.a.a = "changed";
    
    // 结果
    console.log(obj.a.a); // "changed"

## 深拷贝 ##

> 把复制的对象所引用的全部对象都复制一遍。

要实现深拷贝有很多办法，有最简单的 `JSON.parse()` 方法，也有常用的递归拷贝方法，和 `ES5` 中的 `Object.create()` 方法。

**一、递归拷贝方法（推荐）：**

**一、使用 JSON.parse() 方法（不推荐）：**

function deepClone(initalObj) { 
        var obj = { };
        try { 
            obj = JSON.parse(JSON.stringify(initalObj));
        }
        return obj;
    }

> Tips：这种方法简单易用，但是这种方法也有不少坏处，譬如它会抛弃对象的 `constructor`。也就是深拷贝之后，不管这个对象原来的构造函数是什么，在深拷贝之后都会变成 `Object`。这种方法能正确处理的对象只有 `Number, String, Boolean, Array` 扁平对象，即那些能够被 `json` 直接表示的数据结构。`RegExp` 对象是无法通过这种方式深拷贝。