想要讲明白 JS 中对象的浅拷贝和深拷贝,需要从它的数据类型说起。
JavaScript中的数据类型
一般我们说到JS的数据类型指的是它的原始(Primitive types)数据类型(共有6种):
- String
- Number
- Boolean
- Symbol(ES6新增)
- Null
- Undefined
这些类型可以直接操作保存在变量中的实际值。
此外,JS中还有引用数据类型:对象(Object)、数组(Array)、函数(Function)。在JS中除了基本数据类型以外的都是对象,数组是对象,函数是对象,正则表达式是对象,日期也是对象...
栈(stack)和堆(heap)
stack为自动分配的内存空间,它由系统自动释放;而heap则是动态分配的内存,大小不确定。
基本数据类型是指存放在栈中的简单数据段,数据大小确定,内存空间大小可以分配,它们是直接按值存放的,所以可以直接按值访问:
var a = 10;
var b = a;
b = 20;
console.log(a); // 10
console.log(b); // 20
被重新赋值的b并没有影响a的值。
引用类型是存放在堆内存中的对象,变量其实是保存的在栈内存中的一个指针(保存的是堆内存中的引用地址),这个指针指向堆内存。
var obj1 = new Object();
var obj2 = obj1;
obj2.description = "Hello World";
console.log(obj1.name); // Hello World
说明这两个引用数据类型指向了同一个堆内存对象。
引用传递和值传递
在变量复制的过程中,对象的复制是引用传递, 基础类型是值传递。
- 在将一个保存着原始值的变量复制给另一个变量时,会将原始值的副本赋值给新变量,此后这两个变量是完全独立的,他们只是拥有相同的value而已。
- 引用值:在将一个保存着对象内存地址的变量复制给另一个变量时,会把这个内存地址赋值给新变量,也就是说这两个变量都指向了堆内存中的同一个对象,他们中任何一个作出的改变都会反映在另一个身上。
浅拷贝
当我们想要拷贝一个对象时,如果它的属性是对象或数组时,这时候我们传递的也只是一个地址。因此子对象在访问该属性时,会根据地址回溯到父对象指向的堆内存中,即父子对象发生了关联,两者的属性值会指向同一内存空间。
const obj = { name: "bird", abilities: ["fly","sing"]}
function copy(target){
var objNew ={};
for (var i in target){
objNew[i] = target[i]
}
return objNew;
}
const objCopy = copy(obj)
console.log(objCopy) // { name: "bird", abilities: ["fly","sing"]}
objCopy.name = "bird01" // 修改原始类型的属性
console.log(objCopy) // {name: 'bird01', abilities: ["fly","sing"]}
objCopy.abilities.push("lay eggs") // 修改引用类型的属性
console.log(objCopy) // {name: 'bird01', abilities: ["fly","sing", 'lay eggs']}
console.log(obj) // {name: 'bird', abilities: ["fly","sing", 'lay eggs']}
可以看到obj的abilities属性随着objCopy的改变而改变,两个对象之间发生了关联。需要注意的是Object.assign()或者是Spread Operator都是浅拷贝:
const obj = { name: "bird", abilities: ["fly","sing"]}
const objCopy = Object.assign({}, obj) // { name: "bird", abilities: ["fly","sing"]}
objCopy.abilities.push("lay egg")
console.log(obj) // { name: "bird", abilities: ["fly","sing","lay egg"]}
const objCopy2 = {...obj} // { name: "bird", abilities: ["fly","sing","lay egg"]}
objCopy2.abilities.pop()
console.log(obj) // { name: "bird", abilities: ["fly","sing"]}
这样的关联往往不是我们希望看到的,那么就有了深拷贝。
深拷贝
使用JSON.parse/stringify可以复制属性中含有数组的情况:
const a = { arr: ["Google","Baidu"]}
const clone = JSON.parse(JSON.stringify(a))
clone.arr.pop()
console.log(a) // { arr: ["Google","Baidu"]}
可见clone的属性改变已经不再和a发生关联。不过对于其他类型的属性,在这个过程中可能会放生丢失:
const a = {
string: 'string',
number: 123,
bool: false,
nul: null,
date: new Date(), // stringified
undef: undefined, // lost
inf: Infinity, // forced to 'null'
re: /.*/, // lost
}
所以借助一些第三方的库是个不错的选择,比如:
- lodash - cloneDeep; can be imported separately via the lodash.clonedeep module and is probably your best choice if you're not already using a library that provides a deep cloning function
在不久以后也许你可以使用structuredClone
2021 update: The structuredClone global function is coming to browsers, Node.js, and Deno soon.
链接