JavaScript 浅拷贝与深拷贝的实现原理及代码

作者:函数茶馆

时间:2026-10-23

浏览:630

本文介绍了 JavaScript 中对象克隆的概念,区分了浅拷贝与深拷贝的实现方式。浅拷贝仅复制基本类型,对象引用仍指向原地址;深拷贝则递归复制所有嵌套对象,生成完全独立的新对象。文章提供了具体的克隆方法代码示例,帮助开发者理解如何在实际编程中避免对象引用带来的副作用。

文章目录

JavaScript 对象克隆概述

什么是“克隆”(clone)?


在实际开发中,经常遇到这样的需求:存在一个对象 A,其中已包含若干有效数据。此时需要创建一个与 A 完全一致的新对象 B,且后续对 B 的任何修改都不应影响 A 中的数据。这意味着 A 和 B 必须是两个完全独立的对象,但 B 的初始状态由 A 决定。在 Java 或 JavaScript 等语言中,简单的赋值语句无法满足这一需求。虽然实现克隆的途径众多,但实现 clone() 方法是最简单且高效的方式。需要注意的是,JavaScript 语言本身并未内置此方法。


因此,这里专门编写了两个克隆方法:一个用于实现浅拷贝,另一个用于实现深拷贝。


浅拷贝与深拷贝的区别

具体解释如下:


浅拷贝(Shallow Copy,也称影子克隆):仅复制对象的基本数据类型。对于对象类型,仅复制其引用地址,新对象中的对象属性仍指向原对象中的同一个实例。


深拷贝(Deep Copy,也称深度克隆):不仅复制对象的基本数据类型,还会递归地复制原对象中包含的所有嵌套对象。这意味着生成的是一个完全独立的新对象,与原对象在内存中没有任何共享引用。


代码实现与运行说明

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <META NAME="Generator" CONTENT="Wawa Editor 1.0"> <META NAME="Author" CONTENT="八神奄"> <META NAME="Keywords" CONTENT="Javascript,Java,XML,XSLT,ASP,VBScript,ASP .net,C#,C++,Database"> <META NAME="Description" CONTENT="不及格的程序员,无所不在"> </HEAD> <BODY>  </BODY> </HTML> 

[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章