淺談JavaScript淺拷貝和深拷貝

更新時間：2021年11月05日 09:04:44 作者：快樂編程

這篇文章主要介紹了淺談JavaScript淺拷貝和深拷貝，javascript中的對象是引用類型，在復制對象的時候就要考慮是用淺拷貝還是用深拷貝。接下來一起聊聊吧,感興趣的小伙伴也可以參考一下

一、直接賦值

對象是引用類型，如果直接賦值給另外一個對象，那么只是賦值一個引用，實際上兩個變量指向的同一個數(shù)據(jù)對象，如果其中一個對象的屬性變更，那么另外一個也會變更。

示例1，簡單示例：

let human1 = {
    id: 1,
    name: "happy"
};
human2 = human1; // 這里就是直接賦值
 
console.log(human1); // {id: 1, name: 'happy'}
console.log(human2); // {id: 1, name: 'happy'}
 
// 更改human1的名稱，human2的也會更改
human1.name = "life";
console.log(human1); // {id: 1, name: 'life'}
console.log(human2); // {id: 1, name: 'life'}

示例2，對象作為參數(shù)傳遞也是傳遞引用：

let human1 = {
    id: 1,
    name: "happy"
};
 
console.log(human1); // {id: 1, name: 'happy'}
 
function foo(human) {
    // 這里更改了human對象的名稱
    human.name = "life";
}
foo(human1); // 傳遞對象是傳遞引用
 
console.log(human1); // {id: 1, name: 'life'}

二、淺拷貝

淺拷貝只是復制了對象的第一層，如果第一層的屬性值是對象，那么該屬性也只是復制了一個引用。

let object1 = {
    a: 1,
    b: { // b是對象
        b1: 2
    }
};
object2 = Object.assign({}, object1); // 這里就是淺拷貝，其中的b對象只復制了引用
 
// a是常規(guī)類型，不會互相影響
object1.a = 10;
console.log(object1.a); // 10
console.log(object2.a); // 1
 
// b是對象，會互相影響
object1.b.b1 = 20;
console.log(object1.b.b1); // 20
console.log(object2.b.b1); // 20

如果要實現(xiàn)完整的復制，就要使用深拷貝。

三、深拷貝

森拷貝就是不光是一層要復制，里面的層如果是對象也要進行復制。

1. JSON對象的方式

如果對象可以確認是JSON對象，那么可以用JSON對象的方式。

沿用上面的例子：

let object1 = {
    a: 1,
    b: { // b是對象
        b1: 2
    }
};
 
object2 = JSON.parse(JSON.stringify(object1)); // 深拷貝
 
// a是常規(guī)類型，不會互相影響
object1.a = 10;
console.log(object1.a); // 10
console.log(object2.a); // 1
 
// b是對象，也不會互相影響
object1.b.b1 = 20;
console.log(object1.b.b1); // 20
console.log(object2.b.b1); // 2

這邊深拷貝的原理其實就是先把對象轉成json字符串，然后再轉成json對象，中間轉成json字符串后就和原來的對象沒有關系了。

這方法的優(yōu)點：實現(xiàn)非常簡單。

缺點：

如果有屬性值是函數(shù)的話，那么無法進行復制，數(shù)據(jù)會丟失。
另外原型對象無法進行復制。

所以這種方式只適合對象確認是一個純粹的json數(shù)據(jù)。

2. 遞歸復制

因為需要一層一層遞進復制，很容想到用遞歸的方式，參考如下實現(xiàn)：

function deepCopy(source) {
    // 如果不是對象或者是null則直接返回
    if (typeof source !== 'object' || source === null) {
        return source;
    }
 
    let target = {};
    // 遍歷復制屬性
    for (let k in source) {
        if (!source.hasOwnProperty(k)) {
            continue;
        }
 
        if (typeof source[k] === 'object') { // 如果是對象，則遞歸復制
            target[k] = deepCopy(source[k]);
            continue;
        }
 
        let descriptor = Object.getOwnPropertyDescriptor(source, k);
        Object.defineProperty(target, k, descriptor);
    }
 
    return target;
}

因為是一層一層復制，所以復制完成后，兩個對象不會互相影響，并且也可以支持方法。

let object1 = {
    a: 1,
    b: { // b是對象
        b1: 2
    },
    f: function() { // f是方法
        console.log(3);
    }
};
object2 = deepCopy(object1); // 深拷貝，也可以復制函數(shù)了。
object1.f(); // 3
object2.f(); // 3
 
// b是對象，也不會互相影響
object1.b.b1 = 20;
console.log(object1.b.b1); // 20
console.log(object2.b.b1); // 2

復制原型對象

但是這個方法還存在一個問題，就是原型對象無法復制，稍微改進一下：

// 把 let target = {}; 改成如下方式
// 保證原型也進行了復制
let target = Object.create(Object.getPrototypeOf(source));

這樣就可以了，來個示例驗證一下：

function Human() {
    this.id = 1;
}
Human.prototype.bar = function() {
    console.log("bar");
};
 
let human1 = new Human();
human2 = deepCopy(human1);
 
console.log("human1", human1);
console.log("human2", human2);

查看下兩個對象的原型：

深拷貝復制原型對象：

完美復制。

當然這樣的方法也存在一個問題，就是遞歸本身存在如果層次過深，容易造成棧溢出的問題。但是在實務中也建議不要復制非常大的對象，應該有另外好的解決方法。

到此這篇關于淺談JavaScript淺拷貝和深拷貝的文章就介紹到這了,更多相關JavaScript淺拷貝和深拷貝內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

參考文檔：

JS實現(xiàn)深拷貝：https://www.cnblogs.com/dobeco/p/11295316.html
Object.assign()：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
Object.create()：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/create
Object.getPrototypeOf()：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf
Object.defineProperty()：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty
Object.getOwnPropertyDescriptor()：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor
hasOwnProperty()：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty

您可能感興趣的文章: