Question

我试图在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"

Answer 1

对代码的一些评论：

>    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到长度将为克隆添加稀疏数组中不存在的属性（例如，精简将成为未定义的成员）。

至于克隆部分......

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

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

最接近的是使用Lasse Reichstein Nielsen's clone（由Douglas Crockford推广为beget），使原始对象成为克隆的[[Prototype]]，然后将构造函数设置为同一个对象。虽然您可能仍需要复制可枚举的自有属性，因此它们会掩盖原始的同名属性。

所以你真的只能在受限制的上下文中克隆一个对象，你不能一般地做。通常，这种实现会导致您无需一般性地克隆对象的设计。

Answer 2

您的功能可以简化为：

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.");
}

这是working jsfiddle

Answer 3

而不是

var copy = {};

使用

var copy = new obj.constructor;

Answer 4

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

 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规范中）

Javascript克隆对象失去了原型函数

4 个答案: