浅谈JavaScript对象的浅拷贝和深拷贝

忘是亡心i 2022-06-17 09:24 218阅读 0赞

1、浅拷贝

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

var person = {
    	name: 'Alice',
    	friends: ['Bruce', 'Cindy']
    }
    var student = {
    	id: 30
    }
    student = simpleClone(person, student);
    student.friends.push('David');
    alert(person.friends);
    function simpleClone(oldObj, newObj) {
    	var newObj = newObj || {};
    	for (var i in oldObj)
    		newObj[i] = oldObj[i];
    	return newObj;
    }

给子对象的数组类型的属性添加一个新值，父对象的该属性值也被篡改。

2、深拷贝

把复制的对象所引用的全部对象都复制一遍，能够实现真正意义上的数组和对象的拷贝。

浅拷贝的问题：如果父对象的属性值为一个数组或另一个对象，那么实际上子对象获得的只是一个内存地址，而不是对父对象的真正拷贝，因此存在父对象被篡改的可能。

解决方法：使用深拷贝。

var person = {
    	name: 'Alice',
    	friends: ['Bruce', 'Cindy']
    }
    var student = {
    	id: 30
    }
    student = deepClone(person, student);
    student.friends.push('David');
    alert(person.friends); // 'Bruce', 'Cindy'
    function deepClone(oldObj, newObj) {
    	var newObj = newObj || {};
    	newObj = JSON.parse(JSON.stringify(oldObj));
    	return newObj;
    }

3、实现深拷贝的方法

1) 方法1：使用JSON.parse()方法

function deepClone(oldObj, newObj) {
    	var newObj = newObj || {};
    	newObj = JSON.parse(JSON.stringify(oldObj));
    	return newObj;
    }

优点：

简单易用。

缺点：

①　会抛弃对象的constructor，即，深拷贝后，不管该对象原来的构造函数是什么，在深拷贝之后都会变成Object。

②　能正确处理的对象只有 Number, String, Boolean, Array，即那些能够被JSON直接表示的数据结构，RegExp对象等无法通过这种方式深拷贝。

2) 方法2：递归拷贝

function deepClone(oldObj, newObj) {
    	var newObj = newObj || {};
    	for (var i in oldObj) {
    		if (typeof oldObj[i] === 'object') {
    			newObj[i] = (oldObj[i].constructor === Array) ? [] : {};
    			arguments.callee(oldObj[i], newObj[i]);
    		}
    		else
    			newObj[i] = oldObj[i];
    	}
    	return newObj;
    }

问题：当遇到两个互相引用的对象，会出现死循环的情况。

解决方法：在遍历时判断两个对象是否相互引用（如oldObj.property === newObj），如果是则退出循环。

function deepClone(oldObj, newObj) {
    	var newObj = newObj || {};
    	for (var i in oldObj) {
    		var prop = oldObj[i];
    		if (prop === newObj)
              	  	continue;
    		if (typeof prop === 'object') {
    			newObj[i] = (prop.constructor === Array) ? [] : {};
    			arguments.callee(prop, newObj[i]);
    		}
    		else
    			newObj[i] = prop;
    	}
    	return newObj;
    }

3) 方法3：使用Object.create()方法

function deepClone(oldObj, newObj) {
    	var newObj = newObj || {};
    	for (var i in oldObj) {
    		var prop = oldObj[i];
    		if (prop === newObj)
                		continue;
    		if (typeof prop === 'object')
    			newObj[i] = (prop.constructor === Array) ? [] : Object.create(prop);
    		else
    			newObj[i] = prop;
    	}
    	return newObj;
    }

4）方法4：使用jQuery.extend()和jQuery.fn.extend()

请见：[http://blog.csdn.net/zhouziyu2011/article/details/60333246][http_blog.csdn.net_zhouziyu2011_article_details_60333246]

[http_blog.csdn.net_zhouziyu2011_article_details_60333246]: http://blog.csdn.net/zhouziyu2011/article/details/60333246

发表评论取消回复

表情：

评论列表（有 0 条评论，218人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript深拷贝和浅拷贝

首先我们看一下如何区分深拷贝与浅拷贝，简单点来说，就是假设B复制了A，当修改A时，看B是否会发生变化 ①如果B也跟着变了，说明这是浅拷贝，功力不够

我会带着你远行/ 2023年06月09日 15:22/ 0 赞/ 69 阅读

相关浅谈深拷贝和浅拷贝

浅谈深拷贝和浅拷贝深拷贝和浅拷贝的区别为什么要使用深拷贝？深拷贝的要求程度怎么检验深拷贝成功只对第一层级做拷贝拷贝所有层级存在大量深拷

亦凉/ 2023年02月21日 09:04/ 0 赞/ 47 阅读

相关 JavaScript对象浅拷贝和深拷贝

JavaScript对象浅拷贝和深拷贝 1. 基本概念 2. 浅拷贝 3. 深拷贝 3.1 深拷贝JSON方法 3.2 深拷贝

男娘i/ 2022年12月26日 04:43/ 0 赞/ 203 阅读

相关浅谈 javascript 深拷贝与浅拷贝

转自：[http://www.pinlue.com/article/2020/08/2603/5711149415225.html][http_www.pinlue.com_a

傷城~/ 2022年12月06日 01:08/ 0 赞/ 287 阅读

相关 javascript的深拷贝和浅拷贝

深拷贝和浅拷贝的对比这两个都是针对对象的,比如说数组，不论是深拷贝还是浅拷贝,都是复制数组。那有什么不一样呢? 深拷贝 var a1=[1,2,3,4]

我会带着你远行/ 2022年10月01日 04:58/ 0 赞/ 235 阅读

相关浅谈JavaScript对象的浅拷贝和深拷贝

1、浅拷贝仅仅复制对象的引用，而不是对象本身。 var person = { name: 'Alice', friends: ['Bruce'

忘是亡心i/ 2022年06月17日 09:24/ 0 赞/ 219 阅读

相关 JavaScript 的深拷贝和浅拷贝

关于浅拷贝，按照常理理解，以及参考其他语言，我认为浅拷贝指的是和目标对象（数组）和原始对象（数组）指向同一块内存空间。赋值操作就是这种浅拷贝。 var src = {

梦里梦外;/ 2022年06月13日 06:57/ 0 赞/ 234 阅读

相关浅谈：Python浅拷贝、深拷贝

前言：很多同学在学习深拷贝、浅拷贝对二者不是很清楚，下面是我对深拷贝、浅拷贝的认识，希望可以帮助到你理解。首先我们要知道一点，在Python中没有赋值这一概念，可以说Pyt

妖狐艹你老母/ 2022年05月12日 06:00/ 0 赞/ 257 阅读

相关 javaScript浅拷贝、深拷贝

数据类型 js的数据类型有两种： 1.基本数据类型：数值、字符串、布尔、null、undefined （值类型）存放在栈中，所以复制基本数据类型的值是会新开一个栈

本是古典何须时尚/ 2022年03月07日 13:41/ 0 赞/ 339 阅读

相关 javaScript浅拷贝和深拷贝

首先,克隆只针对对象、数组、函数等复杂数据。浅克隆: 就是将栈内存中的引用复制一份，赋给一个新的变量，本质上两个指向堆内存中的同一地址，内容也相同，

妖狐艹你老母/ 2021年07月24日 19:36/ 0 赞/ 479 阅读