js克隆一個對象，支持循環引用的克隆

fai1017 發布于2019-08-21 14:16 / 2083人閱讀

摘要：判斷參數是否為待判斷的參數克隆一個對象要克隆的目標對象克隆節點，綁定事件的有問題，暫不處理克隆在當前作用域，在全局克隆其它對象，通過識別復制后的對象與原對象是否相同來決定傳不傳參數，像數組是不能傳參數的使用防止對象重寫了方法支持節點克隆

(function(){
  var toString=Object.prototype.toString,gObj={},cloneHelper=function(cache,item){
   /// helper for Utils.clone
   if ("object" == typeof item || Utils.isFunction(item)) {
    for (var i = cache.length - 2; i>=0; i -= 2) {
     if (cache[i] == item)
      return cache[i + 1]
    }
    cache.push(item, item = Utils.clone(item, cache))
   }
   return item 
  };
  window.Utils={
   isFunction:function(it){
    /// 判斷參數是否為Function
    /// 待判斷的參數
    /// 
    return toString.call(it)=="[object Function]";
   },
   clone:function(obj,cache){
    /// 克隆一個對象
    /// 要克隆的目標對象
    /// 
    cache || (cache = []);
    var clone,temp;
    if (!obj || (!Utils.isFunction(obj) && typeof obj != "object")) return o;
    else if (obj.cloneNode) return o.cloneNode(true);//克隆DOM節點，綁定事件的有問題，暫不處理
    else if (Utils.isFunction(obj)) clone = new Function("return " + obj)(); //克隆function eval在當前作用域，Funtion在全局
    else clone = (temp = obj.constructor, clone = new temp(obj.valueOf()), obj == clone) ? new temp() : clone; //克隆其它對象，通過識別復制后的對象與原對象是否相同來決定傳不傳參數，像數組是不能傳參數的
    cache.push(obj,clone);
    for (temp in obj) if (gObj.hasOwnProperty.call(obj,temp)) clone[temp] = cloneHelper(cache,obj[temp]);//使用gObj.hasOwnProperty 防止對象obj重寫了hasOwnProperty方法
    return clone
   }
 }());

支持節點克隆，對象克隆，同時也支持循環引用的對象克隆。

比如：

   var souceObj={

      childObj:{

     }

   };

  sourceObj.childObj.child=sourceObj;

這樣一個循環引用的對象也可以正常克隆

cloneObj=Utils.clone(sourceObj);克隆后，同樣保持與原來相同的引用關系

對于
var obj={};
var a={};

a.b=obj;
a.c=obj;

var d=Utils.clone(a);

在clone之前
a.b.f="123";
那么a.c也就有了一個f 為 "123";

但對于 clone之后的d 也有這功能

然而，每段代碼或解決方案都有它的適用范圍，以上代碼也無法保證在所有瀏覽器中對任意對象克隆均能正常工作，您應當看懂理解代碼，學以至用，而不是簡單的把代碼復制過去

以上代碼在opera某些版本下克隆正則有問題，已滿足大部分需求

云服務器 GPU云服務器 js克隆對象對象克隆克隆對象 js中克隆

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/87846.html

JavaScript 深拷貝

摘要：深拷貝是一件看起來很簡單的事情，但其實一點兒也不簡單。我們也可以利用這個實現對象的深拷貝。而是利用之前已經拷貝好的值。深拷貝的詳細的源碼可以在這里查看。大功告成我們雖然的確解決了深拷貝的大部分問題。 js深拷貝是一件看起來很簡單的事情，但其實一點兒也不簡單。對于循環引用的問題還有一些內置數據類型的拷貝，如Map, Set, RegExp, Date, ArrayBuffer 和其他內置...

zhangwang 2019-08-22 18:28 評論0 收藏0
ES6時代，你真的會克隆對象嗎(二)

摘要：多個窗口意味著多個全局環境，不同的全局環境擁有不同的全局對象，從而擁有不同的內置類型構造函數。比如，表達式會返回，因為屬性得到的僅僅是構造函數，而且是可以被手動更改的，只是返回的構造函數的名字，它并不返回類名。原文：ES6時代，你真的會克隆對象嗎(二) 上一篇，我們從Symbol和是否可枚舉以及屬性描述符的角度分析了ES6下怎么淺拷貝一個對象，發表在掘金和segmentfault上（...

BoYang 2019-08-26 11:36 評論0 收藏0
js clone

摘要：克隆的概念淺克隆原始類型為值傳遞，對象類型仍為引用傳遞。深度克隆檢驗參數，如果不是對象直接返回原型鏈上繼承過來的屬性無法通過檢測到，返回。方法用于將字符串解析為，可以任意轉換生成的值及其屬性，并返回值。克隆的概念淺克隆：原始類型為值傳遞，對象類型仍為引用傳遞。深克隆：所有元素或屬性均完全復制，與原對象完全脫離，也就是說所有對于新對象的修改都不會反映到原對象中。淺克隆就是將棧內存中...

diabloneo 2019-08-23 12:20 評論0 收藏0
克隆

摘要：結構化算法優于的地方優于的地方結構化克隆可以復制對象。的克隆粒度將會跟原始對象相同，并且復制出來相同的像素數據。企圖去克隆節點同樣會拋出異常。消息通道的傳遞是異步的，使用結構化克隆算法。 JavaScript 深拷貝性能分析(漢化版) JavaScript 深拷貝性能分析 Object.assign() Object.assign 方法只會拷貝源對象自身的并且可枚舉的屬性到目標對象。...

freecode 2019-08-26 11:37 評論0 收藏0
JS的深淺拷貝

摘要：引用類型之所以會出現深淺拷貝的問題，實質上是由于對基本類型和引用類型的處理不同。另外方法可以視為數組對象的淺拷貝。上面描述過的復雜問題依然存在，可以說是最簡陋但是日常工作夠用的深拷貝方式。一直想梳理下工作中經常會用到的深拷貝的內容，然而遍覽了許多的文章，卻發現對深拷貝并沒有一個通用的完美實現方式。因為對深拷貝的定義不同，實現時的edge case過多，在深拷貝的時候會出現循環引用等問...

xiaoxiaozi 2019-08-21 16:49 評論0 收藏0