15

我试图在 JavaScript 中克隆一个对象。我制作了自己的具有原型功能的“类”。

我的问题：当我克隆一个对象时，克隆无法访问/调用任何原型函数。

当我访问克隆的原型函数时出现错误：

clone.render 不是函数

你能告诉我如何克隆一个对象并保留它的原型函数吗

这个简单的 JSFiddle 演示了我得到的错误：http: //jsfiddle.net/VHEFb/1/

function cloneObject(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, len = obj.length; i < len; ++i) {
         copy[i] = cloneObject(obj[i]);
     }
     return copy;
   }

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

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

function MyObject(name)
{
    this.name = name;
    // I have arrays stored in this object also so a simple cloneNode(true) call wont copy those
    // thus the need for the function cloneObject();
}

MyObject.prototype.render = function()
{
    alert("Render executing: "+this.name);
}

var base  = new MyObject("base");
var clone = cloneObject(base);
clone.name = "clone";
base.render();
clone.render();  // Error here: "clone.render is not a function"
4

4 回答 4

7

对代码的一些评论：

>    if (obj instanceof Date) {
>      var copy = new Date();
>      copy.setTime(obj.getTime());

可：

if (obj instanceof Date) {
  var copy = new Date(obj);

和

>    if (obj instanceof Array) {

如果 obj 是来自另一个全局上下文（例如 iFrame）的数组，则将返回 false。考虑：

     if (o && !(o.constructor.toString().indexOf("Array") == -1))

>      var copy = [];
>      for (var i = 0, len = obj.length; i < len; ++i) {
>          copy[i] = cloneObject(obj[i]);
>      }

使用以下方法可以更有效、更准确地将一个数组的索引复制到另一个数组slice：

      var copy = obj.slice();

尽管您会错过任何可能已添加的非数字属性。将 0 循环到 length 将向克隆添加稀疏数组中不存在的属性（例如，省略将成为未定义的成员）。

至于克隆部分……</p>

在复制对象属性的部分中，这会将所有属性（包括原始[[Prototype]]链上的属性）直接复制到“克隆”对象。真正“克隆”一个对象的唯一方法是将其设置[[Prototype]]为与原始对象相同的对象，然后将原始对象上的可枚举属性（用 过滤hasOwnProperty）复制到克隆。

第二部分是微不足道的，第一部分不是（在一般意义上）因为你不能保证一个对象的构造函数属性引用了它的对象prototype，[[Prototype]]也不能保证构造函数的原型没有改变（即是一个不同的对象）同时。

您可以获得的最接近的是使用Lasse Reichstein Nielsenclone（由 Douglas Crockford 推广为beget），它使原始对象成为[[Prototype]]克隆对象，然后将构造函数设置为相同的对象。尽管您可能仍然需要复制可枚举的自己的属性，以便它们掩盖原始的同名属性。

因此，您实际上只能在受限上下文中克隆一个对象，一般情况下您不能这样做。通常，这种实现会导致您不需要一般地克隆对象的设计。

于 2012-04-14T06:46:43.883 回答
4

代替

var copy = {};

采用

var copy = new obj.constructor;
于 2012-04-14T05:25:31.777 回答
4

您的功能可以简化为：

function cloneObject(obj) 
{
   obj = obj && obj instanceof Object ? obj : '';

   // Handle Date (return new Date object with old value)
   if (obj instanceof Date) {
     return new Date(obj); 
   }

   // Handle Array (return a full slice of the array)
   if (obj instanceof Array) {
     return obj.slice();
   }

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

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

这是一个工作的jsfiddle

于 2012-04-14T07:02:47.817 回答
2

我将使用要克隆的对象的构造函数来实例化克隆对象：

 var copy = {};

将会

 var copy = new obj.constructor();

这是一个快速响应，我没有考虑过这种解决方案的缺点（我正在考虑重型构造函数），但是乍一看它应该可以工作（我不会提到（或诉诸）深奥的方法__proto__）。

更新：

你应该求助于object.create解决这个问题。

 var copy = {};

将会

 var copy = Object.create(obj.constructor.prototype);

通过这种方式，原始构造函数不会被调用来创建对象（考虑一个构造函数，它执行冗长的 ajax 调用以从服务器检索数据），因为 Object.create 等效于

Object.create = function (proto) {  
    function F() {}  
    F.prototype = proto;  
    return new F();  
};

如果您使用的 javascript 引擎不支持此功能，您可以使用此代码（它已添加到 ecmascript 5 规范中）

于 2012-04-14T05:34:17.473 回答