JavaScript學習之對象拷貝

Aklman 發布于2019-08-23 12:15 / 1058人閱讀

摘要：對象拷貝可遍歷屬性淺拷貝簡單的淺拷貝可以用，對存取器定義的對象也試用深拷貝屬性描述對象的拷貝這是個淺拷貝深拷貝不可遍歷屬性對象的拷貝例如拷貝獲得共同的原型，與是兄弟關系說明也繼承了原型，同級別簡潔化版

對象拷貝 可遍歷屬性

淺拷貝

if(typeof Object.prototype.copy != "function") {
    Object.prototype.copy = function () {
        var obj = {};
        for(var i in this) {
            this.hasOwnProperty(i) ? obj[i] = this[i] : false;
            //if(this.hasOwnProperty(i)) {
            //    obj[i] = this[i];
            //}
            
        }
        return obj
    }
}
var o ={a : 1, b : 2,c : {c : 3}};
console.log(o.copy());

簡單的淺拷貝,可以用Object.assign，對存取器定義的對象也試用

var o ={a : 1, b : 2,c : {d : {get t() {return 123}}}};  
console.log(Object.assign(o));

深拷貝

if(typeof Object.prototype.deepCopy != "function") {
    Object.prototype.deepCopy = function () {
        var obj = {};
        for(var i in this) {
            if(this.hasOwnProperty(i)) {
                if(typeof this[i] === "object") {
                    obj[i] = this[i].deepCopy()
                }
                else{
                    obj[i] = this[i];
                }
                
            }
            //this.hasOwnProperty(i) ? obj[i] = this[i] : false;
        }
        return obj
    }
}
var o ={a : 1, b : 2, c : {d : {e : 4}}};

var deepO = o.deepCopy();
//o.c.d.e = 5;
o.c.d = 3;
console.log(deepO);       //{a : 1, b : 2, c : {d : {e : 4}}}
console.log(o);           //{a : 1, b : 2, c : {d : 3}}

屬性描述對象的拷貝

這是個淺拷貝

var o = {get c() {return 123}};
if(typeof Object.prototype.extend != "function") {
    Object.prototype.extend = function () {
        var obj = {};
        for(var property in this) {
            if(this.hasOwnProperty(property)) {
                Object.defineProperty(
                    obj, 
                    property, 
                    Object.getOwnPropertyDescriptor(this, property)
                );
            }

        }    
        return obj;
    }
}

var cpo = o.extend();
console.log(cpo);

深拷貝

var o = {a : 1, b : 2,c : {d : {get t() {return 123}}}};
if(typeof Object.prototype.deepExtend != "function") {
    Object.prototype.deepExtend = function () {
        var obj = {};
        for(var property in this) {
            if(this.hasOwnProperty(property)) {
                if(typeof this[property] === "object") {
                    obj[property] = this[property].deepExtend();

                }
                else{
                    Object.defineProperty(
                        obj, 
                        property, 
                        Object.getOwnPropertyDescriptor(this, property)
                    );
                }
            }

        }    
        return obj;
    }
}

var cpo = o.deepExtend();

o.c.d = {get t() {return 456}};
console.log(cpo);     //{a : 1, b : 2,c : {d : {get t() {return 123}}}}
console.log(o);       //{a : 1, b : 2,c : {d : {get t() {return 456}}}}

不可遍歷屬性對象的拷貝

例如拷貝Object.prototype

if(typeof Object.prototype.allCopy != "function") {
    Object.prototype.allCopy = function () {
        //獲得共同的原型，target與this是兄弟關系
        var target = Object.create(Object.getPrototypeOf(this));
        var property = Object.getOwnPropertyNames(this);

        property.forEach(function (elem) {
            Object.defineProperty(
                target,
                elem,
                Object.getOwnPropertyDescriptor(this, elem)
                )
        },this);
        return target;
    }
}
console.log(Object.prototype.allCopy());
console.log(Object.allCopy().prototype); //說明也繼承了原型，同級別
//{allCopy: ?, constructor: ?, __defineGetter__: ?, __defineSetter__: ?, hasOwnProperty: ?,?…}
//{allCopy: ?, constructor: ?, __defineGetter__: ?, __defineSetter__: ?, hasOwnProperty: ?,?…}

