文章详情

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

请输入下面的图形验证码

提交验证

短信预约提醒成功

详解JavaScript中的闭包是如何产生的

2022-12-28 12:01

关注

这次从内存管理的角度来看看,闭包是怎么产生的。

我们知道,在调用函数时,其实会产生临时的 调用栈。这些调用栈保存的是 执行上下本,并实际保存在 栈内存 中。

每执行一个函数,函数内的局部临时变量会临时保存起来。如果此时函数又调用了另一个函数,另一个函数下的局部变量也要保存下来,就这样,我们产生了栈。

当一个函数执行完后,它对应的局部临时变量就会被销毁。

局部变量保存下来,是为了保护上下文现场。

举例说明一下:

function a() {
  const a_num = 99;
  const a_obj = { val: "a" };
  b();
}

function b() {
  const b_str = "text";
  c();
}

function c() {
  const c_bool = true;
  // debugger
}

a();

这里我们嵌套调用了 a、b、c 函数,会产生如下的调用栈。

基本类型的临时变量,会直接保存到栈内存中,对于引用类型,则是在堆内存中生成,然后将地址拿到,保存到栈内存中。

引用类型为什么不直接放到栈内存中?因为栈内存不是很大,很容易就栈溢出,而引用类型通常很大。

闭包的产生

函数调用完成后,它内部声明的临时变量会被销毁。理论上应该如此,但如果使用了闭包,可以会让临时变量一直保留不被销毁。

例子:

function createCounter() {
  let count = 0;
  let otherVal = "other val";
  return function counter() {
    // debugger;
    console.log(count++);
  };
}

const counter = createCounter();

console.log(counter());

执行过程为:

使用 DevTool 可以观察到这个闭包对象:

所以,如果一个闭包返回的函数执行完后不用了,要设置为 null。否则它关联的闭包对象会一直在那里占用内存

多个内部函数共享一个闭包对象

另外,如果有多个内部函数,这些函数会共用同一个闭包对象。即使其中的一个内部函数不会返回,它也会给闭包对象加东西。

下面我们加了一个 printOtherVal 的内部函数,它并不返回,但还是会导致返回 counter 函数对应的闭包对象带上了它不需要的 otherVal 变量。

这是 JS 引擎处理闭包策略问题,理论不应该有这样奇怪的效果。

结尾

调用函数时,会产生调用栈,将当前函数上下文入栈,会保存基本类型变量。引用变量会在堆内存中创建,然后在栈内存中引用过来。

因为 JavaScript 中函数是第一公民,所以会有闭包的概念。当发现内部函数,会创建一个闭包对象,将其中使用到的外部函数变量保存到该闭包对象下。之后内部函数被调用时,就会从闭包里提取变量,如果找不到则从全局上下文提取。

到此这篇关于详解JavaScript中的闭包是如何产生的的文章就介绍到这了,更多相关JavaScript闭包内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

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

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

软考中级精品资料免费领

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

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

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

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

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

    难度     220人已做
    查看

相关文章

发现更多好内容

猜你喜欢

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