深入理解js对象的引用
对于基本类型,赋值(=)是值的拷贝,比较(===)的是实际的值,而对于引用类型(Array也是一种Object),赋值(=)是引用地址的拷贝,比较(===)的是引用地址,以下是对引用对象的举例说明,看代码更直观:
- 基本数据类型比较和引用数据类型比较的区别
const a = '哈哈'
const b = '哈哈'
console.log(a === b) // true
const c = {}
const d = {}
console.log(c === d) // false
- a和b是字符串,比较的是值,完全相等,
- c和d是对象,比较的是引用地址,c和d都是一个新对象,方别指向不同的地址,所以不相等,
我们接下来用图画来表示上述问题:
这样我们就更清晰了。
- 两个引用数据类型a和b,b=a,对b的属性和属性值操作后进行比较
let a = { z: 5, y: 9 }
let b = a
b.z = 6
delete b.y
b.x = 8
console.log(a) // {z: 6, x: 8}
console.log(a === b) // true
- a是对象,b=a是将a的引用地址赋给b
- a和b都指向与同一个对象,修改这个对象,a和b都会变化
- 两个引用数据类型a和b,给b赋新值,然后进行比较
let a = { z: 5, x: 6};
let b = a;
b = {z: 6}
console.log(a.z) // 5
console.log(a === b) // false
- a是对象,b=a是将a的引用地址赋值给b
- b = {z: 6}新对象赋值给b,切断了a和b的联系,分别指向于不同的对象
小结:
- 只操作(修改,删除,添加)对象的属性,不会与之前对象断开连接
- 直接操作对象本身,也就是最外层,会和之前的对象断开连接
- 引用对象使用扩展运算符之后进行比较
let a = { z: 5, y: {x: 8}, w: {r: 10} }
let b = {...a}
b.z = 6
b.y.x = 9
b.w = {r: 11}
console.log(a) // { z: 5, y: {x: 9}, w: {r: 10}}
console.log(a.y === b.y) // true
console.log(a.w === b.w) // false
console.log(a === b) // false
- b = {…a}中,z是基本类型直接拷贝值,y和w是对象,是引用地址的拷贝
- y是只操作属性,连接不会断开,w操作了本身,生产了一个新对象,连接断开
- 尝试做个小练习
function changeAgeAndReference(person) {
person.age = 25;
person = {
name: 'John',
age: 50
};
return person;
}
let personObj1 = {
name: 'Alex',
age: 30
};
let personObj2 = changeAgeAndReference(personObj1);
console.log(personObj1); // -> ?
console.log(personObj2); // -> ?
理解这些案例之后应该就知道为什么js对象有浅拷贝和深拷贝的区分了
- 引用对象的深拷贝和浅拷贝
如何区分深拷贝与浅拷贝,简单点来说,就是假设B复制了A,当修改A时,看B是否会发生变化,如果B也跟着变了,说明这是浅拷贝,如果B没变,那就是深拷贝。
- 深拷贝常见的实现方式:
//判断是否是Object
function isObject(o) {
return (typeof o === 'object' || typeof o === 'function') && o !== null
}
// 迭代递归法:深拷贝对象与数组
function deepClone(obj) {
if (!isObject(obj)) {
throw new Error('obj 不是一个对象!')
}
let isArray = Array.isArray(obj) //数组也是对象,Arry也是引用类型
let cloneObj = isArray ? [] : {}
for (let key in obj) {
if(typeof obj[key] === 'function'){
cloneObj[key] = new Function('return '+obj[key].toString())();
}else{
cloneObj[key] = isObject(obj[key]) ? deepClone(obj[key]) : obj[key]
}
}
return cloneObj
}
let test = {
num: 0,
str: 'hello',
boolean: true,
unf: undefined,
nul: null,
obj: {
name: '我是一个对象',
id: 1
},
arr: [0, 1, 2],
func: function() {
console.log('我是一个函数')
},
date: new Date(0),
reg: new RegExp('/我是一个正则/ig'),
err: new Error('我是一个错误')
}
let result = deepClone(test)
result.func()
// console.log()
for (let key in result) {
if (isObject(result[key]))
console.log(`${key}相同吗? `, result[key] === test[key])
}
输出结果:
数组也是对象
- 序列化反序列化法
function deepClone(obj) {
return JSON.parse(JSON.stringify(obj))
}
- 使用插件工具实现,如loadsh(https://github.com/lodash/lodash):
let result = _.cloneDeep(obj)