js浅克隆和深克隆--个人理解
Posted 码妈
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js浅克隆和深克隆--个人理解相关的知识，希望对你有一定的参考价值。
底层原理： 每新创建一个对象就会随机生成不重复的地址值，如0X2357…
浅克隆和深克隆最大的本质：看有没有引用着要克隆的对象的 地址值，如果引用着，就是浅克隆。没有引用着，就是深克隆。
用代码说就是：
A对象 === B对象 // true 浅克隆
A对象 === B对象 // false 深克隆
浅克隆
浅克隆: 克隆出来的对象引用着原对象(引用地址值)，修改克隆对象或者原对象的属性，克隆对象和原对象都会改变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浅克隆</title>
</head>
<body>
<script>
//地址:0x1234
let chen = {
name: 'Chen',
age: '18'
};
//浅克隆: 不会创建新对象，只是将原对象的地址值，赋值给另一个变量。对象的个数没有增长。
let chen2 = chen;
console.log(chen); // {name: "Chen", age: "18"}
console.log(chen2); // {name: "Chen", age: "18"}
chen2.sex = '男'; // 修改chen或者chen2，两个对象都会发生变化
console.log(chen); // {name: "Chen", age: "18", sex: "男"}
console.log(chen2); // {name: "Chen", age: "18", sex: "男"}
console.log(chen2 === chen) // true
</script>
</body>
</html>
结果
深克隆
深克隆： 克隆出来的对象是完全独立的对象，克隆的对象拥有和原对象一样的属性和属性值。修改克隆对象或者原对象的属性，克隆对象和原对象只改变修改的那个对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>深克隆</title>
</head>
<body>
<script>
//地址:0x1234
let chen = {
name: 'Chen',
age: '18'
};
//正确:
// chen
// 0x1234
// ↓
function clone(oldObj){
//1. 创建空对象
// 0x9091
let newObj = {}; //new Object()
//2. 遍历旧对象中每个属性
// 0x1234
for(let shuxingming in oldObj){
//3. 每遍历旧对象中一个属性，就要为新对象添加同名属性，属性值也和旧属性值相同
//3.1 获得旧对象中当前属性的旧值
// 0x1234
let oldValue = oldObj[shuxingming];
//3.2 为新对象添加同名属性，属性值为旧属性值
//0x9091
newObj[shuxingming] = oldValue;
}
//4. 返回新对象
// 0x9091
return newObj;
}
//调用clone()函数，并将旧对象ran传入clone函数中，在函数内克隆出一个新对象，返回出来。
// 0x9091
let chen2 = clone(chen);
console.log(chen); // {name: "Chen", age: "18"}
console.log(chen2); // {name: "Chen", age: "18"}
chen2.sex = '男';
console.log(chen); // {name: "Chen", age: "18"}
console.log(chen2); // {name: "Chen", age: "18", sex: "男"}
//判断ran2和ran是否是同一个对象
console.log(chen === chen2);//false 克隆成功！
// 0x1234 0x9091
</script>
</body>
</html>
结果
以上是关于js浅克隆和深克隆--个人理解的主要内容，如果未能解决你的问题，请参考以下文章