一篇彻底搞定对象的深度克隆 | 包括function和symbol类型

前言

此文解决的痛点：网上有很多关于对象深度克隆的文章资料，但是很多讲得都不太全！

我的目的是：需要深度克隆对象中所有可能出现的数据类型，包括function和symbol类型！

为了不乱，我将本文结构分成两个部分：

1. 梳理几种常见的深度克隆方式
2. 手写实现深度克隆，包含所有类型的值，如对象中的function和symbol。（这部分将是本文重点，也是本文的出现意义所在！）

梳理几种常见的深度克隆方式

这里简单说下3种深度克隆对象的方式

1. 通过扩展运算符...

var a = {name:"aaa"}
var b = {...a}

1. 通过合并对象的方法Object.assign

var newObj = Object.assign([],oldObj);

1. 通过json的方法实现

var obj = {a:1};
var str = JSON.stringify(obj); //序列化对象
var newobj = JSON.parse(str); //还原

他们有各自的缺点，比如：

...是后面新增的;

Object.assign只实现第一层深度拷贝，后续层次还是浅拷贝;

通过json的方法实现深度克隆时，如果obj里面有时间对象，则JSON.stringify后再JSON.parse的结果，时间将只是字符串的形式。而不是时间对象；如果obj里有RegExp、Error对象，则序列化的结果将只得到空对象；如果obj里有function、undefined，则序列化的结果会把函数或 undefined丢失；如果obj里有NaN、Infinity和-Infinity，则序列化的结果会变成null

而且还都没考虑symbol

手写实现深度克隆

思路

我的思路很简单，首先梳理对象中可能出现的数据类型，然后逐一克隆

梳理数据类型

为了不乱，我将JavaScript的数据类型分两大类：

1. 原始值类型，包括number、string、boolean、null、undefined
2. 引用值类型，包括object、function、array

当然ES6 引入的新的数据类型symbol，也要考虑进来

下面我们将实现上述8种数据类型的克隆

实现

原始值的克隆

事实上，对于原始值的赋值，本质就是值的拷贝

所以，我们需要将对象中的原始类型属性遍历出来，思路如下：

1. 通过for in遍历出对象身上的所有属性，但是for in会遍历到原型