在js中的深復制實現(xiàn)方法

Alliot 發(fā)布于2019-08-19 14:44 / 3295人閱讀

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

針對本話題，我在2015年5月發(fā)布了新的文章：深入剖析 JavaScript 的深復制

要實現(xiàn)深復制有很多辦法，比如最簡單的辦法有：

var cloneObj = JSON.parse(JSON.stringify(obj));

上面這種方法好處是非常簡單易用，但是壞處也顯而易見，這會拋棄對象的constructor，也就是深復制之后，無論這個對象原本的構造函數(shù)是什么，在深復制之后都會變成Object。另外諸如RegExp對象是無法通過這種方式深復制的。

所以這里我將介紹一種，我自認為很優(yōu)美的深復制方法，當然可能也存在問題。如果你發(fā)現(xiàn)了我的實現(xiàn)方法有什么問題，請及時讓我知道~

先決條件：
1. 對于任何對象，它可能的類型有Boolean, Number, Date, String, RegExp, Array 以及 Object（所有自定義的對象全都繼承于Object）
2. 我們必須保留對象的構造函數(shù)信息（從而使新對象可以使用定義在prototype上的函數(shù)）

最重要的一個函數(shù)：

Object.prototype.clone = function () {
    var Constructor = this.constructor;
    var obj = new Constructor();

    for (var attr in this) {
        if (this.hasOwnProperty(attr)) {
            if (typeof(this[attr]) !== "function") {
                if (this[attr] === null) {
                    obj[attr] = null;
                }
                else {
                    obj[attr] = this[attr].clone();
                }
            }
        }
    }
    return obj;
};

定義在Object.prototype上的clone()函數(shù)是整個方法的核心，對于任意一個非js預定義的對象，都會調用這個函數(shù)。而對于所有js預定義的對象，如Number,Array等，我們就要實現(xiàn)一個輔助clone()函數(shù)來實現(xiàn)完整的克隆過程：

/* Method of Array*/
Array.prototype.clone = function () {
    var thisArr = this.valueOf();
    var newArr = [];
    for (var i=0; i

可能直接定義在預定義對象的方法上，讓人感覺會有些問題。但在我看來這是一種優(yōu)美的實現(xiàn)方式。

同時我也在開發(fā)一個插件，主要的思想也就是擴展預定義對象的方法。

這個插件叫JustJS（Github項目地址）

有以下一些特性：

1. 同時支持Web前端和node.js使用。

2. 直接對預定義對象的方法進行擴展

3. 使用 J(function(){...}) 語句塊，決不污染全局命名空間。

目前只寫了一小部分，同時也寫了些簡單的文檔，有興趣的同學可以看一下，也可以加入我，Fork我的項目，喜歡的同學還可以給Star！

GPU云服務器云服務器 js中的replace方法 js中的字符串方法 js實現(xiàn)數(shù)據(jù)調用方法有哪些復制方法

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

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

JS 中的深拷貝與淺拷貝

摘要：什么是深拷貝淺拷貝見名知義，無論是深拷貝還是淺拷貝，都是的問題。使用如下以上就是關于中的深拷貝與淺拷貝的知識和如何進行深拷貝的知識了，如果有錯或者有其他方式的話，歡迎在下面留言評論啦前言最近在寫項目的時候涉及到一些父子組件傳遞個對象或者數(shù)組通信啥的，或者是直接復制添加對象啥的，直接使用賦值的時候總會出錯。一查原來是淺拷貝的問題，就從網上找了點資料，匯總到這里來了。 1 什么是深拷貝...

ztyzz 2019-08-23 13:41 評論0 收藏0
深入剖析 JavaScript 的深復制

摘要：的不能算作深復制，但它至少比直接賦值來得深一些，它創(chuàng)建了一個新的對象。它們的主要用途是對存在環(huán)的對象進行深復制。比如源對象中的子對象在深復制以后，對應于。希望這篇文章對你們有幫助深復制方法所謂擁抱未來的深復制實現(xiàn)參考資料本文最初發(fā)布于我的個人博客：咀嚼之味一年前我曾寫過一篇 Javascript 中的一種深復制實現(xiàn)，當時寫這篇文章的時候還比較稚嫩，有很多地方沒有考慮仔細。...

gclove 2019-08-22 11:51 評論0 收藏0
js深淺復制

摘要：總結綜上所述，數(shù)組的深拷貝比較簡單，方法沒有什么爭議，對象的深拷貝，比較好的方法是用的方法實現(xiàn)，或者遞歸實現(xiàn)，比較簡單的深復制可以使用實現(xiàn)參考資料知乎中的深拷貝和淺拷貝深入剖析的深復制深淺復制對比因為JavaScript存儲對象都是存地址的，所以淺復制會導致 obj 和obj1 指向同一塊內存地址。我的理解是，這有點類似數(shù)據(jù)雙向綁定，改變了其中一方的內容，都是在原來的內存基礎上做...

Apollo 2019-08-19 18:44 評論0 收藏0
JS中的深拷貝與淺拷貝

摘要：深拷貝和淺拷貝最根本的區(qū)別在于是否是真正獲取了一個對象的復制實體，而不是引用，深拷貝在計算機中開辟了一塊內存地址用于存放復制的對象，而淺拷貝僅僅是指向被復制的內存地址，如果原地址中對象被改變了，那么淺拷貝出來的對象也會相應改變。深拷貝和淺拷貝最根本的區(qū)別在于是否是真正獲取了一個對象的復制實體，而不是引用，深拷貝在計算機中開辟了一塊內存地址用于存放復制的對象，而淺拷貝僅僅是指向被...

wuyumin 2019-08-22 16:11 評論0 收藏0
JS中的深拷貝與淺拷貝

摘要：中的深拷貝與淺拷貝說到深淺拷貝的時候就不得不說一下中的變量類型了基本類型按值存放在棧內存中的簡單數(shù)據(jù)段可以直接訪問引用類型存放在堆內存中的對象變量保存的是一個指向存放數(shù)據(jù)位置的指針訪問引用類型的值時首先從棧中獲取到存放該數(shù)據(jù)位置的指針然后再 JS中的深拷貝與淺拷貝說到深淺拷貝的時候就不得不說一下JS中的變量類型了: 基本類型: undefined、null、boolean、numb...

ARGUS 2019-08-26 12:13 評論0 收藏0