JavaScript对象的深拷贝以及浅拷贝分析

前置知识：

    说到深浅拷贝首先要了解的知识是数据类型，那么js中会有两个数据类型分别是 基本类型 和 引用类型。那么这两种数据类型又有什么区别呢，简单来说他们的区别在于存储的位置，基本类型是在栈里储存而引用类型就是在堆里了，那么堆栈的储存有什么区别呢？这个暂且放在后面讲，那么有的同学可能会问了，常见的 Object Number 不是也是数据类型吗，其实 Object Number 这些数据类型和上面讲的基本类型以及引用类型是包含关系我们用下面的图来做说明。

补充一点：基本类型又叫原始类型，可能还会有人会问 NaN 是个啥，NaN 在数据类型上数据 Number，只不过它比较狠，是个特殊的 Number，特殊到他自己都不等于他自己。

那么我们再来看一个问题堆和栈的储存有什么区别？先看下面这段代码的输出:

var a = 1
console.log(a)  // 1
var b = a
console.log(b)  // 1
b = 2
console.log(a)  // 1
console.log(b)  // 2
/* b的改变并没有影响到a */

var c = [1,2]
console.log(c)  // [1,2]
var d = c        
console.log(d)  // [1,2]
d.push(3)     
console.log(c)  // [1,2,3]
console.log(d)  // [1,2,3]
/* d的改变影响到了c */

下面我们一步一步分析上面的代码：

var a = 1 这一步会在栈里开辟一个空间 a 空间里面储存值 1


var b = a 这一步会继续在栈里开辟一个空间 b 空间里面储存由 a 复制而来的值

b = 2 这时把b的值进行修改，因为基本数据类型是按值访问的，所以直接修改了空间 b 里面的内容。

下面我们来创建一个引用类型的值 var c = [1,2] ，我们来分析这一步的过程：首先在栈里开辟一个 c 空间，c 空间储存的不是数据 [1,2] ，而是形如 0x0901 这种格式的地址，这个地址会指向堆里面的一个空间，堆里面的这个空间才会储存实际的数据 [1,2] , 用图表示就是下面这个样子。

当执行 var d = c 的时候首先在栈里面开辟一个 d 空间，d 空间存放由 c 复制而来的内容，这个时候要注意由 c 复制而来的是地址而不是实体数据。这个时候 c 和 d 里面存放的是同一个地址，指向堆里面共同的区域。

现在执行最后一步 d.push(3) 对 d 进行操作的时候因为 d 是引用类型，所以不会直接操作栈里面的空间 d，而是通过空间 d 里面的地址去找到堆里面储存的数据进行相应的操作，这也就解释了为什么对 d 进行 push 操作的时候 c 会改变了，因为他们通过相同的地址指向相同的空间，引用了相同的数据。

堆栈相关的内容已经叙述完了，我们再来看文章开始讲到的数据类型，null 和 undefined 他俩是属于基本类型，那他俩是用来干什么的，undefined 用于初始化未赋值的变量，null 用来主动释放对象，主动释放的对象无法找回。

有同学会问了为什么要释放对象，还要主动，这里又得引入一个概念垃圾回收机制!

我们来看下面的操作:

var a = [1,2,3]
a = [4,5,6]

这两句复制语句的运行原理是这样的：

栈中创建一个变量空间 名为a
堆中创建一个储存空间 地址假设为0x0901
栈中变量中存储的地址是0x0901
堆空间中储存的是实际数据
a变量引用了堆中的一个数组对象

当执行 a = [ 4,5,6 ] 的时候
会在堆中新创建一个数组对象
将新对象地址保存到原a变量中替换旧地址
旧数组对象被释放

下面这段话引自《JavaScript权威指南（第四版）》

    由于字符串、对象和数组没有固定大小，所有当他们的大小已知时，才能对他们进行动态的存储分配。JavaScript程序每次创建字符串、数组或对象时，解释器都必须分配内存来存储那个实体。只要像这样动态地分配了内存，最终都要释放这些内存以便他们能够被再用，否则，JavaScript的解释器将会消耗完系统中所有可用的内存，造成系统崩溃。

    这段话解释了为什么JavaScript需要垃圾回收，那么JavaScript的解释器可以检测到何时程序不再使用一个对象了，当他确定了一个对象是无用的时候，他就知道不再需要这个对象，可以把它所占用的内存释放掉了。那怎么确定一个对象什么时候无用呢，就是上面提到的“被释放”。要注意的是这个过程是有延时的，也就是说回收要比释放晚。

我们来总结两句废话：

  • 对象在没有变量“引用”的时候会被垃圾回收程序回收
  • 只要对象还有变量“引用”垃圾回收程序就不会回收

好了，上面粗略的介绍了堆栈概念和垃圾回收，现在可以正式引入深拷贝和浅拷贝这两个概念了。

深拷贝与浅拷贝有什么区别？
    简单点来说，就是假设B复制了A，当修改A时，看B是否会发生变化，如果B也跟着变了，说明这是浅拷贝，如果B没变那就是深拷贝。

浅拷贝没什么好展开说的，我们直接来说深拷贝，那么从堆栈储存原理上怎么才能实现深拷贝呢，我们来看下面的图：


