詳解JavaScript堆棧與拷貝
一.堆棧的定義
1.棧是一種特殊的線性表。其特殊性在于限定插入和刪除數(shù)據(jù)元素的操作只能在線性表的一端進(jìn)行。

結(jié)論:后進(jìn)先出(Last In First Out),簡稱為LIFO線性表。
棧的應(yīng)用有:數(shù)制轉(zhuǎn)換,語法詞法分析,表達(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)存中的簡單數(shù)據(jù)段,數(shù)據(jù)大小確定,內(nèi)存空間大小可以分配。
5種基本數(shù)據(jù)類型有Undefined、Null、Boolean、Number 和 String,它們是直接按值存放的,所以可以直接訪問。
(2)引用類型:存放在堆內(nèi)存中的對(duì)象,變量實(shí)際保存的是一個(gè)指針,這個(gè)指針指向另一個(gè)位置。每個(gè)空間大小不一樣,要根據(jù)情況開進(jìn)行特定的分配。
當(dāng)我們需要訪問引用類型(如對(duì)象,數(shù)組,函數(shù)等)的值時(shí),首先從棧中獲得該對(duì)象的地址指針,然后再從堆內(nèi)存中取得所需的數(shù)據(jù)。
3、傳值與傳址
前面之所以要說明什么是內(nèi)存中的堆、棧以及變量類型,實(shí)際上是為了更好的理解什么是“淺拷貝”和“深拷貝”。
基本類型與引用類型最大的區(qū)別實(shí)際就是傳值與傳址的區(qū)別。測試用例:
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卻沒有發(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ì)象在訪問該屬性時(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中無定義。說明子對(duì)象的key3(基本類型)并沒有關(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),可以用下圖來表示。

原因是key1的值屬于基本類型,所以拷貝的時(shí)候傳遞的就是該數(shù)據(jù)段;但是key2的值是堆內(nèi)存中的對(duì)象,所以key2在拷貝的時(shí)候傳遞的是指向key2對(duì)象的地址,無論復(fù)制多少個(gè)key2,其值始終是指向父對(duì)象的key2對(duì)象的內(nèi)存空間。
2.深度拷貝
或許以上并不是我們在實(shí)際編碼中想要的結(jié)果,我們不希望父子對(duì)象之間產(chǎn)生關(guān)聯(lián),那么這時(shí)候可以用到深拷貝。既然屬性值類型是數(shù)組和或象時(shí)只會(huì)傳址,那么我們就用遞歸來解決這個(gè)問題,把父對(duì)象中所有屬于對(duì)象的屬性類型都遍歷賦給子對(duì)象即可。測試代碼如下:
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í),沒有使a父對(duì)象中的key2數(shù)組新增一個(gè)值,即子對(duì)象沒有影響到父對(duì)象a中的key2。其存儲(chǔ)模式大致如下:

以上就是詳解JavaScript堆棧與拷貝的詳細(xì)內(nèi)容,更多關(guān)于JS 堆棧 拷貝的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
Javascript?promise.all的用法介紹(簡潔易懂)
這篇文章主要給大家介紹了關(guān)于Javascript?promise.all用法的相關(guān)資料,Promise.all()方法是一個(gè)Promise對(duì)象方法,可以將多個(gè)Promise實(shí)例包裝成一個(gè)新的Promise對(duì)象,最終返回一個(gè)數(shù)組,需要的朋友可以參考下2023-07-07
利用javascript實(shí)現(xiàn)全部刪或清空所選的操作
這篇文章主要介紹了利用javascript實(shí)現(xiàn)全部刪或清空所選的操作,需要的朋友可以參考下2014-05-05
Selenium執(zhí)行JavaScript腳本的方法示例
這篇文章主要介紹了Selenium執(zhí)行JavaScript腳本的方法示例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
IE8的JavaScript點(diǎn)擊事件(onclick)不兼容的解決方法
這篇文章主要介紹了IE8的JavaScript點(diǎn)擊事件(onclick)不兼容的解決方法,大家參考使用吧2013-11-11
JavaScript中省略元素對(duì)數(shù)組長度的影響
這篇文章主要介紹了JavaScript中省略元素對(duì)數(shù)組長度的影響,本文給大家介紹的非常詳細(xì)具有參考借鑒價(jià)值,需要的朋友可以參考下2016-10-10
SOSO地圖JS畫出標(biāo)注和中心點(diǎn)以html形式運(yùn)行
SOSO地圖想必大家都知道吧,本文將為大家詳細(xì)介紹下使用JS畫出標(biāo)注和中心點(diǎn),直接貼出代碼,感興趣的朋友可以參考下2013-08-08

