這篇文章主要介紹JS內(nèi)存管理機制及驗證的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯(lián)專注于企業(yè)營銷型網(wǎng)站、網(wǎng)站重做改版、自貢網(wǎng)站定制設(shè)計、自適應(yīng)品牌網(wǎng)站建設(shè)、H5場景定制、商城網(wǎng)站建設(shè)、集團公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)公司、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計等建站業(yè)務(wù)，價格優(yōu)惠性價比高，為自貢等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

作用域

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

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

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

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

• 未聲明：全局變量

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

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

var 聲明的變量

在函數(shù)內(nèi)聲明的變量其作用域會被限制在該函數(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 所定義的變量作用域被限制在{} 中。所以這個例子中的變量c 可在外部得到值，d 則無法取到。

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

內(nèi)存管理機制

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

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

var a = 1

流程如下：

1. 開辟一個內(nèi)存空間來存放變量  a ，不過這時還沒有賦值（原因可參考：Hoisting）

1. 為a 賦值。

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

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

來自MDN：collectible if there are zero references pointing to it.

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

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

在調(diào)用randomString 函數(shù)后會返回一個很長的字串：

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

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

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

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

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

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

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

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

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

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

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

總結(jié)

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

以上是“JS內(nèi)存管理機制及驗證的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

文章名稱：JS內(nèi)存管理機制及驗證的示例分析-創(chuàng)新互聯(lián)
網(wǎng)頁鏈接：http://jinyejixie.com/article46/ccsphg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、軟件開發(fā)、網(wǎng)站維護、用戶體驗、企業(yè)網(wǎng)站制作、網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)