JavaScript 深層克隆對(duì)象詳解及實(shí)例

更新時(shí)間：2016年11月03日 16:32:40 投稿：lqh

這篇文章主要介紹了 JavaScript 深層克隆對(duì)象的相關(guān)資料,并附實(shí)例代碼，幫助大家學(xué)習(xí)參考這部分知識(shí)，需要的朋友可以參考下

JavaScript 深層克隆對(duì)象

今天做項(xiàng)目，有個(gè)需求需要用到深層克隆對(duì)象，并且要求在原型鏈上編程于是心血來潮索性來復(fù)習(xí)一下這個(gè)知識(shí)點(diǎn)，在網(wǎng)上找了相應(yīng)的知識(shí)，

克隆對(duì)象，這名詞看著高大上，其實(shí)也沒什么，便是拷貝一個(gè)長(zhǎng)的一模一樣的對(duì)象
也許有初學(xué)的小伙伴在想，那還不簡(jiǎn)單么，so easy

var obj1 = {name: 'payen'};

var obj2 = obj1;

這可并不是克隆對(duì)象，obj1和obj2根本就是同一個(gè)對(duì)象，

他倆指向同一個(gè)內(nèi)存地址空間，拿到了同樣的一個(gè)小房子

這是應(yīng)為對(duì)象是引用值

說到引用值

JavaScript中引用值只有對(duì)象

這里注意，數(shù)組是特殊的對(duì)象，函數(shù)也是特殊的可執(zhí)行對(duì)象，也就是說，它們也是對(duì)象，所謂深層克隆對(duì)象就是說它并不想要同樣的房子，房子你也要給我復(fù)制一份一模一樣的不知道我這么說大家能不能理解=￣ω￣= ，也就是深層克隆對(duì)象引用值要拷貝，而相對(duì)的淺層克隆對(duì)象只要把那個(gè)引用值拿過來就好了，不明白不要緊，看完代碼就理解了

首先來一起看看淺層克隆對(duì)象吧

var house = {
  name: 'payen',
  people: {
    father: true,
    mother: true
  }
}
function easyClone(obj){
  var newObj = {};
  for(var prop in obj){
    if(obj.hasOwnProperty(prop)){
      newObj[prop] = obj[prop];
    }
  }
  return newObj;
}
var newHouse = easyClone(house);

不要吐槽我用easy，一時(shí)想不起來“淺”英文咋說來著（真不知道我英語六級(jí)怎么過的）。關(guān)于那個(gè)for-in有一個(gè)小性能問題，感興趣的童鞋可以看看我的另一篇文章

這段代碼很簡(jiǎn)單我就不多解釋了

來看看chrome控制臺(tái)

看樣子很棒的樣子

那么我現(xiàn)在做一件事

給新房子加一個(gè)人

看來這個(gè)”新房子”并不新啊，不要被變量名字迷惑了所以，有引用值出現(xiàn)，淺層克隆并不好用了

既然如此，我們?cè)趺崔k呢

既然要得到新的對(duì)象，我們創(chuàng)建一個(gè)新對(duì)象，把舊對(duì)象內(nèi)部的東西，再拷貝到新對(duì)象不就得了

還有一個(gè)問題如果對(duì)象里還有對(duì)象呢

那么就繼續(xù)重復(fù)創(chuàng)建添加的過程，很顯然是一個(gè)循環(huán)的過程

不過循環(huán)有兩種

迭代

遞歸

毫無疑問遞歸更勝一籌

在遞歸循環(huán)中，遇到滿足終止條件的條件時(shí)逐層返回來結(jié)束，那么我們就可以通過遞歸逐層查找引用值，直到?jīng)]有引用值為止
還是看代碼吧

var house = {
  name: 'payen',
  people: {
    father: true,
    mother: true,
    child: {
      age: 1
    }
  },
  money: [1000,2000,3000]
}
function deepClone(original, target){
  var target = target || {};// 如果target為undefined或沒傳參，設(shè)置空對(duì)象
  for(var prop in original){// 遍歷原對(duì)象
    if(original.hasOwnProperty(prop)){// 只拷貝對(duì)象內(nèi)部，不考慮原型鏈
      if(typeof original[prop] === 'object'){// 引用值
        if(Object.prototype.toString.call(original[prop]) === '[object Array]'){
          target[prop] = [];// 處理數(shù)組引用值
        }else{
          target[prop] = {};// 處理對(duì)象引用值
        }// 可以用三目運(yùn)算符
        deepClone(original[prop],target[prop]);// 遞歸克隆
      }else{// 基本值
        target[prop] = original[prop];
      }  
    }
  }
  return target;
}
var newHouse = deepClone(house);

上面寫了那個(gè)if-else挺適合用三目運(yùn)算符的，不過我感覺太冗長(zhǎng)了，強(qiáng)迫癥表示看了很不舒服，為了證明它真的深層克隆了，我特意把原始房子變復(fù)雜了，（我們不考慮函數(shù)的深層克隆，麻煩并且意義不大），這回它真的是新房子了

我就不展開了

可以看出來在新對(duì)象的引用值改動(dòng)，舊對(duì)象并沒有變

在原型鏈上編程同理

var house = {
  name: 'payen',
  people: {
    father: true,
    mother: true,
    child: {
      age: 1
    }
  },
  money: [1000,2000,3000]
}
Object.prototype.cloneTo = function(obj){
  var obj = obj || {};
  for(var prop in this){
    if(this.hasOwnProperty(prop)){
      if(typeof this[prop] === 'object'){
        if(Object.prototype.toString.call(this[prop]) === '[object Array]'){
          obj[prop] = [];
        }else{
          obj[prop] = {};
        }
        this[prop].cloneTo(obj[prop]);
      }else{
        obj[prop] = this[prop];
      }
    }
  }
  return obj;
}
var newHouse = {};
house.cloneTo(newHouse);

感謝閱讀，希望能幫到大家，謝謝大家對(duì)本站的支持！

您可能感興趣的文章: