詳解JavaScript堆棧與拷貝
一.堆棧的定義
1.棧是一種特殊的線性表。其特殊性在于限定插入和刪除數(shù)據(jù)元素的操作只能在線性表的一端進(jìn)行。
結(jié)論:后進(jìn)先出(Last In First Out),簡(jiǎn)稱為L(zhǎng)IFO線性表。
棧的應(yīng)用有:數(shù)制轉(zhuǎn)換,語(yǔ)法詞法分析,表達(dá)式求值等
2.隊(duì)列(Queue)也是一種運(yùn)算受限的線性表,它的運(yùn)算限制與棧不同,是兩頭都有限制,插入只能在表的一端進(jìn)行(只進(jìn)不出),而刪除只能在表的另一端進(jìn)行(只出不進(jìn)),允許刪除的一端稱為隊(duì)尾(rear),允許插入的一端稱為隊(duì)頭 (Front),隊(duì)列的操作原則是先進(jìn)先出的,所以隊(duì)列又稱作FIFO表(First In First Out)。
由于棧和隊(duì)列也是線性表,棧和隊(duì)列有順序棧和鏈棧兩種存儲(chǔ)結(jié)構(gòu),這兩種存儲(chǔ)結(jié)構(gòu)的不同,則使得實(shí)現(xiàn)棧的基本運(yùn)算的算法也有所不同。
二.JS堆棧研究
1、棧(stack)和堆(heap)
stack為自動(dòng)分配的內(nèi)存空間,它由系統(tǒng)自動(dòng)釋放;而heap則是動(dòng)態(tài)分配的內(nèi)存,大小不定也不會(huì)自動(dòng)釋放。
2、基本類型和引用類型
(1)基本類型:存放在棧內(nèi)存中的簡(jiǎn)單數(shù)據(jù)段,數(shù)據(jù)大小確定,內(nèi)存空間大小可以分配。
5種基本數(shù)據(jù)類型有Undefined、Null、Boolean、Number 和 String,它們是直接按值存放的,所以可以直接訪問(wèn)。
(2)引用類型:存放在堆內(nèi)存中的對(duì)象,變量實(shí)際保存的是一個(gè)指針,這個(gè)指針指向另一個(gè)位置。每個(gè)空間大小不一樣,要根據(jù)情況開(kāi)進(jìn)行特定的分配。
當(dāng)我們需要訪問(wèn)引用類型(如對(duì)象,數(shù)組,函數(shù)等)的值時(shí),首先從棧中獲得該對(duì)象的地址指針,然后再?gòu)亩褍?nèi)存中取得所需的數(shù)據(jù)。
3、傳值與傳址
前面之所以要說(shuō)明什么是內(nèi)存中的堆、棧以及變量類型,實(shí)際上是為了更好的理解什么是“淺拷貝”和“深拷貝”。
基本類型與引用類型最大的區(qū)別實(shí)際就是傳值與傳址的區(qū)別。測(cè)試用例:
var a = [1,2,3,4,5]; var b = a; var c = a[0]; alert(b);//1,2,3,4,5 alert(c);//1 //改變數(shù)值 b[4] = 6; c = 7; alert(a[4]);//6 alert(a[0]);//1
從上面我們可以得知,當(dāng)我改變b中的數(shù)據(jù)時(shí),a中數(shù)據(jù)也發(fā)生了變化;但是當(dāng)我改變c的數(shù)據(jù)值時(shí),a卻沒(méi)有發(fā)生改變。
這就是傳值與傳址的區(qū)別。因?yàn)閍是數(shù)組,屬于引用類型,所以它賦予給b的時(shí)候傳的是棧中的地址(相當(dāng)于新建了一個(gè)不同名“指針”),而不是堆內(nèi)存中的對(duì)象。而c僅僅是從a堆內(nèi)存中獲取的一個(gè)數(shù)據(jù)值,并保存在棧中。所以b修改的時(shí)候,會(huì)根據(jù)地址回到a堆中修改,c則直接在棧中修改,并且不能指向a堆內(nèi)存中。
三.拷貝
1.淺拷貝
前面已經(jīng)提到,在定義一個(gè)對(duì)象或數(shù)組時(shí),變量存放的往往只是一個(gè)地址。當(dāng)我們使用對(duì)象拷貝時(shí),如果屬性是對(duì)象或數(shù)組時(shí),這時(shí)候我們傳遞的也只是一個(gè)地址。因此子對(duì)象在訪問(wèn)該屬性時(shí),會(huì)根據(jù)地址回溯到父對(duì)象指向的堆內(nèi)存中,即父子對(duì)象發(fā)生了關(guān)聯(lián),兩者的屬性值會(huì)指向同一內(nèi)存空間。
var a = { key1:"11111" } function Copy(p) { var c = {}; for (var i in p) { c[i] = p[i]; } return c; } a.key2 = ['小輝','小輝']; var b = Copy(a); b.key3 = '33333'; alert(b.key1); //1111111 alert(b.key3); //33333 alert(a.key3); //undefined
a對(duì)象中key1屬性是字符串,key2屬性是數(shù)組。a拷貝到b,12屬性均順利拷貝。給b對(duì)象新增一個(gè)字符串類型的屬性key3時(shí),b能正常修改,而a中無(wú)定義。說(shuō)明子對(duì)象的key3(基本類型)并沒(méi)有關(guān)聯(lián)到父對(duì)象中,所以u(píng)ndefined。
b.key2.push("大輝"); alert(b.key2); //小輝,小輝,大輝 alert(a.key2); //小輝,小輝,大輝
但是,若修改的屬性變?yōu)閷?duì)象或數(shù)組時(shí),那么父子對(duì)象之間就會(huì)發(fā)生關(guān)聯(lián)。從以上彈出結(jié)果可知,我對(duì)b對(duì)象進(jìn)行修改,a、b的key2屬性值(數(shù)組)均發(fā)生了改變。其在內(nèi)存的狀態(tài),可以用下圖來(lái)表示。
原因是key1的值屬于基本類型,所以拷貝的時(shí)候傳遞的就是該數(shù)據(jù)段;但是key2的值是堆內(nèi)存中的對(duì)象,所以key2在拷貝的時(shí)候傳遞的是指向key2對(duì)象的地址,無(wú)論復(fù)制多少個(gè)key2,其值始終是指向父對(duì)象的key2對(duì)象的內(nèi)存空間。
2.深度拷貝
或許以上并不是我們?cè)趯?shí)際編碼中想要的結(jié)果,我們不希望父子對(duì)象之間產(chǎn)生關(guān)聯(lián),那么這時(shí)候可以用到深拷貝。既然屬性值類型是數(shù)組和或象時(shí)只會(huì)傳址,那么我們就用遞歸來(lái)解決這個(gè)問(wèn)題,把父對(duì)象中所有屬于對(duì)象的屬性類型都遍歷賦給子對(duì)象即可。測(cè)試代碼如下:
function Copy(p, c) { var c = c || {}; for (var i in p) { if (typeof p[i] === 'object') { c[i] = (p[i].constructor === Array) ? [] : {}; Copy(p[i], c[i]); } else { c[i] = p[i]; } } return c; } a.key2 = ['小輝','小輝']; var b={}; b = Copy(a,b); b.key2.push("大輝"); alert(b.key2); //小輝,小輝,大輝 alert(a.key2); //小輝,小輝
由上可知,修改b的key2數(shù)組時(shí),沒(méi)有使a父對(duì)象中的key2數(shù)組新增一個(gè)值,即子對(duì)象沒(méi)有影響到父對(duì)象a中的key2。其存儲(chǔ)模式大致如下:
以上就是詳解JavaScript堆棧與拷貝的詳細(xì)內(nèi)容,更多關(guān)于JS 堆棧 拷貝的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
PHP中如何unicode編碼,在JavaScript中h如何解碼
PHP中如何unicode編碼,在JavaScript中如何解碼?js中h這樣的,怎么轉(zhuǎn)碼?2023-07-07javascript驗(yàn)證上傳文件的類型限制必須為某些格式
驗(yàn)證上傳文件類型的方法有很多,在本文為大家詳細(xì)介紹下js中是如何實(shí)現(xiàn)的2013-11-11js 判斷js函數(shù)、變量是否存在的簡(jiǎn)單示例代碼
本篇文章主要是對(duì)判斷js函數(shù)、變量是否存在的簡(jiǎn)單示例代碼進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-03-03uniapp 引用 js 組件的方法(場(chǎng)景分析)
在UniApp開(kāi)發(fā)過(guò)程中,我們不僅需要掌握各種UI組件的使用方法,還需要了解如何在項(xiàng)目中引入JS文件,在本文中,我將介紹UniApp中如何引入JS的方法,感興趣的朋友跟隨小編一起看看吧2023-09-09javascript動(dòng)態(tài)創(chuàng)建對(duì)象的屬性詳解
在本篇文章中我們給大家分享了關(guān)于javascript動(dòng)態(tài)創(chuàng)建對(duì)象的屬性的相關(guān)知識(shí)點(diǎn)以及代碼分享,需要的朋友們參考學(xué)習(xí)下。2018-11-11微信小程序scroll-view實(shí)現(xiàn)滾動(dòng)到錨點(diǎn)左側(cè)導(dǎo)航欄點(diǎn)餐功能(點(diǎn)擊種類,滾動(dòng)到錨點(diǎn))
這篇文章主要介紹了微信小程序scroll-view左側(cè)導(dǎo)航欄點(diǎn)餐功能實(shí)現(xiàn),點(diǎn)擊種類,滾動(dòng)到錨點(diǎn);滾動(dòng)到錨點(diǎn),種類選中,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-06js與jQuery實(shí)現(xiàn)獲取table中的數(shù)據(jù)并拼成json字符串操作示例
這篇文章主要介紹了js與jQuery實(shí)現(xiàn)獲取table中的數(shù)據(jù)并拼成json字符串操作,涉及javascript與jQuery針對(duì)HTML頁(yè)面table表格數(shù)據(jù)獲取、遍歷及json字符串拼接相關(guān)操作技巧,需要的朋友可以參考下2018-07-07JavaScript添加隨滾動(dòng)條滾動(dòng)窗體的方法
這篇文章主要介紹了JavaScript添加隨滾動(dòng)條滾動(dòng)窗體的方法,涉及JavaScript事件響應(yīng)及頁(yè)面元素動(dòng)態(tài)操作相關(guān)技巧,需要的朋友可以參考下2016-02-02JavaScript實(shí)現(xiàn)二分查找實(shí)例代碼
二分查找的前提為:數(shù)組、有序。這篇文章主要介紹了JavaScript實(shí)現(xiàn)二分查找實(shí)例代碼,需要的朋友可以參考下2017-02-02