JS深拷贝、浅拷贝详解

先一句话说清楚，深拷贝、浅拷贝探讨的是嵌套对象的对象。

接着来看看深拷贝、浅拷贝的异同： 1.无论哪种拷贝,原对象和拷贝对象一定都是2个不同的对象。即：内存空间不同 2.对象中的对象，浅拷贝之后指向相同的内存地址，深拷贝之后指向不同的内存地址。

也可以理解为：深拷贝之后的两个对象，除了有相同的值之外，是两个完全不相干的对象

方法一：JSON

先来一种最简单粗暴的方法实现深拷贝：

var obj={
    value:'mao',
    color:['hei','bai','huang']
};
var obj2 = JSON.parse(JSON.stringify(obj));
console.log(obj === obj2);//false
复制代码

但这种实现方法不适用于以下两种情况： 1.对象中包含函数 2.obj2需要获取obj原型链上的属性或者方法

方法二：

浅拷贝方法实现：for in + hasOwnProperty

function shallowCopy(source){
    var target = Array.isArray(source) ? [] : {};
    for (var key in source){
        //判断是否是对象自有属性，即排除__proto__上的属性
        if(source.hasOwnProperty(key)){
            target[key] = source[key];
        }
    }
    return target;
}
复制代码

结果：

var obj={
    value:'mao',
    color:['hei','bai','huang']
};
var obj2 = shallowCopy(obj);
//无论哪种拷贝,obj和obj2一定都是2个不同的对象(内存空间不同)
console.log( obj === obj2 )// false
//浅拷贝：obj和obj2里的对象color的引用,指向的是~~~相同的内存空间~~~
console.log( obj.color=== obj2.color)// true
复制代码

深拷贝方法实现：

思路：遍历对象，判断每一项的数据类型；若不是对象，则直接赋值；若是对象，则继续调用deepCopy方法（递归）。

function deepCopy(source) {
    var target = Array.isArray(source) ? [] : {};
    for (var key in source) {
        // if (source.hasOwnProperty(key)) {
            if (typeof source[key] === 'object') {
                deepCopy(source[key])
            } else {
                target[key] = source[key];
            }
        // }
    }
    return target;
}
复制代码

结果：

var obj = {
    value: 'mao',
    color: ['hei', 'bai', 'huang']
};
var obj2 = deepCopy(obj);
console.log(obj === obj2)// false
console.log(obj.color === obj2.color)// false
复制代码

方法三：jQuery中的$.extend()

$.extend()实现的就是深拷贝、浅拷贝。 注意：$.extend()会将__proto__上的属性直接放入对象中，而不会将其放入对象的__proto__中。

转载于:https://juejin.im/post/5c10c78de51d4560f043520f