文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

JS中的内存管理机制及验证方法

2024-04-02 19:55

关注

这篇文章主要介绍“JS中的内存管理机制及验证方法”,在日常操作中,相信很多人在JS中的内存管理机制及验证方法问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”JS中的内存管理机制及验证方法”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

作用域JavaScript 的变量被作用域所限制,如果超出了作用域,那么变量就没有办法再被使用,这样做的优点是:

而变量作用域也会按照声明方式的不同,产生不同的作用域:

var 声明的变量

在函数内声明的变量其作用域会被限制在该函数的调用栈中,在外部无法直接得到该作用域内的变量。下面的例子中, fn  函数内的变量在全局下是没有办法查看的。

function fn() {   var a = 1; } fn(); console.log(a); // 无法得到 fn 函数內的 a 变量

所以常用 "立即函数" 来限制变量的作用域,主要是避免全局变量的产生。

(function() {   var b = 1; })(); console.log(b); // 无法得到 fn 函数內的 b 变量

let、const 声明的变量

ES6 之后所新增的let、const 作用域则与过去不同,改用 {} 作为作限制用域的方式,这让 for  循环及部分语法避免产生多余的变量来影响作用域。

与 var 不同的是 const 所定义的变量作用域被限制在 {} 中。所以这个例子中的变量 c 可在外部得到值,d 则无法取到。

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

内存管理机制每当我们新增一个变量时,在内存中就会占用一个位置来保存它的值,以便在程序后续运行时可以多次使用。

下面的代码会在内存中开辟一个 a 的空间来存储数字 1 的值。

var a = 1

流程如下:

所有的变量都会占用内存空间,除此之外对象、数组的属性以及函数参数等也会用相同的概念进行占用。调用一个函数时,每一个函数的作用域也都会反复的进行内存占用。随着应用程序越来越复杂的情况下,如果持续的占用内存而没有进行适当的释放,那么内存可能会被耗尽。

JavaScript 引擎具有内存回收的机制,会释放不再使用的变量内存,其基本概念为:当没有任何的引用指向它时就会释放内存。

内存释放的验证

下面用一个例子来说明及验证内存释放的机制,首先用一段函数来产生一个非常长的字符串,长字符串会占用大量的内存空间。

在调用 randomString 函数后会返回一个很长的字串:

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) 案例一:使变量维持在可引用的状态(不会释放内存)

定义一个全局变量 demoData,这个变量会持续维持可被引用的状态。

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

执行这段代码后,进入 Chrome DevTools 中的 Memory 页,这个功能可以得到当前页面所占用的内存状况。接下来点击 "Take  snapshot" 按钮。

JS中的内存管理机制及验证方法

可以看到目前执行完这段代码后占用了 6.2MB 的内存空间(注意:任何浏览器环境和插件都会影响所占用的内存状态)。

JS中的内存管理机制及验证方法

(2) 案例二:使变量无法再次被引用(执行后释放内存)

限制变量的作用域,使变量无法再被外部引用。

此段代码依然会执行这个函数,也会将值赋值给变量,但外部无法再次引用 demoData 的值。

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

然后回到 Memory 页点击 "Take snapshot" 重新取得内存的状态,接下来会得到与前面不同的结果,这次只占用了 1.2MB 的内存(其中  5MB 被释放掉了)

JS中的内存管理机制及验证方法

总结

通过前面的例子,我们知道了作用域以及内存之间的关系,而内存管理也是前端打工人必须要掌握的知识(除了控制内存的使用大小,还需在必要时保留而不被释放)。

到此,关于“JS中的内存管理机制及验证方法”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     807人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     351人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     314人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     433人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     221人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