1. 简述深拷贝
JavaScript 中有2种变量类型：值类型（基本类型）和引用类型。
深拷贝和浅拷贝都是针对引用类型。
-
浅拷贝
创建一个新的对象，把原有对象的属性值，其中包括了基本类型的值，和引用类型的内存地址，完整的拷贝过去。
如果其中一个对象改变了引用类型的内存地址，就会影响到另一个对象。 -
深拷贝
将一个对象从内存中完整的拷贝一份出来，从堆内存中开辟一个新的区域存放新对象，且修改新对象不会影响原对象。
简单理解：b是a的一份拷贝，b中没有对a中对象的引用（b的任意一个对象的属性，都没有引用到a），那就说明b是a的 深拷贝。
2. 写之前先考虑
- 数据类型：基本类型还是引用类型
- 数据规模：数据有多少属性
- 性能要求：对时间、速度、空间是否有要求
- 运行环境：在IE6 还是 Chrome 里运行
- 其他 ...
3. 使用JSON序列化 - 反序列化法
var a = {
b: 1,
c: [1,2,3],
d: { d1: "ddd1", d2: "ddd2"}
}
var a2 = JSON.parse(JSON.stringify(a))
a2.b = 2
console.log(a.b) //1
a2.c[1] = 222
console.log(a.c[1]) //2
a2.d.d2 = "ccc"
console.log(a.d.d2) //ddd2
JSON.stringify()方法：将一个JS对象或数组转换为一个JSON字符串
JSON.parse() 方法用来解析JSON字符串，构造由字符串描述的JS值或对象。
但，此方案的缺点是：
- 不支持拷贝函数（会忽略掉函数）
var a = {
f: function(){ },
name: "a"
}
var a2 = JSON.parse(JSON.stringify(a))
console.log(a2) // {name: "a"}
- 不支持所有JSON不支持的类型，如
undefined
var a = {
u: undefined,
name: "a"
}
var a2 = JSON.parse(JSON.stringify(a))
console.log(a2) // {name: "a"}
- 不支持引用
var a = {
name: "a"
}
a.self = a //引用自身
var a2 = JSON.parse(JSON.stringify(a))
console.log(a2) //报错
- 不支持
Date
var a = {
time: new Date(),
name: "a"
}
var a2 = JSON.parse(JSON.stringify(a))
console.log(a2) //输出了日期 new Date()的字符串形式（ISO8601时间字符串格式）
- 不支持正则表达式
var a = {
name: "a",
regex: /hi/
}
var a2 = JSON.parse(JSON.stringify(a))
console.log(a2) //{name: "a", regex: {}} 输出的是空对象
如果数据类型包含了：Date，引用，函数，undefined等，如何深拷贝？
4. 递归克隆
思路：
先判断节点类型
- 基本类型：直接拷贝
- 引用类型（object）：分情况讨论
①普通object: 用for in？ 注意，for in默认会遍历原型上的属性
②数组array
③函数function
④日期Date
4.1 基本类型的拷贝
function deepClone(source) {
return source
}
调用 deepClone传递参数时，进行了一份复制，所以 deepClone直接 return出来就行。
4.2 引用类型的拷贝
4.2.1 普通对象
怎么判断是不是对象？ → instanceof
如果是对象，遍历对象的每一个属性，对每个属性进行克隆。
function deepClone(source) {
if (source instanceof Object) {
let dist = new Object()
for (let key in source) {
dist[key] = deepClone(source[key])
}
return dist
}
return source
}
4.2.2 数组
function deepClone(source){
if(source instanceof Object){
let dist
if(source instanceof Array){
dist = new Array()
}else{
dist = new Object()
}
for(let key in source){
dist[key] = deepClone(source[key])
}
return dist
}
return source
}
4.2.3 函数
难点：怎么拷贝函数的函数体和参数呢？ → 直接调用
else if (source instanceof Function){
dist = function () { //拷贝参数和函数体
return source.apply(this, arguments)
}
}
4.2.4 如果遇到环
环：window对象里就有环
window.self === window //true
代码中用到了递归，如果遇到环，将无法结束递归，该如何解决？
→ 利用缓存标记，通过缓存检查环，如果第一次出现过，第二次再出现将不克隆。
let cache = [] //初始化
function deepClone(source){
if(source instanceof Object){
let cacheDist = findCache(source)
if(cacheDist){ //有缓存
return cacheDist
}else{ //没缓存
let dist
//...(省略)
cache.push([source, dist])
for(let key in source){
dist[key] = deepClone(source[key])
}
return dist
}
}
return source
}
//查找缓存
function findCache(source) {
for (let i = 0; i < cache.length; i++) {
if (cache[i][0] === source) { //对比 source 返回 dist
return cache[i][1]
}
}
return undefined
}
4.2.5 Date
else if (source instanceof Date) {
dist = new Date(source)
}
4.2.6 RegExp
RegExp的重要属性：
var a = /hi\d+/gi
console.log(a.source) //"hi\d+"
console.log(a.flags) //"gi"
代码实现：
else if (source instanceof RegExp) {
dist = new RegExp(source.source, source.flags)
}
4.2.7 是否需拷贝原型上的属性
一般来说，不拷贝原型上的属性，如果拷贝的话，内存占用太多了。
注意：使用 for in对每个属性克隆时， for in默认会遍历原型上的属性，完善代码：
for (let key in source) {
if (source.hasOwnProperty(key)) {
dist[key] = deepClone(source[key])
}
}
hasOwnProperty()返回一个布尔值，可用于判断对象自身属性中是否有指定的键，会忽略原型上的属性。
5. 完整代码
let cache = [] //初始化
function deepClone(source) {
//先判断是否是Object类型
if (source instanceof Object) {
//判断source是否在缓存里
let cacheDist = findCache(source)
if (cacheDist) { //有缓存
return cacheDist
} else { //没缓存
let dist
if (source instanceof Array) {
dist = new Array()
} else if (source instanceof Function) {
dist = function () {
return source.apply(this, arguments)
}
} else if (source instanceof Date) {
dist = new Date(source)
} else if (source instanceof RegExp) {
dist = new RegExp(source.source, source.flags)
} else {
dist = new Object()
}
cache.push([source, dist])
//遍历每个属性克隆
for (let key in source) {
if (source.hasOwnProperty(key)) {
dist[key] = deepClone(source[key])
}
}
return dist
}
}
return source
}
//查找缓存
function findCache(source) {
for (let i = 0; i < cache.length; i++) {
if (cache[i][0] === source) {
return cache[i][1] //对比 source 返回 dist
}
}
return undefined
}
以上代码还存在一个问题：cache 会被全局共享，造成互相污染。
cache每次存入对象后，没有清空，下次deepClone时会和上一次的互相影响。
改善方法：每次deepClone，只用一个cache，通过面向对象，使用 class。
