js clone

diabloneo 發布于2019-08-23 12:20 / 3189人閱讀

摘要：克隆的概念淺克隆原始類型為值傳遞，對象類型仍為引用傳遞。深度克隆檢驗參數，如果不是對象直接返回原型鏈上繼承過來的屬性無法通過檢測到，返回。方法用于將字符串解析為，可以任意轉換生成的值及其屬性，并返回值。

克隆的概念

淺克隆：原始類型為值傳遞，對象類型仍為引用傳遞。
深克隆：所有元素或屬性均完全復制，與原對象完全脫離，也就是說所有對于新對象的修改都不會反映到原對象中。

淺克隆就是將棧內存中的引用復制一份，賦給一個新的變量，本質上兩個指向堆內存中的同一地址，內容也相同，其中一個變化另一個內容也會變化（根本上改變的是同一個對象）。
深克隆就是創建一個新的空對象，開辟一塊內存，然后將原對象中的數據全部復制過去，完全切斷兩個對象間的聯系。
其實深拷貝和淺拷貝都是針對的引用類型，JS中的變量類型分為值類型（基本類型）和引用類型；對值類型進行復制操作會對值進行一份拷貝，而對引用類型賦值，則會進行地址的拷貝，最終兩個變量指向同一份數據。

如果克隆對象是基本類型，我們直接賦值就可以了。
// 基本類型
var a = 1;
var b = a;
a = 2;
console.log(a, b); // 2, 1 ，a b指向不同的數據

如果不是基本類型，就有所不同了
// 引用類型指向同一份數據
var a = {c: 1};
var b = a;
a.c = 2;
console.log(a.c, b.c); // 2, 2 全是2，a b指向同一份數據

深克隆的方法

1)遞歸完成深克隆

通過遞歸去復制所有層級屬性，為了保證對象的所有屬性都被復制到，我們必須知道如果for循環以后，得到的元素仍是Object或者Array，那么需要再次循環。

//深度克隆
function deepClone(obj){
    // 檢驗參數，如果不是對象直接返回；原型鏈上繼承過來的屬性無法通過hasOwnProperty檢測到，返回false。
    if(typeof obj != "object") return obj;
    var cloneObj=Object.prototype.toString.call(obj)=="[Object Array]" ? [] : {};
    for(var key in obj){
        // 判斷是不是直系屬性
        if(obj.hasOwnProperty(i)){
            // 判斷obj子元素是否為對象，如果是， 遞歸調用；如果不是直接復制
            cloneObj[i]=typeof obj[i]=="object" ? deepClone(obj[i]) : obj[i];
        }
    }
    return cloneObj;
}

2)利用JSON——一行代碼的深拷貝

cloneJSON內部也是使用遞歸的方式，原來是JSON.stringify內部做了循環引用的檢測。

function cloneJSON(source) {
    return JSON.parse(JSON.stringify(source));
}

parse方法用于將字符串解析為 JSON，可以任意轉換生成的值及其屬性，并返回值。sretingify方法用于從一個對象中解析出json字符串。
什么意思呢？就是將一個對象先解析為json對象，然后再解析成object對象。變來變去順道創建個對象完成復制。

GPU云服務器云服務器 js clone數據類型 Clone Cloning git clone

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

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

js克隆一個對象，支持循環引用的克隆

摘要：判斷參數是否為待判斷的參數克隆一個對象要克隆的目標對象克隆節點，綁定事件的有問題，暫不處理克隆在當前作用域，在全局克隆其它對象，通過識別復制后的對象與原對象是否相同來決定傳不傳參數，像數組是不能傳參數的使用防止對象重寫了方法支持節點克隆 (function(){ var toString=Object.prototype.toString,gObj={},cloneHelper=f...

fai1017 2019-08-21 14:16 評論0 收藏0
js實現clone方法對各種數據類型進行復制

摘要：對各種數據類型進行復制，最初的思想是利用判別數據類型后利用語句分別賦值，但是有個問題和返回的都是，所以又要細分為三種情況編寫代碼。其中，要判斷一個對象為數組使用的是方法。對各種數據類型進行復制，最初的思想是利用typeof判別數據類型后利用switch語句分別賦值，但是有個問題：null、Array和Object返回的都是‘object’，所以又要細分為三種情況編寫代碼。其中，要判斷...

CoffeX 2019-08-22 10:40 評論0 收藏0
JS的深淺拷貝

摘要：引用類型之所以會出現深淺拷貝的問題，實質上是由于對基本類型和引用類型的處理不同。另外方法可以視為數組對象的淺拷貝。上面描述過的復雜問題依然存在，可以說是最簡陋但是日常工作夠用的深拷貝方式。一直想梳理下工作中經常會用到的深拷貝的內容，然而遍覽了許多的文章，卻發現對深拷貝并沒有一個通用的完美實現方式。因為對深拷貝的定義不同，實現時的edge case過多，在深拷貝的時候會出現循環引用等問...

xiaoxiaozi 2019-08-21 16:49 評論0 收藏0
復習Javascript專題（四）：js中的深淺拷貝

摘要：基本數據類型的復制很簡單，就是賦值操作，所以深淺拷貝也是針對，這類引用類型數據。它會拋棄對象的。另外，查資料過程中還看到這么一個詞結構化克隆算法還有這一篇資料也有參考，也寫得比較詳細了的深淺拷貝基本數據類型的復制很簡單，就是賦值操作，所以深淺拷貝也是針對Object，Array這類引用類型數據。淺拷貝對于字符串來說，是值的復制，而對于對象來說則是對對象地址的復制；而深拷貝的話，它不...

MobService 2019-08-23 13:40 評論0 收藏0
JS面向對象的程序設計之繼承的實現-原型式繼承和寄生式繼承

摘要：通過新增方法規范了原型式繼承。適用場景在沒有必要興師動眾地創建構造函數，而只想讓一個對象與另外一個對象保持類似的情況下，原型式繼承是完全可以勝任的。在主要考慮對象而不是自定義類型和構造函數的情況下，寄生式繼承也是一種有用的模式。 --前言：最近在細讀Javascript高級程序設計，對于我而言，中文版，書中很多地方翻譯的差強人意，所以用自己所理解的，嘗試解讀下。如有紕漏或錯誤，會非常感...

lewinlee 2019-08-23 12:31 評論0 收藏0
在js中的深復制實現方法

摘要：針對本話題，我在年月發布了新的文章深入剖析的深復制要實現深復制有很多辦法，比如最簡單的辦法有上面這種方法好處是非常簡單易用，但是壞處也顯而易見，這會拋棄對象的，也就是深復制之后，無論這個對象原本的構造函數是什么，在深復制之后都會變成。針對本話題，我在2015年5月發布了新的文章：深入剖析 JavaScript 的深復制要實現深復制有很多辦法，比如最簡單的辦法有： var...

Alliot 2019-08-19 14:44 評論0 收藏0