詳解JavaScript棧內(nèi)存與堆內(nèi)存
內(nèi)存分配
在編譯階段,除了聲明變量和函數(shù),查找環(huán)境中的標(biāo)識(shí)符這兩項(xiàng)工作之外,還會(huì)進(jìn)行內(nèi)存分配。不同類型的數(shù)據(jù)會(huì)分配到不同的內(nèi)存空間:
- 棧內(nèi)存:引擎執(zhí)行代碼時(shí)工作的內(nèi)存空間,除了引擎,也用來保存基本值和引用類型值的地址。
- 堆內(nèi)存:用來保存一組無序且唯一的引用類型值,可以使用棧中的鍵名來取得。
示意圖:
賦值與賦址
引擎不能直接操作堆內(nèi)存中的數(shù)據(jù),這就造成了對(duì)同一個(gè)變量賦不同類型的值,會(huì)出現(xiàn)完全不同的效果:為一個(gè)變量賦基本值時(shí),實(shí)際上是創(chuàng)建一個(gè)新值,然后把該值賦給新變量,可以說這是一種真正意義上的" 賦值 “;為一個(gè)變量賦引用值時(shí),實(shí)際上是為新變量添加一個(gè)指針,指向堆內(nèi)存中的一個(gè)對(duì)象,屬于一種” 賦址 "操作。
例子:
//基本值 var a = 1; var b = a; a = 2; console.log(a); //輸出:2 console.log(b); //輸出:1 //引用值 //變量 c 和 d 指向堆中的同一個(gè)數(shù)組 var c = [0, 1, 2]; var d = c; c[0] = 5; console.log(c); //輸出:[5, 1, 2] console.log(d); //輸出:[5, 1, 2]
淺拷貝
淺拷貝可以簡(jiǎn)單理解為,發(fā)生在棧中的拷貝行為,只能拷貝基本值和引用值的地址。
實(shí)現(xiàn)方式
ES6 定義了 Object.assign() 方法來實(shí)現(xiàn)淺拷貝。
例子:
let a = { name: "Tom", obj: { age: 19 } } let b = Object.assign({}, a); console.log(b); //輸出:{name: "Tom",obj: {age: 20}} a.name = "Amy"; a.obj.age = 20; console.log(a); //輸出:{name: "Amy",obj: {age: 20}} console.log(b); //輸出:{name: "Tom",obj: {age: 20}} 數(shù)組的 slice() 方法也屬于淺拷貝 例子: var a = [0, [1]]; var b = a.slice(0); a[0] = 8; a[1][0] = 9; console.log(a); //輸出:[8, [9]] console.log(b); //輸出:[0, [9]]
*concat() 方法也屬于淺拷貝,這里不再敘述。
深拷貝
深拷貝可以簡(jiǎn)單理解為,同時(shí)發(fā)生在棧中和堆中的拷貝行為,除了拷貝基本值和引用值的地址之外,地址指向的堆中的對(duì)象也會(huì)發(fā)生拷貝。
實(shí)現(xiàn)方式
將需要深拷貝的對(duì)象序列化為一個(gè) JSON 字符串,然后根據(jù)這個(gè)字符串解析出一個(gè)結(jié)構(gòu)和值完全一樣的新對(duì)象,可以間接實(shí)現(xiàn)深拷貝。
例子:
let a = { name: "Tom", obj: { age: 19 } } var b = JSON.parse(JSON.stringify(a)); console.log(b); //輸出:{name: "Tom",obj: {age: 19}} a.name = "Amy"; a.obj.age = 20; console.log(a); //輸出:{name: "Amy",obj: {age: 20}} console.log(b); //輸出:{name: "Tom",obj: {age: 19}}
*這種方法需要保證對(duì)象是安全的,例如屬性值不能是 undefined、symbol、函數(shù)、日期和正則。
使用 $.extend() 方法實(shí)現(xiàn)深拷貝
$.extend() 方法并非原生 JavaScript 提供的方法,屬于 jquery 的方法。這個(gè)方法提供的實(shí)現(xiàn)深拷貝的基本思路是:如果是基本值或除了對(duì)象或數(shù)組之外的引用值,直接賦值;如果是對(duì)象或數(shù)組就需要進(jìn)行遞歸,直到遞歸到基本值或除了對(duì)象或數(shù)組之外的引用值為止。
jquery 中 $.extend() 方法的代碼片段:
//如果 copy 內(nèi)容是數(shù)組或?qū)ο髣t繼續(xù)調(diào)用 extend 函數(shù) if (deep && copy && (jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)))) { if (copyIsArray) { copyIsArray = false; clone = src && jQuery.isArray(src) ? src : []; } else { clone = src && jQuery.isPlainObject(src) ? src : {}; } target[name] = jQuery.extend(deep, clone, copy); //如果 copy 內(nèi)容不是數(shù)組或?qū)ο髣t直接賦值 } else if (copy !== undefined) { target[name] = copy; }
參考 $.extend() 方法的思路,我們可以自己探索深拷貝的實(shí)現(xiàn)方式:
例子:
//深拷貝函數(shù) function extend(source) { var target = Array.isArray(source) ? [] : {}; for (var key in source) { var isObject = Object.prototype.toString.call(source[key]) === "[object Object]"; if (isObject || Array.isArray(source[key])) { //如果是對(duì)象或數(shù)組,繼續(xù)調(diào)用 extend 函數(shù) target[key] = extend(source[key]); } else { //遞歸到基本值或除了對(duì)象或數(shù)組之外的引用值,直接賦值 target[key] = source[key]; } } return target; } //測(cè)試代碼 var a = { a1: undefined, a2: null, a3: 123, a4: false, a5: "Tom", a6: Symbol.for("6"), obj: { s: "book", n: 10 }, arr: [1, 2, 3, [4]], fn: function() { console.log(999); }, now: new Date(), } var b = extend(a); a.a5 = "Amy"; console.log(a.a5); //輸出:Amy console.log(b.a5); //輸出:Tom a.obj.s = "pen"; console.log(a.obj.s); //輸出:pen console.log(b.obj.s); //輸出:book a.arr[3][0] = 9999; console.log(a.arr[3][0]); //輸出:9999 console.log(b.arr[3][0]); //輸出:4
運(yùn)行時(shí)流程圖
結(jié)合本課的的內(nèi)容,JavaScript 的運(yùn)行時(shí)流程圖如下:
*這張圖會(huì)根據(jù)內(nèi)容的增加不斷進(jìn)行補(bǔ)充。
以上所述是小編給大家介紹的JavaScript棧內(nèi)存與堆內(nèi)存詳解整合,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
javascript數(shù)組操作總結(jié)和屬性、方法介紹
這篇文章主要介紹了javascript數(shù)組操作總結(jié),例如數(shù)組的創(chuàng)建、添加、刪除、合并等操作方法,同時(shí)總結(jié)了屬性和操作函數(shù)、方法等,需要的朋友可以參考下2014-04-04js阻止默認(rèn)事件與js阻止事件冒泡示例分享 js阻止冒泡事件
嵌套的div元素,如果父級(jí)和子元素都綁定了一些事件,那么在點(diǎn)擊最內(nèi)層子元素時(shí)可能會(huì)觸發(fā)父級(jí)元素的事件,下面介紹一下js阻止默認(rèn)事件與js阻止事件冒泡示例,大家參考使用吧2014-01-01Angularjs 設(shè)置全局變量的方法總結(jié)
這篇文章主要介紹了Angularjs 設(shè)置全局變量的方法總結(jié)的相關(guān)資料,需要的朋友可以參考下2016-10-10JavaScript入門教程(12) js對(duì)象化編程
關(guān)于對(duì)象化編程的語(yǔ)句 現(xiàn)在我們有實(shí)力學(xué)習(xí)以下關(guān)于對(duì)象化編程,但其實(shí)屬于上一章的內(nèi)容了。2009-01-01簡(jiǎn)介JavaScript中Math.LOG10E屬性的使用
這篇文章主要介紹了JavaScript中Math.LOG10E屬性的使用,是JS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-06-06JavaScript For Beginners(轉(zhuǎn)載)
JavaScript For Beginners(轉(zhuǎn)載)...2007-01-01JavaScript數(shù)據(jù)類型相關(guān)知識(shí)詳解
這篇文章主要介紹了JavaScript數(shù)據(jù)類型相關(guān)知識(shí)詳解,文中有非常詳細(xì)的代碼示例,對(duì)正在學(xué)習(xí)js數(shù)據(jù)類型的小伙伴們有很好的幫助,需要的朋友可以參考下2021-04-04高性能的javascript之加載順序與執(zhí)行原理篇
這篇文章主要給大家介紹了關(guān)于高性能的javascript之加載順序與執(zhí)行原理的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01