[JS] JavaScript 自己做個深拷貝吧!

Huge Gun
2 min readApr 6, 2020

--

這篇是介紹 JS 深拷貝(Deep Copy) 的下集,還沒有看過上集的小夥伴請看[JS] JavaScript 深拷貝 是拷什麼東西?!,上集最後說到,目前原生提供的method 沒辦法做到很完整的深拷貝,這篇就自己試著做一個吧,有任何問題可以跟我說,謝謝!

自定義 Method 的重點

上集提到若不使用任何套件,執行深拷貝時,會有問題的是物件型別 (Object) 的 copy,接下來會針對多層物件(Object 的屬性也是 Object) 去羅列實作要注意的點,如下:

  1. Object 的 key 屬性有 symbol or 值為 undefined 的情況
  2. Object 中有 Function、Date、RegExps、Blobs 等...任一個關鍵字
  3. 要達到完全複製整個 Object,不共享記憶體位置 (call by reference)

有了重點,就直接上 code 吧!

綜合上述的重點整理一下思路,Method 第一步就要先建立一個新的記憶體位置當 Cache,用來存放 new Object copy 過來的東西,再判定丟進來要被 copy 的 Object 型別,再來需要過濾 Function、Date 等等關鍵字,接著 一一對應 key & value 複製過來,最後 return new Object 即可。

可以看到我們成功 copy 一個有多層物件屬性的 Object,前面說的幾個要注意的重點也克服了,而且兩個 Object content 也不會有共享記憶體位置的困擾,如果後續有更完美的做法,會再更新,感謝!

--

--

Huge Gun

槍再大把,沒子彈是不行的;通過學習,鍛造自己的子彈!https://github.com/HsienW