JavaScript深拷贝实现

最新推荐文章于 2025-09-09 16:55:30 发布

weixin_34283445

最新推荐文章于 2025-09-09 16:55:30 发布

阅读量83

点赞数

CC 4.0 BY-SA版权

文章标签： javascript json ViewUI

原文链接：https://juejin.im/post/5a3200fcf265da431e16c75a

本文详细解释了浅拷贝与深拷贝的概念，并通过实例代码展示了两种拷贝方式的区别。此外，还介绍了几种实现深拷贝的方法，包括使用jQuery的$.extend()方法和利用JSON对象的parse及stringify方法。

###什么是浅拷贝，什么是深拷贝？什么是浅拷贝关于浅拷贝的概念，我在网上看到一种说法，直接上代码。

1.var person = {name: "Jason", age: 18, car: {brand: "Ferrari", type: "430"}};
2.var person1 = person; 		//他们认为这是浅拷贝
复制代码

但是我个人认为，上面这个根本不涉及拷贝，只是一个简单的引用赋值。以我的理解，浅拷贝应该是不考虑对象的引用类型的属性，只对当前对象的所有成员进行拷贝，代码如下：

function copy(obj){
	var objCopy = {};
	for(var key in obj){
		objCopy[key] = obj[key];
	}
	return objCopy;
}
var person = {name: "Jason", age: 18, car: {brand: "Ferrari", type: "430"}};
var personCopy = copy(person);
复制代码

上面这段代码中，person对象拥有两个基本类型的属性name和age，一个引用类型的属性car，当使用如上方法进行拷贝的时候，name和age属性会被正常的拷贝，但是car属性，只会进行引用的拷贝，这样会导致拷贝出来的对象personCopy和person会共用一个car对象。这样就是所谓的浅拷贝。 ###什么是深拷贝深拷贝的就是在拷贝的时候，需要将当前要拷贝的对象内的所有引用类型的属性进行完整的拷贝，也就是说拷贝出来的对象和原对象之间没有任何数据是共享的，所有的东西都是自己独占的一份。 ###如何实现深拷贝实现深拷贝需要考虑如下几个因素：

传入的对象是使用对象字面量{}创建的对象还是由构造函数生成的对象-
如果对象是由构造函数创建出来的，那么是否要拷贝原型链上的属性
如果要拷贝原型链上的属性，那么如果原型链上存在多个同名的属性，保留哪个
处理循环引用的问题 ###第三方库实现深拷贝我们可以通过$.extend()方法来完成深复制。值得庆幸的是，我们在jQuery中可以通过添加一个参数来实现递归extend。调用$.extend(true, {}, ...)就可以实现深复制，参考下面的例子:

var x = {
    a: 1,
    b: { f: { g: 1 } },
    c: [ 1, 2, 3 ]
};
var y = $.extend({}, x),          //shallow copy
    z = $.extend(true, {}, x);    //deep copy
y.b.f === x.b.f       // true
z.b.f === x.b.f       // false
复制代码

但是jQuery的这个$.extend()方法，有弊端，什么弊端呢？我们看下面的例子：

var objA = {};
var objB = {};
objA.b = objB;
objB.a = objA;
$.extend(true,{},a);
//这个时候就出现异常了
//Uncaught RangeError: Maximum call stack size exceeded(…)
复制代码

也就是说，jQuery中的$.extend()并没有处理循环引用的问题。 ###使用JSON对象实现深拷贝使用JSON全局对象的parse和stringify方法来实现深复制也算是一个简单讨巧的方法。

function jsonClone(obj) {
    return JSON.parse(JSON.stringify(obj));
}
var clone = jsonClone({ a:1 });
复制代码