javascript中的深復(fù)制

JavaScript深拷貝是初學(xué)者甚至有經(jīng)驗(yàn)的開(kāi)發(fā)著，都會(huì)經(jīng)常遇到問(wèn)題，并不能很好的理解javascript的深拷貝。

       深拷貝(deepClone)是神馬，與深拷貝相對(duì)應(yīng)的就是淺拷貝，剛開(kāi)始我也沒(méi)弄懂。

       在很多情況下，我們都需要給變量賦值，給內(nèi)存地址賦予一個(gè)值，但是在賦值引用值類(lèi)型的時(shí)候，只是共享一個(gè)內(nèi)存區(qū)域，導(dǎo)致賦值的時(shí)候，還跟之前的值保持一直性。

看一個(gè)具體的例子

// 給test賦值了一個(gè)對(duì)象
var test = {
  a: 'a',
  b: 'b'
};

// 將test賦值給test2
// 此時(shí)test和test2是共享了同一塊內(nèi)存對(duì)象，這也就是淺拷貝
var test2 = test;

test2.a = 'a2';

test.a === 'a2'// 為true

如下圖：

這下就很好理解為什么引用值類(lèi)型數(shù)據(jù)相互影響問(wèn)題。

       實(shí)現(xiàn)一個(gè)深拷貝函數(shù)，就不得不說(shuō)javascript的數(shù)值類(lèi)型。下面我們先來(lái)看一個(gè)js有哪幾種數(shù)據(jù)類(lèi)型：

       使用typeof是無(wú)法判斷function和array的，使用instanceof在多個(gè)iframe里也會(huì)出錯(cuò)，我們可以使用Object.prototype.toString方法，它可判斷出各種類(lèi)型。

       默認(rèn)情況下，每個(gè)對(duì)象都會(huì)從Object上繼承到toString()方法，如果這個(gè)方法沒(méi)有被這個(gè)對(duì)象自身或者更接近的上層原型上的同名方法覆蓋(遮蔽)，則調(diào)用該對(duì)象的toString()方法時(shí)會(huì)返回[object type]，這里的字符串type表示了一個(gè)對(duì)象類(lèi)型。

我們先寫(xiě)一個(gè)type函數(shù)，用于接下來(lái)的深復(fù)制時(shí)判斷類(lèi)型：

function type(obj) {
  var toString = Object.prototype.toString;
  var map = {
    '[object Boolean]' : 'boolean', 
    '[object Number]'  : 'number', 
    '[object String]'  : 'string', 
    '[object Function]' : 'function', 
    '[object Array]'  : 'array', 
    '[object Date]'   : 'date', 
    '[object RegExp]'  : 'regExp', 
    '[object Undefined]': 'undefined',
    '[object Null]'   : 'null', 
    '[object Object]'  : 'object'
  };
  return map[toString.call(obj)];
}

       現(xiàn)在已經(jīng)很清楚了，如何實(shí)現(xiàn)深復(fù)制呢，對(duì)于非引用類(lèi)型的數(shù)值，直接賦值，而對(duì)于引用類(lèi)型的值（object）需要多次遍歷，遞歸復(fù)制。

function deepClone(data) {
  var t = type(data), o, i, ni;

  if(t === 'array') {
    o = [];
  }else if( t === 'object') {
    o = {};
  }else {
    return data;
  }

  if(t === 'array') {
    for (i = 0, ni = data.length; i < ni; i++) {
      o.push(deepClone(data[i]));
    }
    return o;
  }else if( t === 'object') {
    for( i in data) {
      o[i] = deepClone(data[i]);
    }
    return o;
  }
}

       這里有個(gè)點(diǎn)大家要注意下，對(duì)于function類(lèi)型，這里是直接賦值的，還是共享一個(gè)內(nèi)存值。這是因?yàn)楹瘮?shù)更多的是完成某些功能，有個(gè)輸入值和返回值，而且對(duì)于上層業(yè)務(wù)而言更多的是完成業(yè)務(wù)功能，并不需要真正將函數(shù)深拷貝。

       淺拷貝，對(duì)于淺拷貝而言，可以理解為只操作一個(gè)共同的內(nèi)存區(qū)域！這里會(huì)存在危險(xiǎn)！

       如果直接操作這個(gè)共享的數(shù)據(jù)，不做控制的話，會(huì)經(jīng)常出現(xiàn)數(shù)據(jù)異常，被其它部分更改。所以應(yīng)該不要直接操作數(shù)據(jù)源，給數(shù)據(jù)源封裝一些方法，來(lái)對(duì)數(shù)據(jù)來(lái)進(jìn)行CURD操作。

       到這里估計(jì)就差不多了，但是作為一個(gè)前端，不僅僅考慮javascript本身，還得考慮到dom、瀏覽器等。

       Element類(lèi)型，來(lái)看下面代碼，結(jié)果會(huì)返回啥呢？

Object.prototype.toString.call(document.getElementsByTagName('div')[0])

經(jīng)過(guò)測(cè)試，返回的是：[object HTMLDivElement]

       有時(shí)候保存了dom元素， 一不小心進(jìn)行深拷貝，上面的深拷貝函數(shù)就缺少了對(duì)Element元素的判斷。而判斷Element元素要使用instanceof來(lái)判斷。因?yàn)閷?duì)于不同的標(biāo)簽，toString會(huì)返回對(duì)應(yīng)不同的標(biāo)簽的構(gòu)造函數(shù)。

function type(obj) {
  var toString = Object.prototype.toString;
  var map = {
    '[object Boolean]' : 'boolean', 
    '[object Number]'  : 'number', 
    '[object String]'  : 'string', 
    '[object Function]' : 'function', 
    '[object Array]'  : 'array', 
    '[object Date]'   : 'date', 
    '[object RegExp]'  : 'regExp', 
    '[object Undefined]': 'undefined',
    '[object Null]'   : 'null', 
    '[object Object]'  : 'object'
  };
  if(obj instanceof Element) {
    return 'element';
  }
  return map[toString.call(obj)];
}

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

最新評(píng)論