手写系列之超详细的 JavaScript 深拷贝实现

发布于 2023-05-05 21:06:42 字数 5119 浏览 62 评论 0

一、为什么需要拷贝（复制）？

在 JavaScript 中，分为基本数据类型和引用数据类型。

基本数据类型（Primitives，原始类型）
  Undefined
  Null
  Boolean
  String
  Number
  Symbol
  BigInt

引用数据类型（Objects，引用类型）
  Object（包括基于 Object 构造器的派生对象，如 Object、Array、Function、Date、Map 等等一系列的内置对象）

请注意，明确几点！

原始类型的值称为原始值，比如 Boolean 类型的原始值只有 true 和 false。同理，引用类型的值被称为“引用值”。
所有原始值（Primitive Value）都是不可变的（immutable），而且不含任何的属性和方法。

看示例：

// 情况一：只是将一个新值 true 赋予变量 foo，而不是 20 被修改了。
let foo = 20
foo = true

// 情况二：变量 foo 的值，始终没有改变。
let foo = 'foo'
foo.toUpperCase() // "FOO"
foo // "foo"

// 情况三：可以说明将“原始值” num 传入函数 fn，只是将 num 的值拷贝了一份，然后赋予形参 n。并未影响到全局的变量 num。（注意这里指的是原始值，而非引用值）
let num = 1
function fn(n) {
  n++
  console.log(n)
}
fn(num) // 2
num // 1

// 情况四：只是 JS 内部自动隐式类型转换了，当一个原始值访问属性或方法时，
// 会将其转换为对应的引用数据类型，再访问该引用值的属性或方法。（就是常说的包装类）
let foo = 'foo'
foo.length // 3，相当于 Object(foo).length 或 new String(foo).length
foo.toUpperCase() // "FOO"

以上都发生了“拷贝”，只是原始值的拷贝是另外创建一个副本，而原本的值与副本是完全独立，互不干扰的。但如果是“引用值”，那就麻烦了。

const foo = { name: 'Frankie' }
const bar = foo

bar.name = 'Mandy'
foo.name // "Mandy"，修改变量 bar 的时候，foo 的值也发生改变了。

foo === bar // true，由始至终变量 foo 和 bar 都指向同一个地址。

这其实也是拷贝，只不过引用值拷贝的是“地址”（也有人说成“指针”，不重要）。因此，通常我们说的“拷贝”是指引用值的拷贝（或称为复制）。

浅拷贝
- Array.prototype.slice()
- Array.prototype.concat()
- Object.assign()
- 利用 ... 扩展运算符
- 自实现
深拷贝
- JSON.stringify() 和 JSON.parse() 结合
- $.extend()、$.clone()（JQuery 库）
- _.cloneDeep()（Lodash 库）

区别不说了，你们都知道的。

二、如何选择深拷贝的方式？

优先级应由上至下：

JSON.stringify() 和 JSON.parse() 可以处理 99.9% 的业务场景，优先选它们。
内置方法处理不了的情况，应根据实际场景而定：
- 若要实现很完善的深拷贝，应选择 Lodash 的 _.cloneDeep() 方法，更可靠。
- 若不需要 Lodash 那么完善的深拷贝，应该自己手写一个，性能可能会更好。
面向面试之深拷贝，看本文。

JSON.stringify() 的缺陷

利用 JavaScript 内置的 JSON 处理函数，可以实现简易的深拷贝：

const obj = {
  // ...
}
JSON.parse(JSON.stringify(obj)) // 序列化与反序列化

这个方法，其实能适用于 99.9% 以上的应用场景。毕竟多数项目下，很少会去拷贝一个函数什么的。

但不得不说，这里面有“坑”，这些“坑”是 JSON.stringify() 方法本身实现逻辑产生的：

JSON.stringify(value[, replacer[, space]])

该方法有以下特点：

布尔值、数值、字符串对应的包装对象，在序列化过程会自动转换成其原始值。
undefined、任意函数、Symbol 值，在序列化过程有两种不同的情况。若出现在非数组对象的属性值中，会被忽略；若出现在数组中，会转换成 null。
任意函数、undefined 被单独转换时，会返回 undefined。
所有以 Symbol 为属性键的属性都会被完全忽略，即便在该方法第二个参数 replacer 中指定了该属性。
Date 日期调用了其内置的 toJSON() 方法转换成字符串，因此会被当初字符串处理。
NaN 和 Infinity 的数值及 null 都会当做 null。
这些对象 Map、Set、WeakMap、WeakSet 仅会序列化可枚举的属性。
被转换值如果含有 toJSON() 方法，该方法定义什么值将被序列化。
对包含 循环引用 的对象进行序列化，会抛出错误。