本文详解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
深复制与浅复制对比
以上为深复制的讲解。既然涉及深复制,与之对应的浅复制也值得简要总结,二者在行为上存在显著异同。
浅复制(影子克隆):仅复制对象的基本类型,对象类型仍保留原引用。 深复制(深度克隆):不仅复制基本类型,还复制原对象中的子对象,生成完全独立的新对象。