原生js实现深拷贝函数

最新推荐文章于 2025-06-30 10:17:49 发布

原创最新推荐文章于 2025-06-30 10:17:49 发布 · 9.1k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #深拷贝

JS 专栏收录该内容

40 篇文章

订阅专栏

本文介绍了如何使用原生JavaScript实现深拷贝函数，通过JSON.parse(JSON.stringify())方法以及MessageChannel来处理复杂对象的拷贝。同时，文章提到了这两种方法的局限性，如忽略函数、无法处理循环引用以及MessageChannel的异步深拷贝特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先实现一个函数对变量类型进行判断

// 判断变量的类型
function getType(obj){
	var str = Object.prototype.toString.call(obj);
	var map={
		'[object Boolean]'  : 'boolean', 
		'[object Number]'   : 'number', 
		'[object String]'   : 'string', 
		'[object Function]' : 'function', 
		'[object Array]'    : 'array', 
		'[object Date]'     : 'date', 
		'[object RegExp]'   : 'regExp', 
		'[object Undefined]': 'undefined',
		'[object Null]'     : 'null', 
		'[object Object]'   : 'object'
	}
	if(obj instanceof Element){ //判断是否是dom元素，如div等
		return "element";
	}
	return map[str];
}

下面我们实现deepCopy函数，对对象中的数组或对象进行递归调用拆分复制，让两个对象中的数组或

对象相互独立

//深拷贝函数
function deepCopy(p){
	var obj;
	var str = getType(p);
	if(str == 'array'){
		obj = [];
		for (var i = 0; i < p.length; i++) {
			obj.push(arguments.callee(p[i]));  //回调自己
		}
	}else if(str == 'object'){
		obj = {};
		for(var i in p){
			obj[i] = arguments.callee(p[i]);
		}
	}else{
		return p;
	}
	return obj;
}

接下来调用测试吧！参考博客

var a={
	color:['red','blue','black'],
	age:10,
}
var b = deepCopy(a);
b.color.push('green');
console.log(a);
console.log(b);

特别方法

JSON.parse(JSON.stringify(object))

局限性：

会忽略 undefined
不能序列化函数，会被忽略
不能解决循环引用的对象

更新（2018/8/7）：

MessageChannel

MessageChannel创建消息通道，传递消息使用的是深拷贝

局限性：

异步深拷贝，有时我们需要同步深拷贝

const MessageClone = (obj) => {
    return new Promise(resolve => {
        const {
            port1,
            port2
        } = new MessageChannel();
        port2.onmessage = mes => resolve(mes.data);
        port1.postMessage(obj);
    });
}

let obj = {
        a: {
            b: 1,
            arr: [1, 2, 3, 4]
        }
    },
    newObj = null;

MessageClone(obj).then(obj => {
    newObj = obj;
    console.log(newObj);
});