深入理解JavaScript中的对象复制(Object Clone)

作者:纸飞机时间:2026-10-30 06:53:57浏览:626

JavaScript原生不提供对象复制方法,直接赋值会导致引用共享。本文介绍利用jQuery的extend方法进行浅层复制,以及通过递归实现支持Date、Array等类型的深度复制自定义clone函数,帮助开发者避免修改副本时影响原对象。

JavaScript对象复制问题概述

JavaScript语言本身并未内置直接的对象复制(Object Clone)机制。因此,在代码中若将对象b直接赋值为对象a,后续对b的修改操作会同步反映在a上,因为两者指向同一内存引用。

a = {k1:1, k2:2, k3:3};

b = a;

b.k2 = 4;

若希望仅修改对象b而保持对象a的状态不变,必须对对象a执行复制操作。

使用jQuery进行对象复制

使用jQuery进行对象复制

当项目环境中已引入jQuery库时,可利用其提供的extend方法来实现对象的复制功能。

a = {k1:1, k2:2, k3:3};

b = {};

$.extend(b,a);

自定义clone()方法实现对象复制

自定义clone()方法实现对象复制

以下展示的是对象复制的基本逻辑思路。


Object.prototype.clone = function() {
 var copy = (this instanceof Array) ? [] : {};
 for (attr in this) {
  if (!obj.hasOwnProperty(attr)) continue;
  copy[attr] = (typeof this[i] == "object")?obj[attr].clone():obj[attr];
 } 
 return copy;
};


a = {k1:1, k2:2, k3:3};
b = a.clone();

更完善的示例考虑了多种数据类型,适用于大部分对象的深度复制(Deep Copy)场景。


function clone(obj) {
  // Handle the 3 simple types, and null or undefined
  if (null == obj || "object" != typeof obj) return obj;

  // Handle Date
  if (obj instanceof Date) {
    var copy = new Date();
    copy.setTime(obj.getTime());
    return copy;
  }

  // Handle Array
  if (obj instanceof Array) {
    var copy = [];
    for (var i = 0, var len = obj.length; i < len; ++i) {
      copy[i] = clone(obj[i]);
    }
    return copy;
  }

  // Handle Object
  if (obj instanceof Object) {
    var copy = {};
    for (var attr in obj) {
      if (obj.hasOwnProperty(attr)) copy[attr] = clone(obj[attr]);
    }
    return copy;
  }

  throw new Error("Unable to copy obj! Its type isn't supported.");
}

以上关于深入理解JavaScript中对象复制(Object Clone)的内容即为全部分享,希望能提供有益参考,并感谢大家的支持。

作者最新文章