Javascript中的浅拷贝和深拷贝

Posted 2020-10-05

很多开发语言中都有浅拷贝和深拷贝的说法，这里简单区分一下它们在javascript中的区别，以及jQuery中深拷贝的实现。

在谈浅拷贝和深拷贝之前，先要屡清楚Javascript中的按值访问和按引用访问这两个概念。

按值访问是针对基本类型（string、number、boolean、null、undefined）。基本类型以值的形式被存放在栈内存中，我们通过变量操作的是栈内存中实际的值。

按引用访问时针对引用类型（Object、Array、Date、RegExp、Function）。引用类型以对象的形式被存放在堆内存中，我们通过变量操作的堆内存中对象的引用，也就是说，变量中保存的是一个指针，指向内存中的某个位置。

--------------------------分割线--------------------------

浅拷贝与深拷贝的区别是针对引用类型而言的，浅拷贝只是拷贝了对象表面上的一层，而深拷贝是拷贝了对象的所有层级。

那这两种方式，区别在哪里呢？

举个例子：

var arr = [‘a‘, ‘b‘];
var newArr = arr;  // newArr拷贝了arr

console.log(newArr);  // [‘a‘, ‘b‘]

arr.push(‘c‘);

console.log(newArr);  //[‘a‘, ‘b‘, ‘c‘]

以上代码是一个简单的浅拷贝。

由于arr是一个数组，数组内部保存了两个string类型的值。newArr通过直接赋值得到该数组的引用，此时newArr和arr所指向的是内存中的同一个位置，所以arr的操作反应到内存中数组的改变，也就导致了newArr的改变。

下面来看看深拷贝：

var arr = [‘a‘, ‘b‘];
var newArr = [];

newArr[0] = arr[0];
newArr[1] = arr[1];

console.log(newArr);  // [‘a‘, ‘b‘]

arr.push(‘c‘);

console.log(newArr);  //[‘a‘, ‘b‘]

以上代码是一个简单的深拷贝。

我们发现此时，arr的改变并没有影响到newArr，原因就在于，这次我们是先定义了一个空数组newArr（在内存中开辟了新的位置），此时newArr与arr所指向的是内存中不同的位置，然后我们对数组中的string类型的值进行赋值操作，得到了最后的newArr。

那么，我们现实中遇到的拷贝问题不会是这简单的数组，可能会像这样：

var person1 = {
    name: ‘Mike‘,
    age: 5,
    friends: [ ‘Jack‘, ‘Candy‘ ]
};

对于这个例子，如果我们想实现深拷贝，就需要遍历person1的所有属性。由于name、age是基本类型，所以直接赋值没有问题，但是friends是数组，也就是引用类型，那么我们也需要遍历friends，万一friends数组的某个元素是引用类型，那么继续，以此类推......

所以，实现深拷贝并不是那么容易的，下面我们来看看jQuery中是如何处理的。

// 这是一个用来扩展jQuery的方法，jQuery.extend([boolean], arg1, arg2, ...)
// 第一个参数可选，表示进行浅拷贝或深拷贝，默认false
// 第二个参数是拷贝后的存放目标（后面简称拷贝目标）
// 第三个及以后的参数都是拷贝对象（后面简称拷贝对象）

jQuery.extend = jQuery.fn.extend = function () {
        var options, name, src, copy, copyIsArray, clone,
            target = arguments[0] || {},
            i = 1,
            length = arguments.length,
            deep = false;

        if (typeof target === "boolean") {
            deep = target;

            target = arguments[i] || {};
            i++;
        }

        if (typeof target !== "object" && !jQuery.isFunction(target)) {
            target = {};
        }

        if (i === length) {
            target = this;
            i--;
        }

        // 以下开始重点
        // 遍历arg2, arg3, ...

        for (; i < length; i++) {

            // 如果拷贝对象不是null，并存放到变量options中
            if ((options = arguments[i]) != null) {

                // 遍历拷贝对象的属性
                for (name in options) {
                    src = target[name]; // 拷贝目标中的相应属性值
                    copy = options[name]; // 拷贝对象中的相应属性值

                    // 防止循环引用
                    if (target === copy) {
                        continue;
                    }

                    // 如果deep(布尔参数)为true，也就是要进行深拷贝，并且拷贝对象中该属性值是数组或者对象
                    if (deep && copy && (jQuery.isPlainObject(copy) ||
                        (copyIsArray = Array.isArray(copy)))) {

                        if (copyIsArray) { // 如果该属性值是数组
                            copyIsArray = false;
                            clone = src && Array.isArray(src) ? src : []; // 拷贝目标中该属性值

                        } else { // 如果该属性值是对象
                            clone = src && jQuery.isPlainObject(src) ? src : {};
                        }

                        // 以该属性值作为拷贝对象，递归调用jQuery.extend()
                        target[name] = jQuery.extend(deep, clone, copy);

                    // 否则浅拷贝
                    } else if (copy !== undefined) {
                        target[name] = copy; // 直接赋值
                    }
                }
            }
        }

        // 返回最终的拷贝目标
        return target;
    };

 

欢迎补充和指正