克隆

freecode 發布于2019-08-26 11:37 / 2005人閱讀

摘要：結構化算法優于的地方優于的地方結構化克隆可以復制對象。的克隆粒度將會跟原始對象相同，并且復制出來相同的像素數據。企圖去克隆節點同樣會拋出異常。消息通道的傳遞是異步的，使用結構化克隆算法。

JavaScript 深拷貝性能分析(漢化版)
JavaScript 深拷貝性能分析

Object.assign()

Object.assign 方法只會拷貝源對象自身的并且可枚舉的屬性到目標對象。該方法使用源對象的[[Get]]和目標對象的[[Set]]，所以它會調用相關 getter 和 setter。

JSON.parse

過去瀏覽器內部傳遞的對象是使用JSON進行序列化的。現代瀏覽器序列化將使用結構化克隆算法。這將會使更多對象可以被安全的傳遞。

JSON parse的優缺點

優點

代碼簡單

const obj = /* ... */
const copy = JSON.parse(JSON.stringify(obj))

缺點

如果對象復雜，你可能創建一個臨時的，很大的字符串，只是為了把它重新放回解析器。

無法解決處理循環對象，如當您構建樹狀數據結構，其中一個節點引用其父級，而父級又引用其子級。

const x = {};
const y = {x};
x.y = y; // Cycle: x.y.x.y.x.y.x.y.x...
const copy = JSON.parse(JSON.stringify(x)); // throws!

諸如 Map, Set, RegExp, Date, ArrayBuffer 和其他內置類型在進行序列化時會丟失

結構化克隆算法

因為它支持包含循環圖的對象的序列化 ---對象可以引用在同一個圖中引用其他對象的對象。此外，在某些情況下，結構化克隆算法可能比JSON更高效。
結構化算法優于JSON的地方

優于 JSON 的地方

結構化克隆可以復制 RegExp 對象。

結構化克隆可以復制 Blob、File 以及 FileList 對象。

結構化克隆可以復制 ImageData 對象。CanvasPixelArray

的克隆粒度將會跟原始對象相同，并且復制出來相同的像素數據。

結構化克隆可以正確的復制有循環引用的對象

結構化克隆所不能做到的

Error 以及 Function 對象是不能被結構化克隆算法復制的；如果你嘗試這樣子去做，這會導致拋出 DATA_CLONE_ERR 的異常。

企圖去克隆 DOM 節點同樣會拋出 DATA_CLONE_ERROR 異常。

對象的某些特定參數也不會被保留

RegExp 對象的 lastIndex 字段不會被保留

屬性描述符，setters 以及 getters（以及其他類似元數據的功能）同樣不會被復制。例如，如果一個對象用屬性描述符標記為 read-only，它將會被復制為 read-write，因為這是默認的情況下。

原形鏈上的屬性也不會被追蹤以及復制。

symbols 不會被復制

MessageChannel

Channel Messaging API的Channel Messaging接口允許我們創建一個新的消息通道，并通過它的兩個MessagePort 屬性發送數據。

消息通道的傳遞是異步的，使用結構化克隆算法。

Note: 此特性在 Web Worker 中可用。
兼容性如下：

History API

HTML5引入了 history.pushState() 和 history.replaceState() 方法，它們分別可以添加和修改歷史記錄條目。這些方法通常與window.onpopstate 配合使用。

pushState
history.pushState(data({a: "hi"}), name("tdy"), url("bar.html"))
改變瀏覽器的url顯示，但是瀏覽器本身不會去做任何的改變。

history.replaceState() 參數和pushState一致，修改當前頁面的信息

window.onpopstate
調用history.pushState()或者history.replaceState()不會觸發popstate事件. popstate事件只會在瀏覽器某些行為下觸發, 比如點擊后退、前進按鈕(或者在JavaScript中調用history.back()、history.forward()、history.go()方法).信息保存在state屬性上

pushState或replaceState時需要復制一份狀態對象，這個狀態對象使用結構化克隆而且是同步的。
最大儲存對象大小為640KB。

Safari 瀏覽器對replaceState調用的限制數量為 30 秒內 100 次。
兼容性如下：

Notification API

簡潔明了

function structuralClone(obj) {
  return new Notification("", {data: obj, silent: true}).data
}

const obj = /* ... */
const clone = structuralClone(obj)

兼容性欠佳,并且，Safari 總是返回undefined。

最后

如果您沒有循環對象，并且不需要保留內置類型，則可以使用跨瀏覽器的JSON.parse(JSON.stringify())獲得最快的克隆性能。

如果你想要一個適當的結構化克隆，MessageChannel是你唯一可靠的跨瀏覽器的選擇。

云服務器 GPU云服務器深克隆網絡克隆對象克隆克隆表

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

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

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

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

fai1017 2019-08-21 14:16 評論0 收藏0
Java實現對象克隆的方法

摘要：優點簡單易實現缺點無法真正克隆對象深克隆實現通過遞歸克隆實現代碼輸出通過序列化實現代碼輸出結果分析采用深克隆能有效隔離源對象與克隆對象的聯系。本文首發于cartoon的博客 ????轉載請注明出處:https://cartoonyu.github.io/cartoon-blog/post/java/java%E5%AE%9E%E7%8E%B0%E5%85%8B%E9%9A%86%E...

zhoutk 2019-08-19 11:46 評論0 收藏0
jQuery源碼解析之clone()

摘要：五作用的關鍵方法，用來從目標節點克隆數據添加事件給克隆的元素注意采用數據分離的方法來保存上的事件和數據，利用標記每個元素，然后在內存上，將每個元素相關的數據放到內存中，然后在和內存的數據之間建立映射。 showImg(https://segmentfault.com/img/remote/1460000018991125); 前言：這篇講完后，jQuery的文檔處理就告一段落了，有空我...

coolpail 2019-08-23 17:08 評論0 收藏0
JavaScript對象克隆

摘要：原始類型對象指的是字符串數值布爾值，引用類型對象指的是數組對象函數。既然對象分為這兩類，他們的復制克隆也是有差別的?？偨Y根據上面的情況，另外，克隆引用對象必須采用完整克隆深度克隆，包括對象的值也是一個對象也要進行完整克隆深度克隆。前言之前有人問我如何克隆一個JS對象，我當時沒答上來；過后我查資料弄懂了這個問題，現在整理成文。正文 JavaScript的一切實例都是對象，但他們也分...

douzifly 2019-08-20 10:27 評論0 收藏0
【轉】JavaScript 對象的深度克隆

摘要：在聊以下簡稱深度克隆之前，我們先來了解一下中對象的組成。克隆或者拷貝分為種淺度克隆深度克隆。淺度克隆基本類型為值傳遞，對象仍為引用傳遞。該文轉載自http://www.cnblogs.com/zichi/p/4568150.html，有部分修改。在聊JavaScript（以下簡稱js）深度克隆之前，我們先來了解一下js中對象的組成。在 js 中一切實例皆是對象，具體分為原始類型 ...

JowayYoung 2019-08-19 17:43 評論0 收藏0