标签：console 克隆 top futi benti var 易懂 js
什么是克隆
其实js里的克隆跟生活里说的克隆是一样的。有一个本体，克隆出跟本体一摸一样的副体，当本体“受伤”时副体是不会“受伤”的，js的克隆也是如此。
来看下面代码
<script>
var benti = {
top: "铁头",
leg: "大长腿",
waist: "细腰",
hand: "小手",
};
console.log(
`本体有---${benti.top}、${benti.leg}、${benti.waist}、${benti.hand}`
);
</script>
想要克隆出一个副体应该怎么做呢？有些人就想到直接将本体赋值给副体
<script>
var benti = {
top: "铁头",
leg: "大长腿",
waist: "细腰",
hand: "小手",
};
var futi = benti;
console.log(
`本体有---${benti.top}、${benti.leg}、${benti.waist}、${benti.hand}`
);
console.log(
`副体有---${futi.top}、${futi.leg}、${futi.waist}、${futi.hand}`
);
</script>
输出结果
从输出结果来看确实是“克隆”出来一个副体，上面说过克隆出来的副体是不会因为本体“受伤”而“受伤”的，那再看下面代码
<script>
var benti = {
top: "铁头",
leg: "大长腿",
waist: "细腰",
hand: "小手",
};
var futi = benti;
benti.top = "本体的铁头受伤了"; //本体的头受伤了
console.log(
`本体有${benti.top}、${benti.leg}、${benti.waist}、${benti.hand}`
);
console.log(
`副体有${futi.top}、${futi.leg}、${futi.waist}、${futi.hand}`
);
</script>
输出结果
按道理来说本体受伤，副体不应该受伤的呀！为什么会这样呢?因为在内存中，对象存储是存在一个地址中的，这样直接赋值给副体，相当于直接把地址值给了副本，并不是克隆一个新的地址值，看下图
所以说这样子的做法并不是克隆。接下来我们要谈谈浅克隆和深克隆
浅克隆
什么是浅克隆
只克隆第一级属性，如果某个属性又是一个内嵌的子对象，不会进入子对象中克隆子对象的内容。
这里用for in 来实现浅克隆，看以下代码
<script>
var benti = {
top: "铁头",
leg: "大长腿",
waist: "细腰",
hand: "小手",
};
//浅克隆
function clone(oldObj) {
var newObj = {};
for (var key in oldObj) {
newObj[key] = oldObj[key];
}
return newObj;
}
var futi = clone(benti);
benti.top = "本体的铁头受伤了"; //本体的头受伤了
console.log(
`本体有---${benti.top}、${benti.leg}、${benti.waist}、${benti.hand}`
);
console.log(
`副体有---${futi.top}、${futi.leg}、${futi.waist}、${futi.hand}`
);
</script>
输出结果
克隆出来的副体与本体没有联系，即使改变本体的属性值，副体也不会被被改变这就是浅克隆，看下图的解释
这样就达到了基本的浅克隆，但是这个浅克隆有些小问题需要注意，如果有些人想向克隆函数传一个null,数字，字符串，数组呢？不能都返回一个对象给别人吧！我们是想别人想克隆什么类型的就返回什么类型的给别人。那可以改一改上面的代码
<script>
var benti = {
top: "铁头",
leg: "大长腿",
waist: "细腰",
hand: "小手",
};
//浅克隆
function clone(oldObj) {
//如果传进来的参数是null,那就返回一个null
if (oldObj == null) {
return null; //直接退出
}
//如果传进来的是原始类型值，就返回原始类型值
if (typeof oldObj != "object") {
return oldObj; //直接退出
} else {
var newObj = Array.isArray(oldObj) ? [] : {}; //不要直接创建对象，先使用三目运算符判断是创建数组还是对象
for (var key in oldObj) {
newObj[key] = oldObj[key];
}
return newObj; //返回新对象或数组
}
}
//克隆一个对象
var futi = clone(benti);
benti.top = "本体的铁头受伤了"; //本体的头受伤了
console.log(
`本体有---${benti.top}、${benti.leg}、${benti.waist}、${benti.hand}`
);
console.log(
`副体有---${futi.top}、${futi.leg}、${futi.waist}、${futi.hand}`
);
//参数为null
var boor = clone(null);
console.log(boor);
//参数为数字，字符串
var number = clone(12);
var string = clone("string");
console.log(number);
console.log(string);
//参数为数组
var arr = clone([1, 2, 3, 4, 5]);
console.log(arr);
</script>
输出结果
这样浅克隆就实现了。接下来看看什么是深克隆吧，深克隆跟浅克隆有什么区别呢？
深克隆
什么是深克隆
既可以克隆第一级属性，如果某个属性又是一个内嵌的子对象，深克隆会进入子对象中，继续克隆内嵌子对象及其内容。
什么是内嵌的子对象呢？看下面的代码
var benti = {
top: "铁头",
leg: "大长腿",
waist: "细腰",
hand: "小手",
chuanzhe:{
yifu:"adds",
xiezi:"AJ",
kuzi:"boshilong"
}
};
对象benti中的chuanzhe就是内嵌的子对象，如果用浅克隆的方式克隆出来的副体是有问题的，因为对象存储是存在一个地址中，所以浅克隆是无法克隆内嵌的子对象，那深克隆是怎么实现的呢?是利用递归的思想来解决这个问题的，
看下面的代码
<script>
var benti = {
top: "铁头",
leg: "大长腿",
waist: "细腰",
hand: "小手",
chuanzhe: {
yifu: "adds",
xiezi: "AJ",
kuzi: "boshilong",
},
};
//深克隆
function clone(oldObj) {
//如果传进来的参数是null,那就返回一个null
if (oldObj == null) {
return null; //直接退出
}
//如果传进来的是原始类型值，就返回原始类型值
if (typeof oldObj != "object") {
return oldObj; //直接退出
} else {
var newObj = Array.isArray(oldObj) ? [] : {}; //不要直接创建对象，先使用三目运算符判断是创建数组还是对象
for (var key in oldObj) {
newObj[key] = clone(oldObj[key]); //如果属性有内嵌子对象就再次调用克隆函数 递归的思想
}
return newObj; //返回新对象或数组
}
}
//克隆一个对象
var futi = clone(benti);
benti.top = "本体的铁头受伤了"; //本体的头受伤了
console.log(benti);
console.log(futi);
//参数为null
var boor = clone(null);
console.log(boor);
//参数为数字，字符串
var number = clone(12);
var string = clone("string");
console.log(number);
console.log(string);
//参数为数组
var arr = clone([1, 2, 3, 4, 5]);
console.log(arr);
</script>
输出结果
这样就实现了深克隆了，最主要的还是这句代码newObj[key] = clone(oldObj[key]);利用了递归的思想，这里就不做过多的介绍了。浅克隆和深克隆就介绍到这里啦！说得不好的，请多多指教。
东哥笔记
标签：console,克隆,top,futi,benti,var,易懂,js 来源： https://blog.csdn.net/weixin_43348064/article/details/105887920
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。