原生js實現物件的深克隆以及淺克隆

薛清揚發表於2020-12-13

在日常開發中,我們經常會遇到需要複製一個物件。但是如果只是簡單的進行賦值,並不能實現物件的克隆(複製)。只是多了一份指向物件的應用而已。物件克隆分為淺克隆和深克隆。

淺克隆

物件的淺克隆只是會克隆物件的第一層屬性。當被克隆物件的屬性為一個物件或則陣列時。淺克隆是不會對該屬性進一步克隆而是會賦值改屬性的引用。即當修改了其中一個物件的屬性的值時另外的那個物件的對應值也會跟著發生變化。具體表現如下所示:

深克隆

物件的深克隆就不會出現淺克隆的那種情況,它會遞迴(完全)的克隆整個物件,當物件的屬性為一個物件或則陣列時它會對改屬性實現克隆而不是像淺克隆那樣賦值引用。所以當一個物件被深克隆之後它是完全獨立於被克隆物件的。即他們二者的不存在任何關聯。具體示例如下所示:

常見的深克隆方法

1、原生js透過遞迴實現深克隆。本文所示
2、使用JSON物件轉化。但該方法有個缺陷,不能克隆物件中的方法,RegExp物件以及undefined型別的值。
3、藉助其它庫封裝的方法實現深克隆。例如Jquery

總結

本文主要介紹了原生js實現物件深克隆和淺克隆,在實現深克隆時用到了遞迴的思想、以及透過藉助Object原型上的toString方法判斷一個屬性是物件還是陣列。

相關文章