百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>JS教程> 讲解 JS 内存治理机制及验证
分享文章到:

讲解 JS 内存治理机制及验证

发布时间:01/01 来源:未知 浏览: 关键词:
javascript栏目介绍内存治理机制及验证

引荐(免费):JavaScript(视频)

作用域

JavaScript 的变量被作用域所限制,假如超出了作用域,那么变量就没有方法再被使用,这样做的长处是:

  • 可以幸免当前的变量转为全局变量
  • 有效限制变量的作用区域

而变量作用域也会依照声明方式的不一样,发生不一样的作用域:

  • 未声明:全局变量
  • var 声明:作用域在 函数
  • letconst 声明:作用域在 {}

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 之后所新增的letconst 作用域则与过去不一样,改用 {} 作为作限制用域的方式,这让 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

流程如下:

  1. 开拓一个内存空间来存置变量 a ,不外这时还没有赋值(缘由可参照 :Hoisting)

a1f73427d490ec550e79ac06b2abdb8.png

  1. a 赋值。

2a2c245dd1d9d9e210bd692708380d7.png

所有的变量都会占用内存空间,除此之外对象、数组的属性乃至函数参数等也会用雷同的概念停止占用。调取一个函数时,每一个函数的作用域也都会重复的停止内存占用。随着利用程序越来越复杂的状况下,假如连续的占用内存而没有停止恰当的开释,那么内存大概会被耗尽。

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

来自MDN:collectible if there are zero references pointing to it.

内存开释的验证

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

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

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;
}

案例一:使变量保持在可援用的状态(不会开释内存)

定义一个全局变量 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" 按钮。

671a00ef74c97d9e614b136acc82cee.png

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

0b4169d1a88847a1dc786497971be80.png

案例二:使变量没法再次被援用(施行后开释内存)

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

此段代码仍然会施行这个函数,也会将值赋值给变量,但外部没法再次援用 demoData 的值。

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

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

0beb59b1b77a6ba65399e8633e59f23.png

总结

通过前面的例子,我们知道了作用域乃至内存之间的关系,而内存治理也是前端打工人必需要把握的知识(除了操纵内存的使用大小,还需在必要时保存而不被开释)。

以上就是讲解 JS 内存治理机制及验证的具体内容,更多请关注百分百源码网其它相关文章!

打赏

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

百分百源码网 建议打赏1~10元,土豪随意,感谢您的阅读!

共有151人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

能出一分力是一分吧!

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板