js淺度克隆 與 深度克隆

淺層克赂匕帷:當(dāng)克隆引用值時(shí),兩個(gè)對象會共用一個(gè)引用地址毕贼,造成相互的干擾温赔,即我改,它也改鬼癣。

var obj = {
        name : 'abc',
        age : 18,
        sex : 'male'
    }
    var obj1 = {}


    function clone(origin,target){//原始值陶贼,目標(biāo)值
    var target = target || {};//防止用戶不傳target ,我自己建立一個(gè)空對象
        for( var prop in origin){
            target[prop] = origin[prop];
        }
        return target;//然后返回這個(gè)對象
    }
    clone(obj,obj1);

深層克隆
深層克麓骸:克隆出來的對象和原來的對象是相互獨(dú)立的拜秧,互不影響。也就是對新對象的修改都不會反映到原對象中章郁。
1.首先來講解一下深度克隆的思路:
2.遍歷(for var prop in origin)
3.判斷是原始值還是引用值枉氮,判斷方法用typeof()
4.如果是引用值志衍,則繼續(xù)判斷是數(shù)組還是對象,判斷方法instanceof聊替、toString楼肪、constructor
5.建立相應(yīng)的數(shù)組或?qū)ο?br> 6.遞歸

    var obj = {
            name: 'abc',
            age: 20,
            card: ['visa','master'],
            wife:{
                name: 'bcd',
                son:{
                    name: 'aaa'
                }
            }
        };
        var obj1 = {};



        function deepClone(origin,target){
            var target = target || {};
            var toStr = Object.prototype.toString;
            var arrStr = '[object Array]';
            for(var prop in origin){
                //判斷該屬性是自身的還是原型鏈上的
                if (origin.hasOwnProperty(prop)){
                    //判斷出是引用值并且該值不為null
                    if (typeof (origin[prop]) == 'object' && origin[prop] !== 'null'){
                        //判斷該引用值是數(shù)組類型的,則創(chuàng)建一個(gè)新的空的數(shù)組
                        if (toStr.call(origin[prop]) == arrStr){
                            target[prop] = [];
                        }else{
                            target[prop] = {};
                        }
                        deepClone(origin[prop], target[prop]);  //遞歸
                    }
                    else{
                        //因?yàn)槭窃贾等乔模灾苯淤x值就可以
                        target[prop] = origin[prop];
                    }
                }
            }
            return target;
        }

        var targetObj = deepClone(obj,obj1);
        console.log(obj,obj1);

        targetObj['card'][0] = 'zhangsan';
        console.log(obj,obj1);
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末春叫,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子泣港,更是在濱河造成了極大的恐慌暂殖,老刑警劉巖,帶你破解...
    沈念sama閱讀 212,080評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件爷速,死亡現(xiàn)場離奇詭異央星,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)惫东,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,422評論 3 385
  • 文/潘曉璐 我一進(jìn)店門莉给,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人廉沮,你說我怎么就攤上這事颓遏。” “怎么了滞时?”我有些...
    開封第一講書人閱讀 157,630評論 0 348
  • 文/不壞的土叔 我叫張陵叁幢,是天一觀的道長。 經(jīng)常有香客問我坪稽,道長曼玩,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,554評論 1 284
  • 正文 為了忘掉前任窒百,我火速辦了婚禮黍判,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘篙梢。我一直安慰自己顷帖,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,662評論 6 386
  • 文/花漫 我一把揭開白布渤滞。 她就那樣靜靜地躺著贬墩,像睡著了一般。 火紅的嫁衣襯著肌膚如雪妄呕。 梳的紋絲不亂的頭發(fā)上陶舞,一...
    開封第一講書人閱讀 49,856評論 1 290
  • 那天,我揣著相機(jī)與錄音绪励,去河邊找鬼肿孵。 笑死论咏,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的颁井。 我是一名探鬼主播厅贪,決...
    沈念sama閱讀 39,014評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼雅宾!你這毒婦竟也來了养涮?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,752評論 0 268
  • 序言:老撾萬榮一對情侶失蹤眉抬,失蹤者是張志新(化名)和其女友劉穎贯吓,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體蜀变,經(jīng)...
    沈念sama閱讀 44,212評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡悄谐,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,541評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了库北。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片爬舰。...
    茶點(diǎn)故事閱讀 38,687評論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖寒瓦,靈堂內(nèi)的尸體忽然破棺而出情屹,到底是詐尸還是另有隱情,我是刑警寧澤杂腰,帶...
    沈念sama閱讀 34,347評論 4 331
  • 正文 年R本政府宣布垃你,位于F島的核電站,受9級特大地震影響喂很,放射性物質(zhì)發(fā)生泄漏惜颇。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,973評論 3 315
  • 文/蒙蒙 一少辣、第九天 我趴在偏房一處隱蔽的房頂上張望凌摄。 院中可真熱鬧,春花似錦毒坛、人聲如沸望伦。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,777評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至腿箩,卻和暖如春豪直,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背珠移。 一陣腳步聲響...
    開封第一講書人閱讀 32,006評論 1 266
  • 我被黑心中介騙來泰國打工弓乙, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留末融,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,406評論 2 360
  • 正文 我出身青樓暇韧,卻偏偏與公主長得像勾习,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子懈玻,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,576評論 2 349

推薦閱讀更多精彩內(nèi)容