JavaScript深复制实现原理与浅复制对比

作者:闭包旅人

时间:2026-10-28

浏览:624

本文详解JavaScript中深复制的实现逻辑,区分基本类型与对象类型的赋值差异。通过遍历属性、递归处理数组与非数组对象,并探讨ECMAScript 5中Object.defineProperty的使用,最后对比深复制与浅复制的核心区别,帮助开发者正确理解对象引用与克隆机制。

文章目录

JavaScript对象赋值与深复制基础

在JavaScript中,所有对象变量之间的赋值操作均传递引用地址。许多开发者可能不清楚哪些数据类型属于对象范畴,通过具体示例可以更清晰地说明这一点。

代码如下:

typeof(true) //"boolean"
typeof(1) //"number"
typeof("1") //"string"
typeof({}) //"object"
typeof([]) //"object"
typeof(null) //"object"
typeof(function(){}) //"function"

由此可见,深复制的核心处理对象主要是object类型。对于非object类型的数据,直接进行正常赋值即可。实现JavaScript深复制的基本思路如下:

遍历目标对象的所有属性。若属性值为object类型,则需特殊处理:若该object为数组,则创建新数组并深复制其中元素;若为非数组对象,则递归调用深复制方法。若属性值非object类型,则直接正常复制。

深复制代码实现与特性保留

以下是具体的代码实现:

代码如下:

Object.prototype.DeepCopy = function () {
var obj, i;
obj = {};
for (attr in this) {
 if (this.hasOwnProperty(attr)) {
 if (typeof(this[attr]) === "object") {
 if (this[attr] === null) {
 obj[attr] = null;
 }
 else if (Object.prototype.toString.call(this[attr]) === '[object Array]') {
 obj[attr] = [];
 for (i=0; i<this[attr].length; i++) {
 obj[attr].push(this[attr][i].DeepCopy());
 }
 } else {
 obj[attr] = this[attr].DeepCopy();
 }
 } else {
 obj[attr] = this[attr];
 }
 }
 }
 return obj;
};

若浏览器支持ECMAScript 5标准,为确保深复制对象属性时保留所有特性,可采用以下代码:

代码如下:

Object.defineProperty(obj, attr, Object.getOwnPropertyDescriptor(this, attr));

以此替代

代码如下:

obj[attr] = this[attr];

在Object.prototype上直接实现该方法的优势在于所有对象均可继承此方法。然而,部分库可能会修改Object对象,从而引发冲突,使用时需留意。具体用法示例如下:

代码如下:

Object.prototype.DeepCopy = function () { ... }
var a = { x:1 };
var b = a;
var c = a.DeepCopy();
a.x = 2;
b.x = 3;
console.log(a.x); //3
console.log(b.x); //3
console.log(c.x); //1

深复制与浅复制对比

以上为深复制的讲解。既然涉及深复制,与之对应的浅复制也值得简要总结,二者在行为上存在显著异同。

浅复制(影子克隆):仅复制对象的基本类型,对象类型仍保留原引用。 深复制(深度克隆):不仅复制基本类型,还复制原对象中的子对象,生成完全独立的新对象。

实用工具推荐

电子包浆

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

使用 ›
图片压缩

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

使用 ›
相关文章