JS中的內(nèi)存管理機(jī)制及驗(yàn)證方法

這篇文章主要介紹“JS中的內(nèi)存管理機(jī)制及驗(yàn)證方法”，在日常操作中，相信很多人在JS中的內(nèi)存管理機(jī)制及驗(yàn)證方法問題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”JS中的內(nèi)存管理機(jī)制及驗(yàn)證方法”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！

作用域JavaScript 的變量被作用域所限制，如果超出了作用域，那么變量就沒有辦法再被使用，這樣做的優(yōu)點(diǎn)是：

• 可以避免當(dāng)前的變量轉(zhuǎn)為全局變量

• 有效限制變量的作用區(qū)域

而變量作用域也會(huì)按照聲明方式的不同，產(chǎn)生不同的作用域：

• 未聲明：全局變量

• var 聲明：作用域在 函數(shù) 中

• let、const 聲明：作用域在 {} 中

var 聲明的變量

在函數(shù)內(nèi)聲明的變量其作用域會(huì)被限制在該函數(shù)的調(diào)用棧中，在外部無法直接得到該作用域內(nèi)的變量。下面的例子中， fn  函數(shù)內(nèi)的變量在全局下是沒有辦法查看的。

function fn() {   var a = 1; } fn(); console.log(a); // 無法得到 fn 函數(shù)內(nèi)的 a 變量

所以常用 "立即函數(shù)" 來限制變量的作用域，主要是避免全局變量的產(chǎn)生。

(function() {   var b = 1; })(); console.log(b); // 無法得到 fn 函數(shù)內(nèi)的 b 變量

let、const 聲明的變量

ES6 之后所新增的let、const 作用域則與過去不同，改用 {} 作為作限制用域的方式，這讓 for  循環(huán)及部分語法避免產(chǎn)生多余的變量來影響作用域。

與 var 不同的是 const 所定義的變量作用域被限制在 {} 中。所以這個(gè)例子中的變量 c 可在外部得到值，d 則無法取到。

{   var c = 1;   const d = 1; } console.log(c); // 1 console.log(d); // Uncaught ReferenceError: d is not defined，無法取到變量 d

內(nèi)存管理機(jī)制每當(dāng)我們新增一個(gè)變量時(shí)，在內(nèi)存中就會(huì)占用一個(gè)位置來保存它的值，以便在程序后續(xù)運(yùn)行時(shí)可以多次使用。

下面的代碼會(huì)在內(nèi)存中開辟一個(gè) a 的空間來存儲(chǔ)數(shù)字 1 的值。

var a = 1

流程如下：

• 開辟一個(gè)內(nèi)存空間來存放變量 a ，不過這時(shí)還沒有賦值(其原因可參考 Hoisting)



• 為 a 賦值。

所有的變量都會(huì)占用內(nèi)存空間，除此之外對(duì)象、數(shù)組的屬性以及函數(shù)參數(shù)等也會(huì)用相同的概念進(jìn)行占用。調(diào)用一個(gè)函數(shù)時(shí)，每一個(gè)函數(shù)的作用域也都會(huì)反復(fù)的進(jìn)行內(nèi)存占用。隨著應(yīng)用程序越來越復(fù)雜的情況下，如果持續(xù)的占用內(nèi)存而沒有進(jìn)行適當(dāng)?shù)尼尫?，那么?nèi)存可能會(huì)被耗盡。

JavaScript 引擎具有內(nèi)存回收的機(jī)制，會(huì)釋放不再使用的變量?jī)?nèi)存，其基本概念為：當(dāng)沒有任何的引用指向它時(shí)就會(huì)釋放內(nèi)存。

內(nèi)存釋放的驗(yàn)證

下面用一個(gè)例子來說明及驗(yàn)證內(nèi)存釋放的機(jī)制，首先用一段函數(shù)來產(chǎn)生一個(gè)非常長(zhǎng)的字符串，長(zhǎng)字符串會(huì)占用大量的內(nèi)存空間。

在調(diào)用 randomString 函數(shù)后會(huì)返回一個(gè)很長(zhǎng)的字串：

function randomString(length) {   var result = '';   var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';   var characterscharactersLength = characters.length;   for (var i = 0; i < length; i++) {     result += characters.charAt(Math.floor(Math.random() * charactersLength));   }   return result; }

(1) 案例一：使變量維持在可引用的狀態(tài)(不會(huì)釋放內(nèi)存)

定義一個(gè)全局變量 demoData，這個(gè)變量會(huì)持續(xù)維持可被引用的狀態(tài)。

var demoData = []; // 全局變量 function getData() {   for (let i = 0; i < 1000; i++) {     demoData.push(randomString(5000))   } } getData() console.log(demoData); // 可引用 demoData 值

執(zhí)行這段代碼后，進(jìn)入 Chrome DevTools 中的 Memory 頁，這個(gè)功能可以得到當(dāng)前頁面所占用的內(nèi)存狀況。接下來點(diǎn)擊 "Take  snapshot" 按鈕。

可以看到目前執(zhí)行完這段代碼后占用了 6.2MB 的內(nèi)存空間(注意：任何瀏覽器環(huán)境和插件都會(huì)影響所占用的內(nèi)存狀態(tài))。

(2) 案例二：使變量無法再次被引用(執(zhí)行后釋放內(nèi)存)

限制變量的作用域，使變量無法再被外部引用。

此段代碼依然會(huì)執(zhí)行這個(gè)函數(shù)，也會(huì)將值賦值給變量，但外部無法再次引用 demoData 的值。

function getData() {   var demoData = []; // 局部變量   for (var i = 0; i < 1000; i++) {     demoData.push(randomString(5000))   } } getData();

然后回到 Memory 頁點(diǎn)擊 "Take snapshot" 重新取得內(nèi)存的狀態(tài)，接下來會(huì)得到與前面不同的結(jié)果，這次只占用了 1.2MB 的內(nèi)存(其中  5MB 被釋放掉了)

總結(jié)

通過前面的例子，我們知道了作用域以及內(nèi)存之間的關(guān)系，而內(nèi)存管理也是前端打工人必須要掌握的知識(shí)(除了控制內(nèi)存的使用大小，還需在必要時(shí)保留而不被釋放)。

到此，關(guān)于“JS中的內(nèi)存管理機(jī)制及驗(yàn)證方法”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！