前端大牛第一步原始碼分析及修Bootstrap框架
阿新 • • 發佈:2018-12-21
一、區別:簡單點來說,就是假設B複製了A,當修改A時,看B是否會發生變化,如果B也跟著變了,說明這是淺拷貝,如果B沒變,那就是深拷貝。
此篇文章中也會簡單闡述到棧堆,基本資料型別與引用資料型別,因為這些概念能更好的讓你理解深拷貝與淺拷貝。
例如:
let a=[0,1,2,3,4], b=a; console.log(a===b); // true a[0]=1; console.log(a,b); // a: [1,1,2,3,4] b:[1,1,2,3,4] 淺拷貝
二·、從基本型別和引用的資料儲存上面區別理解:
a.基本型別--名值儲存在棧記憶體中
當你b=a複製時,棧記憶體會新開闢一個記憶體,例如這樣:
所以當你此時修改a=2,對b並不會造成影響,因為此時的b已自食其力,翅膀硬了,不受a的影響了。當然,let a=1,b=a;雖然b不受a影響,但這也算不上深拷貝,因為深拷貝本身只針對較為複雜的object型別資料。
b.引用資料型別--名存在棧記憶體中,值存在於堆記憶體中,但是棧記憶體會提供一個引用的地址指向堆記憶體中的值,我們以上面淺拷貝的例子畫個圖:
當b=a進行拷貝時,其實複製的是a的引用地址,而並非堆裡面的值。
而當我們a[0]=1時進行陣列修改時,由於a與b指向的是同一個地址,所以自然b也受了影響,這就是所謂的淺拷貝了。
那,要是在堆記憶體中也開闢一個新的記憶體專門為b存放值,就像基本型別那樣,豈不就達到深拷貝的效果了
1.我們怎麼去實現深拷貝呢,這裡可以遞迴遞迴去複製所有層級屬性。
這麼我們封裝一個深拷貝的函式
function deepClone(obj){ let objClone = Array.isArray(obj)?[]:{}; if(obj && typeof obj==="object"){ for(key in obj){ if(obj.hasOwnProperty(key)){ //判斷ojb子元素是否為物件,如果是,遞迴複製 if(obj[key]&&typeof obj[key] ==="object"){ objClone[key] = deepClone(obj[key]); }else{ //如果不是,簡單複製 objClone[key] = obj[key]; } } } } return objClone; } let a=[1,2,3,4], b=deepClone(a); a[0]=2; console.log(a,b);
可以看到
跟之前想象的一樣,現在b脫離了a的控制,不再受a影響了。 這裡再次強調,深拷貝,是拷貝物件各個層級的屬性,可以看個例子。JQ裡有一個extend方法也可以拷貝物件,我們來看看
let a=[1,2,3,4], b=a.slice(); a[0]=2; console.log(a,b);