深拷貝和淺拷貝的區(qū)別

suemi 發(fā)布于2019-08-21 17:07 / 1198人閱讀

摘要：深拷貝和淺拷貝的區(qū)別背景最近在用框架寫頁(yè)面，賦值給中的對(duì)象時(shí)會(huì)出現(xiàn)一個(gè)問(wèn)題，賦值和被賦值對(duì)象之中任何一個(gè)有變化，另一個(gè)也會(huì)隨之變化。

深拷貝和淺拷貝的區(qū)別

背景：
最近在用vue框架寫頁(yè)面，賦值給Vue.$data中的對(duì)象時(shí)會(huì)出現(xiàn)一個(gè)問(wèn)題，賦值和被賦值對(duì)象之中任何一個(gè)有變化，另一個(gè)也會(huì)隨之變化。
例如：

var b = {
    foo: 123
};
var vm = new Vue({
    el: "#demo",
    data: {
        a: b
    }
});

var b.foo = 456;
console.log(a.foo); //輸出456

var a.foo = 789;
console.log(b.foo); //輸出789

遇到問(wèn)題之后在網(wǎng)上查原因才了解到j(luò)s有深拷貝和淺拷貝的區(qū)別，提到這個(gè)，又不得不提js中的兩種變量類型，即值類型（數(shù)值、布爾值、null、undefined）和引用類型（對(duì)象、數(shù)組、函數(shù)）。值類型保存于棧中，而引用類型保存在堆中。說(shuō)到這，又得說(shuō)下值類型和引用類型賦值時(shí)的不同，值類型賦值時(shí)會(huì)在內(nèi)存中開(kāi)辟一塊新的空間，然后把賦過(guò)來(lái)的值保存于這塊新開(kāi)辟的空間中，引用類型賦值時(shí)也會(huì)開(kāi)辟一塊新的空間，不同的時(shí)新的空間保存的是賦值對(duì)象雖在的地址（即淺拷貝，也就是說(shuō)賦值和被賦值對(duì)象引用的是同一個(gè)對(duì)象，所以改變其中任何一個(gè)對(duì)象時(shí)，另一個(gè)會(huì)隨之改變）。所以深拷貝和淺拷貝概念只針對(duì)于引用類型，對(duì)于值類型來(lái)說(shuō)沒(méi)有意義。

但在編寫程序時(shí)，往往需要被賦值的對(duì)象生成一個(gè)新的對(duì)象，而不是賦值對(duì)象的一個(gè)引用，這個(gè)時(shí)候我們就需要使用深拷貝了。下面是javascript|MDN上的一個(gè)例子，里面分別描述了淺拷貝和深拷貝及其的實(shí)現(xiàn)方法。

function test() {
  "use strict";
  // 淺拷貝
  let obj1 = { a: 0 , b: { c: 0}};
  let obj2 = Object.assign({}, obj1);
  console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}}
  
  obj1.a = 1;
  console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}}
  console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}}
  
  obj2.a = 2;
  console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}}
  console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 0}}
  
  obj2.b.c = 3;
  console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 3}}
  console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 3}}
  
  // 深拷貝
  obj1 = { a: 0 , b: { c: 0}};
  let obj3 = JSON.parse(JSON.stringify(obj1));
  obj1.a = 4;
  obj1.b.c = 4;
  console.log(JSON.stringify(obj3)); // { a: 0, b: { c: 0}}
}