簡潔化版

if(typeof Object.prototype.allCopy != "function") {
    Object.prototype.allCopy = function () {
        var target = Object.create(Object.getPrototypeOf(this), Object.getOwnPropertyDescriptors(this));
        return target;
    }
}
console.log(Object.prototype.allCopy());
console.log(Object.allCopy().prototype);
//{allCopy: ?, constructor: ?, __defineGetter__: ?, __defineSetter__: ?, hasOwnProperty: ?,?…}
//{allCopy: ?, constructor: ?, __defineGetter__: ?, __defineSetter__: ?, hasOwnProperty: ?,?…}

GPU云服務器云服務器學習之substr() 深度學習之概要 webrtc學習之九 linux學習之centos

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

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

JavaScript學習之Object(下)相關方法

摘要：它不區分該屬性是對象自身的屬性，還是繼承的屬性。那么我們要遍歷對象所有屬性，包括繼承以及不可遍歷的屬性，用加原型遍歷實現類似的用遞歸 Object靜態方法 Object自身方法，必須由Object調用，實例對象并不能調用 Object.getPrototypeOf() 作用是獲取目標對象的原型 function F() {}; var obj = new F(); console.lo...

amuqiao 2019-08-23 12:15 評論0 收藏0
JavaScript學習之JSON對象

摘要：原始類型的值只有四種字符串數值必須以十進制表示布爾值和不能使用和。字符串必須使用雙引號表示，不能使用單引號。數組或對象最后一個成員的后面，不能加逗號。 JSON對象補充記錄一下，有些方法很需要熟練記憶的 JSON對象的規定 JSON對象對值有嚴格的規定復合類型的值只能是數組或對象，不能是函數、正則表達式對象、日期對象。原始類型的值只有四種：字符串、數值（必須以十進制表示）、布爾值和...

banana_pi 2019-08-23 12:43 評論0 收藏0
jQuery源碼學習之extend

摘要：源碼學習之用于合并對象，可選擇是否深復制。盡管官方文檔明確指出第一個參數是的調用情況并不支持，但是這個版本的源碼中，判斷第一個參數的類型雖有限定是類型，但卻未對其值真假加以限定。調用方式源碼和指向同一個函數，在函數內部，對調用情況進行區分。 jQuery源碼學習之extend $.extend用于合并對象，可選擇是否深復制。使用時，第一個參數為合并后的對象。如果要進行深拷貝，則參數1為...

quietin 2019-08-23 10:27 評論0 收藏0
React學習之漫談React

摘要：事件系統合成事件的綁定方式合成事件的實現機制事件委派和自動綁定。高階組件如果已經理解高階函數，那么理解高階組件也很容易的。例如我們常見的方法等都是高階函數。對測試群眾來說，從質量保證的角度出發，單元測試覆蓋率是事件系統合成事件的綁定方式 `Test` 合成事件的實現機制：事件委派和自動綁定。 React合成事件系統的委托機制，在合成事件內部僅僅是對最外層的容器進行了綁定，并且依賴...

darkbug 2019-08-23 18:38 評論0 收藏0
Javascript學習之繼承

摘要：繼承是面向對象編程語言中的一個重要的概念，繼承可以使得子類具有父類的屬性和方法或者重新定義追加屬性和方法等。但是在中沒有類的概念，是基于原型的語言，所以這就意味著對象可以直接從其他對象繼承。繼承是面向對象編程語言中的一個重要的概念，繼承可以使得子類具有父類的屬性和方法或者重新定義、追加屬性和方法等。但是在Javascript中沒有類的概念，是基于原型的語言，所以這就意味著對象可以直接...

CHENGKANG 2019-08-21 15:34 評論0 收藏0