JavaScript浅克隆和深克隆

一、浅克隆
        浅克隆是指对象只会被克隆最外部的一层,对于更深层的对象,则依然是通过引用指向同一块堆内存区域。
      

[JavaScript]  纯文本查看  复制代码

?

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<script>[/font] [font=微软雅黑]         // 浅克隆函数              function shallowClone(o) {                  var obj = {};                  for ( var i in o) {                      obj[i] = o[i];                  }                  return obj;              }              // 被克隆对象              var oldObj = {                  a: 1,                  b: [ 'e' , 'f' , 'g' ],                  c: {                      h: {                          i: 2                      }                  }              };              var newObj = shallowClone(oldObj);              console.log(newObj.c.h, oldObj.c.h); // { i: 2 } { i: 2 }              console.log(oldObj.c.h === newObj.c.h); // true      </script>

debug结果:

我们可以很看到,虽然oldObj.c.h被克隆了,但是它还与oldObj.c.h相等,这表明他们依然指向同一段堆内存,如果对newObj.c.h进行修改,也会影响oldObj.c.h。


二、深克隆
      JSON对象parse方法可以将JSON字符串反序列化成JS对象，stringify方法可以将JS对象序列化成JSON字符串,这两个方法结合起来就能产生一个便捷的深克隆。
     

[JavaScript]  纯文本查看  复制代码

?

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22

<script>[/font] [font=微软雅黑]         // 浅克隆函数              function shallowClone(o) {                  var obj = {};                  for ( var i in o) {                      obj[i] = o[i];                  }                  return obj;              }              var oldObj = {                  a: 1,                  b: [ 'e' , 'f' , 'g' ],                  c: {                      h: {                          i: 2                      }                  }              };              var newObj = JSON.parse(JSON.stringify(oldObj)); // 将oldObj先序列化再反序列化。              console.log(newObj.c.h, oldObj.c.h); // { i: 2 } { i: 2 }              console.log(oldObj.c.h === newObj.c.h); // false 这时候就已经不一样了      </script>

     debug结果:

我们可以很看到,oldObj.c.h与oldObj.c.h不相等了,这表明他们指向了不同的一段堆内存,如果对newObj.c.h进行修改,则oldObj.c.h不受印象。