JS實現(xiàn)深度克隆

一、概念

深度克隆:深度克隆的新對象可以完全脫離原對象,我們對新對象的修改不會反映到原對象中

二、知識點儲備:

1. 函數(shù)的克隆直接通過普通賦值的方式,就實現(xiàn)了函數(shù)的克隆,并且不會影響之前的對象。原因就是函數(shù)的克隆會在內(nèi)存單獨開辟一塊空間,互不影響。
        var Person = function(){
            this.name = "dai"
            this.friends = ["A","B"]
        }

        var n = Person 
        n = function (){
            console.log("message");
        } 
        console.log(n)
         /*function (){
            console.log("message");
        }*/
        console.log(Person)
        /*function(){
            this.name = "dai"
            this.friends = ["A","B"]
        }
        */
2.安全的類型檢測:Object.prototype.toString.call(value) [Object NativeConstructor](字符串類型的值)
        console.log(Object.prototype.toString.call('dai') );// [object String]
        console.log( Object.prototype.toString.call(123) );// [object Number]
        console.log( Object.prototype.toString.call({name:"lu"}) );//[object Object]
        console.log( Object.prototype.toString.call([1,2]) );// [object Array]
3. 需求:只克隆對象、數(shù)組、函數(shù)、原始類型值的屬性,原型鏈上繼承過來的屬性也克隆過來
4.實現(xiàn)深度拷貝的思路:
  • 先判斷傳入值得類型,如果是對象則讓最終的返回值是對象類型,同理數(shù)組,其他類型的值直接返回就Ok
  • 在傳入類型是對象或者數(shù)組的情況下,遍歷傳入對象的key,如果key對應(yīng)的value還是對象或者數(shù)組,則遞歸函數(shù)本身(深層遍歷),如果key對應(yīng)的value是除了對象和數(shù)組以外的值則把對應(yīng)的key和value都給函數(shù)最終要返回的結(jié)果
  • 返回結(jié)果

三、代碼實現(xiàn):

      var isClass = function (o){
                return Object.prototype.toString.call(o).slice(8,-1)
            }

        var deepClone = (function deepClone(obj){
            var result,
                oClass = isClass(obj);
            if(oClass==='Object'){
                result = {}
            }else if(oClass==='Array'){
                result =  []
            }else{
                return obj
            }

            if(oClass==='Object'){
                for(var key in obj){
                    result[key]  = deepClone(obj[key])  
                }
            }else if(oClass==="Array"){
                for(var i=0;i<obj.length;i++){
                    result.push(deepClone(obj[i]))
                }
            }

            return result
        })

        var orgin = {
            name:{
                firstName:"dai",
                lastName:"lu"
            },
            firends:[{name:"A"},{name:"B"}],
            age:26
        }

        var clone = deepClone(orgin);
        console.log(clone);
        clone.firends.push({name:"C"})
        console.log(orgin.firends);
當然:如果不想克隆原型鏈上繼承過來的屬性,只要在for in循環(huán)里使用obj.getOwnProperty()做一下判斷就可以過濾掉原型鏈上繼承過來的屬性了
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 136,554評論 19 139
  • 開始的喜悅 上書法課的時候,臨習(xí)顏真卿的勤禮碑。臨習(xí)了快一年的時間,最初開始進步很明顯,而且興趣深厚。每一...
    木棉紀閱讀 907評論 7 50
  • 自己一個不與人交流孤單久了自會傷感,想起往事,不斷沉淪 直至無法自拔,最終靠煙或酒來一次宿醉,從此下定決心不再回憶...
    鹿死玫瑰海半糖閱讀 244評論 0 0
  • .【好文分享】 登機落座,身邊是一位瘦小的老太太,在ipad 上聚精會神地玩撲克游戲,起飛,她靠著舷窗睡著了...
    陽光雨628閱讀 441評論 0 2
  • 奇葩的賽制讓比賽既有不言而喻的默契,又有刀山油鍋的死磕,足球世界的宮心計抓人眼球…… 法國Vs瑞士 ...
    伊菡聊球閱讀 258評論 0 0

友情鏈接更多精彩內(nèi)容