解析js對象的淺復制與深復制原理

wenyiweb 發(fā)布于2019-08-21 15:12 / 1232人閱讀

摘要：淺復制假設有兩個對象現(xiàn)在想把對象的值復制給，由于對象的兩個值都是原始類型，用淺復制即可。深復制簡單來說深復制就是當遇到值是對象類型的時候就再運行一遍復制。

試想這樣一種場景，自己編寫了一個js插件，調用插件時參數(shù)是以對象的形式傳入的，插件也有自己的默認值，當運行的時候就涉及到傳入?yún)?shù)和默認值的合并，即用到對象的深復制和淺復制。

淺復制

假設有兩個對象

var objA = {
  a: "aa",
  b: "bb"
};
var objB = {};

現(xiàn)在想把對象A的值復制給B，由于對象A的兩個值都是原始類型，用淺復制即可。

function copy(sub, sup) {
  for (var key in sup) {
    sub[key] = sup[key];
  }
}
copy(objB, objA);

但是，假如對象A的其中一個值是引用類型。

var objA = {
  a: "aa",
  b: {
    c: function () {
      console.log("c");
    }
  }
};
var objB = {};
copy(objB, objA);
objB.b.c()  // 結果為c

運行復制的函數(shù)時也可以復制成功，但是存在著一個潛在的風險，即當修改對象A的b.c的值時，對象B也跟著改變了。

copy(objB, objA);
objB.b.c()  // 結果為c
objA.b.c = function () {
  console.log("d");
}
objB.b.c()  // 結果為d

雖然我們修改的是objA的b.c的值，但是objB中的值也跟著改變了。要是在多人協(xié)同的大項目中，其中一個人修改了一個對象的值會導致其他人的值全部改變，這顯然不是我們想要的結果，于是需要進行深復制。

深復制

簡單來說深復制就是當遇到值是對象類型的時候就再運行一遍復制。

function deepCopy (sub, sup) {
  for (var key in sup) {
    if (typeof sup[key] === "object") {
      sub[key] = {};
      deepCopy (sub[key], sup[key]);
    } else {
      sub[key] = sup[key];
    } 
  }
}

運行深復制后，即使改變objA中b.c的值，也不會影響objB的值。

deepCopy(objB, objA);
objB.b.c()  // 結果為c
objA.b.c = function () {
  console.log("d");
}
objB.b.c()  // 結果仍舊為c

這就是深復制與淺復制的區(qū)別，其實在本質上是一樣的，感興趣的可以研究jQuery的$.extend()的源碼。

云服務器 GPU云服務器 python的淺復制 js數(shù)組對象深度復制主從復制原理 mysql主從復制原理

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

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

關于js的淺拷貝與深拷貝

摘要：原文地址淺拷貝和深拷貝只針對像這樣的復雜對象的簡單來說，淺拷貝只拷貝一層對象的屬性，而深拷貝則遞歸拷貝了所有層級。淺拷貝通過來實現(xiàn)淺拷貝。原文地址：http://www.silenceboy.com/201... 淺拷貝和深拷貝只針對像Object, Array這樣的復雜對象的.簡單來說，淺拷貝只拷貝一層對象的屬性，而深拷貝則遞歸拷貝了所有層級。淺拷貝通過 Object.ass...

summerpxy 2019-08-26 13:41 評論0 收藏0
JS引用類型數(shù)據(jù)的淺拷貝與深拷貝

摘要：拷貝到，屬性均順利拷貝。大輝小輝，小輝，大輝小輝，小輝，大輝但是，若修改的屬性變?yōu)閷ο蠡驍?shù)組時，那么對象之間就會發(fā)生關聯(lián)。深拷貝不希望對象之間產(chǎn)生關聯(lián)，那么這時候可以用到深拷貝。淺拷貝之前文章提到，在定義一個對象或數(shù)組時，變量存放的往往只是一個地址。當我們對堆內存中的對象復制時，如果屬性是對象或數(shù)組時，這時候我們拷貝的只是一個棧內存的指針。因此b對象在訪問該屬性時，會根據(jù)指針尋找...

MangoGoing 2019-08-21 16:53 評論0 收藏0
JavaScript中的淺拷貝與深拷貝

摘要：所以，深拷貝是對對象以及對象的所有子對象進行拷貝實現(xiàn)方式就是遞歸調用淺拷貝對于深拷貝的對象，改變源對象不會對得到的對象有影響。為什么會有淺拷貝與深拷貝什么是淺拷貝與深拷貝如何實現(xiàn)淺拷貝與深拷貝好了，問題出來了，那么下面就讓我們帶著這幾個問題去探究一下吧！如果文章中有出現(xiàn)紕漏、錯誤之處，還請看到的小伙伴多多指教，先行謝過以下↓ 數(shù)據(jù)類型在開始了解淺拷貝與深拷貝之前，讓我們先...

546669204 2019-08-26 18:27 評論0 收藏0
JavaScript中的淺拷貝與深拷貝

摘要：所以，深拷貝是對對象以及對象的所有子對象進行拷貝實現(xiàn)方式就是遞歸調用淺拷貝對于深拷貝的對象，改變源對象不會對得到的對象有影響。上一篇 JavaScript中的繼承前言文章開始之前，讓我們先思考一下這幾個問題：為什么會有淺拷貝與深拷貝什么是淺拷貝與深拷貝如何實現(xiàn)淺拷貝與深拷貝好了，問題出來了，那么下面就讓我們帶著這幾個問題去探究一下吧！如果文章中有出現(xiàn)紕漏、錯誤之處...

AZmake 2019-08-23 17:08 評論0 收藏0
關于JavaScript的淺拷貝和深拷貝

摘要：引用類型值引用類型值是保存在堆內存中的對象，變量保存的只是指向該內存的地址，在復制引用類型值的時候，其實只復制了指向該內存的地址。前言要理解 JavaScript中淺拷貝和深拷貝的區(qū)別，首先要明白JavaScript的數(shù)據(jù)類型。JavaScript有兩種數(shù)據(jù)類型，基礎數(shù)據(jù)類型和引用數(shù)據(jù)類型。js的基本類型：undefined，null，string，boolean，number,s...

shenhualong 2019-08-26 12:23 評論0 收藏0