下面我们列举几种常见的对象拷贝方法以及各种方法的特点 ：

1.大家知道数组有很多方法会返回一个新数组，那这些方法是不是可以变相的实现深拷贝呢我们以 slice 为例：

var a = [1,2]
var b = a.slice(0,2)
b.push(3)
console.log(a)  // [1,2]
console.log(b)  // [1,2,3]

看起来可以其实不然，我们接着再看。

var a = [1, [1,2] ]
var b = a.slice(0,2)
b[1].push(3)
console.log(a)  // [1, [1,2,3] ]
console.log(b)  // [1, [1,2,3] ]

结局很明朗数组这些方法只能实现一维数组的深拷贝多维数组就无能为力了。

2.Object.assign() 是es6的方法，用来合并对象，详细的用法请各位同学自行查阅文档，我们来看一下用他来实现深拷贝。

var a = {name: {myName: 'chuan'}, class:'zhang'}
var b = Object.assign({},a)
a.class = 'zhang2'
a.name.myName = 'chuan2'
console.log(a)  // {name: {myName: 'chuan2'}, class:'zhang2'} 
console.log(b)  // {name: {myName: 'chuan2'}, class:'zhang'}

结局依然明朗还是无法实现深层的拷贝

3.用 JSON.parse( JSON.stringify( obj ) ) 做深拷贝简单暴力，但是有一个问题就是他不支持function以及一些特殊值的拷贝，比如：

var a = { fun: function(){ alert('1') }, a: undefined, c: NaN }
var b = JSON.stringify(a)
console.log(b)     //   { c: null }

可以看到只是把 c 的值 NaN 输出成了 null ，undefined 和 function 都被忽略了，这是因为 JSON.stringify 函数会将一个JavaScript对象转换成文本化的JSON。不能被文本化的属性会被忽略。

4.既然上面的方法都不能完成的实现深拷贝，那么可以自己实现一个方法通过循环遍历来实现深拷贝的功能。

function deepCopy(obj) {
  let result = obj instanceof Array ? [] : {}  // 判断数据类型
  let keys = Object.keys(obj), key = null, temp = null;
  for (let i = 0; i < keys.length; i++) {
    key = keys[i]
    temp = obj[key]
    result[key] = temp
  }
  return result;
}

现在的 deepCopy 函数也只是实现了第一层的拷贝，如果有复杂的数据结构还是无法实现深层的拷贝，那么我们在 result[key] = temp 的时候需要对 temp 做一次判断如果是 object 类型就再去做一次遍历，这样自然的就想到了递归。

function deepCopy(obj) {
  let result = obj instanceof Array ? [] : {}
  let keys = Object.keys(obj), key = null, temp = null;
  for (let i = 0; i < keys.length; i++) {
    key = keys[i]
    temp = obj[key]
    if (temp && typeof temp === 'object') {
      result[key] = deepCopy(temp)  // 递归
    } else {
      result[key] = temp
    }
  }
  return result;
}

我们看一下现在是不是已经解决了之前深层拷贝的问题，来模拟一个略复杂的 object 结构。

var obj = {
  name: {
    myName: 'chuan' 
  },
  arr: [1,[2,3]],
  type: undefined,
  empty: null,
  fun: function() {
    console.log('chuan')
  }
}

var obj2 = deepCopy(obj)
obj.name.myName = 'chuan2'
obj.arr.push(5)
obj.arr[1].push(4)
obj.fun = function(){console.log('chuan2') }

console.log(obj2.name.myName) // chuan
console.log(obj2.arr)   // [1,[2,3]]
obj2.fun()  // chuan

看似完美其实并没有，如果有一个对象的某个属性引用了这个对象自身呢，这样会不会在递归中死循环下去，我们看下面这个例子:

var obj3 = {
    name: 'chuan'
  }
  obj3.obj = obj3
  deepCopy(obj3)

华丽的报了一个堆栈溢出的错误


image.png

那我们处理一下这个问题简单做一下判断就好

function deepCopy(obj) {
    let result = obj instanceof Array ? [] : {}
    let keys = Object.keys(obj), key = null, temp = null;
    for (let i = 0; i < keys.length; i++) {
      key = keys[i]
      temp = obj[key]
      if (temp && typeof temp === 'object') {
        if(temp != obj){  // 解决堆栈溢出
          result[key] = deepCopy(temp)
        }
      } else {
        result[key] = temp
      }
    }
    return result;
  }

好了大结局了，简单对堆栈理论和深拷贝做了分析，其实还有很多值的仔细推敲的地方，比如 es6 关于object 的一些新增 api，用 keys 方法做遍历是不是最优的方案，以及es6一些新增数据类型的拷贝也没有做测试，正则表达式的拷贝，是不是可以用 call 来实现继承，数据类型的判断用 instanceof 是不是更好，这些坑就留给大家自己填了。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,293评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,604评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,958评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,729评论 1赞 277
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,719评论 5赞 366
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,630评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,000评论 3赞 397
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,665评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,909评论 1赞 299
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,646评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,726评论 1赞 330
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,400评论 4赞 321
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,986评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,959评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,197评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 44,996评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,481评论 2赞 342