詳解jQuery的拷貝對(duì)象

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="jquery.min.js"></script>
<script>
$(function() {
//1, 普通拷貝,默認(rèn)為淺拷貝
var targetObj = {};
var obj = {
id: 1,
name: "andy"
};
$.extend(targetObj, obj); //拷貝語(yǔ)法,把obj內(nèi)的屬性和屬性值拷貝給targetObj一個(gè)空對(duì)象
console.log(targetObj); //輸出結(jié)果是 obj對(duì)象里面的內(nèi)容
//2. 拷貝對(duì)象里面有屬性和屬性值情況下
var targett = {
id: 0,
gshg: 55
};
var objrr = {
id: 1,
name: "andy"
};
$.extend(targett, objrr);
console.log(targett); // 如果拷貝對(duì)象targett里面屬性和被拷貝對(duì)象objrr里面屬性有相同的,則objrr里面屬性值會(huì)覆蓋掉targett里面屬性值
//如果拷貝對(duì)象targett里面有屬性與被拷貝對(duì)象objrr里面屬性名不相同的不會(huì)被覆蓋,被拷貝對(duì)象objrr里面屬性只會(huì)后來居上
//3. 拷貝對(duì)象里面有對(duì)象情況下,淺拷貝
var taytuj = {
id: 0,
msg: {
sex: '男'
}
};
var rete = {
id: 1,
name: "andy",
msg: {
age: 18
}
};
$.extend(true, taytuj, rete);
console.log(taytuj);
// 執(zhí)行過程:
//1.兩個(gè)對(duì)象都在內(nèi)存棧中,其中rete對(duì)象里面的 msg: { age: 18 }對(duì)象放在了內(nèi)存堆中,在淺拷貝中,rete對(duì)象里面的 msg: { age: 18 }會(huì)覆蓋掉taytu對(duì)象的msg: {sex: '男' },屬性值會(huì)變成一個(gè)16進(jìn)制指向內(nèi)存堆中的msg: { age: 18 }對(duì)象,此時(shí)??臻g中兩個(gè)對(duì)象的 msg里面都有同一個(gè)執(zhí)向內(nèi)存堆中msg: { age: 18 }的16進(jìn)制地址,所以如果淺拷貝完成后,兩個(gè)對(duì)象里面msg屬性值只要一個(gè)發(fā)生了改變,另外一個(gè)msg的屬性值也會(huì)隨著一起改變
//淺拷貝:
//1.屬性名相同的,被拷貝對(duì)象會(huì)覆蓋掉拷貝對(duì)象,排序永遠(yuǎn)是后來居上
//2. 屬性名不相同的則合并
//深拷貝:
//1.屬性名相同的,被拷貝對(duì)象的屬性和屬性值會(huì)覆蓋掉拷貝對(duì)象的屬性和屬性值,排序永遠(yuǎn)是后來居上
//2. 屬性名不相同的則合并
//3.拷貝對(duì)象和拷貝對(duì)象里面有對(duì)象的,如果對(duì)象名相同,屬性名不同,則會(huì)合并,并不是覆蓋。
})
</script>
</head>
<body>
</body>
</html>
總結(jié)
本篇文章就到這里了,希望能夠給你帶來幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
Jquery實(shí)現(xiàn)上下移動(dòng)和排序代碼
這篇文章主要介紹了Jquery實(shí)現(xiàn)上下移動(dòng)和排序,想要學(xué)習(xí)Jquery的同學(xué)可以來了解一下。具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。2016-10-10
ztree簡(jiǎn)介_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
zTree 是利用 JQuery 的核心代碼,實(shí)現(xiàn)一套能完成大部分常用功能的 Tree 插件,本文給大家簡(jiǎn)單介紹下ztree的基本知識(shí),感興趣的朋友一起看看吧2017-07-07
JQuery點(diǎn)擊事件回到頁(yè)面頂部效果的實(shí)現(xiàn)代碼
下面小編就為大家?guī)硪黄狫Query點(diǎn)擊事件回到頁(yè)面頂部效果的實(shí)現(xiàn)代碼。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05
jquery實(shí)現(xiàn)隱藏在左側(cè)的彈性彈出菜單效果
這篇文章主要介紹了jquery實(shí)現(xiàn)隱藏在左側(cè)的彈性彈出菜單效果,涉及jQuery動(dòng)態(tài)操作頁(yè)面元素的顯示及隱藏技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
jQuery插件FusionCharts實(shí)現(xiàn)的Marimekko圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件FusionCharts實(shí)現(xiàn)的Marimekko圖效果,結(jié)合實(shí)例形式分析了jQuery使用FusionCharts插件結(jié)合xml數(shù)據(jù)繪制Marimekko圖的相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03
jquery-ui 進(jìn)度條功能示例【測(cè)試可用】
這篇文章主要介紹了jquery-ui 進(jìn)度條功能,結(jié)合完整實(shí)例形式分析了jquery-ui 結(jié)合時(shí)間函數(shù)實(shí)現(xiàn)進(jìn)度條功能相關(guān)操作技巧,需要的朋友可以參考下2019-07-07
JQUERY實(shí)現(xiàn)左側(cè)TIPS滑進(jìn)滑出效果示例
左側(cè)提示滑進(jìn)滑出的平滑效果使用jQuery實(shí)現(xiàn),具體代碼及截圖如下,感興趣的朋友可以參考下哈,希望對(duì)大家學(xué)習(xí)jquery有所幫助2013-06-06
jQuery實(shí)現(xiàn)復(fù)選框批量選擇與反選的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)復(fù)選框批量選擇與反選的方法,主要通過jQuery的attr與removeAttr方法實(shí)現(xiàn)選擇與反選的功能,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-06-06

