1. 程式人生 > >js的淺克隆和深度克隆

js的淺克隆和深度克隆

知乎上有一句話是這樣的:

什麼叫做理解了某一個概念?就是你可以用簡單的語言把這個概念對你六歲的小侄女講明白。

深度克隆就是:把一個物件裡面的東西一模一樣地複製到另一個物件,並且這兩個物件分別放在記憶體的不同地方。

想象一個場景:我們希望給每一個註冊使用者建立一個數據模型,在此之前,我們要把這個使用者的資料模型模板給創建出來:


使用者模板

以後每個註冊使用者都會根據這個模板來生成物件。可以說這個userTemplate就是父物件了。

現在來了一個新使用者來註冊,這個使用者就是我非常喜歡的人民藝術家郭德綱。哈哈。我用這個模板物件複製一個新物件來,就像剛才說的,我寫一個函式,把userTemplate物件的每一個屬性都複製到這個新物件裡,程式碼是這樣的:


給標籤屬性增加一個標籤,光頭

然後我們又來了一位使用者,是位美女,於是我們用剛才寫的函式新複製一個物件:


給蒼井空加一個辣妹的標籤

下面我在把模型插入資料庫之前,我要打印出來三個物件看看內容是不是正確,列印的結果是這樣的:


三個物件的陣列屬性是有問題的。

結果傻逼了,陣列屬性出現了問題,3個物件的陣列屬性都一樣。

這很好理解,因為簡單的複製物件,如果物件其中一個屬性是引用型變數,就會出現這種情況,因為引用型變數儲存的是記憶體地址,所以其實後來操作的都是同一塊記憶體,導致了陣列內容都一樣。

對,剛才上面的那一套就是淺克隆,深克隆是什麼?深克隆就是在克隆的時候判斷一下屬性的型別是不是引用型變數,如果是的話就用遞迴方法讓它一層一層進去複製自己。

遞迴的深度克隆程式碼我貼到這裡,因為沒什麼技術含量,所以沒必要記錄思路,只要程式碼就可以了。


遞迴深度克隆程式碼

然後用這個新寫的函式去複製物件,重新讓郭德綱和蒼井空兩位老師註冊一下。


用深度克隆的方法來克隆物件。

這樣的話再打印出來看看:


一切正常了。

這就是深度克隆了,其實是JS的繼承的方法的一種。

九點了,準備看會兒別的程式碼收工回家了。