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

忘是亡心i 2022-06-17 09:24 156阅读 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 条评论，156人围观）

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

相关阅读

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

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

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

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

简单的认识一下深拷贝和浅拷贝 var obj = { name: '逆风狂小狗', age: 24, say() {

亦凉/ 2022年12月15日 11:25/ 0 赞/ 184 阅读

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

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

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

相关 javascript的深拷贝和浅拷贝

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

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

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

1、深拷贝和浅拷贝简单数据类型数据的拷贝，是将一个变量的数据拷贝一份给了另一个变量，修改其中一个变量的值不会改变另一个变量的值，因为这连个变量在内存中

深藏阁楼爱情的钟/ 2022年07月11日 06:49/ 0 赞/ 177 阅读

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

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

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

相关 JavaScript 的深拷贝和浅拷贝

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

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

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

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

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

相关 javaScript浅拷贝、深拷贝

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

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

相关 javaScript浅拷贝和深拷贝

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

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