详解变量提升和闭包的应用
文章目录堆栈内存变量提升带var和不带var的区别作用域链的拓展闭包什么是闭包闭包的应用堆栈内存栈内存作用域提供一个供js代码自上而下执行的环境代码都是在栈内存中执行存储基本数据类型值释放当栈内存被销毁存储的那些基本值也跟着被销毁了一般函数执行完成所形成的私有作用域会自动释放除非某些内容被栈内存以外的变量占用了此时栈内存不能释放全局栈内存只有在页面关闭的时候被释放堆内存引用值对应的空间存储引用类型值对象键值对 函数代码字符串当前堆内存释放销毁那么这个引用值彻底没了释放当对内存没有被任何的变量或其他东西所占用浏览器会在空闲的时候自主进行内存回收把所有不被占用堆的内存销毁掉。比如我让ary1nullnull是空对象指针让原始变量谁都不指原有被占用的对内存就没有被东西占用了浏览器在空闲时候就把该堆内存销毁了。举例var a10经历三个过程声明变量a没有赋值默认是undefined在当前作用域开辟一个位置存储12栈让变量a和12关联在一起定义赋值var a[1,2]声明变量a开辟一个新的内存空间存储[1,2]堆让变量a和该对内存地址关联起来如果是函数的话会开辟一个新的内存空间存储代码字符串执行的时候开辟一个私有作用域栈把之前创建函数时存储的字符串执行执行完毕该栈内存销毁。变量提升js是先预编译再执行预编译的过程就是扫一遍把变量绑定作用域。所以才有变量提升。带var的只声明未定义带function的把声明定义都完成了console.log(a)console.log(sum)vara1functionsum(){console.log(hello world)}执行结果是【注意】私有作用域先形参赋值再变量提升再代码执行带var和不带var的区别在全局作用域下声明一个变量也相当于给window对象设置了一个属性属性的值就是属性值私有作用域声明的私有变量和window没关系console.log(a)//undefined 变量提升不报错conosle.log(window.a)//undefined 给window设置一个对象console.log(ainwindow)//true window存在a属性vara12console.log(a)//12conosle.log(window.a)//12如果不带var,看以下代码a12conosle.log(a)//12console.log(window.a)//12console.log(a)//报错 不执行a12conosle.log(a)console.log(window.a)console.log(window.a)//undefinedconsole.log(ainwindow)//falsea12//window.a 12conosle.log(a)//12console.log(window.a)//12【总结】在全局作用域加var是全局变量由于window对象和全局有映射关系也就设置了window的属性不加var的本质是window下的属性自然没有变量提升【拓展】在私有作用域中带var的在私有作用域有变量提升都声明为死于变量和外界没有任何关系不带var不是私有变量它会向它的上级作用域查找看是否为上级变量不是则继续向上查找一直查找到window位置这种查找机制叫做私有作用域链作用域链的拓展functionfn(){//变量提升无b13console.log(binwindow)//trueconsole.log(b)}fn();//13console.log(b)//13在作用域链查找过程中如果找到win也没有这个变量相当于给win设置了一个属性bwindow.b13闭包什么是闭包·存在没被释放的内存当前作用域使用其他作用域的变量比如functionb(){vara1returnfunctionc(){console.log(a)}}vareb()e()//输出1这就是个闭包b执行完了栈内存也没有被释放里面的a被b栈内存以外的变量引用。再看e执行的时候器作用域是全局作用域但使用到了b的私有作用域下的变量a闭包的应用为了保证js 的性能堆栈内存的性能优化应该尽可能减少闭包的使用不被销毁的堆栈内存是耗性能的闭包具有保护作用保护私有变量不受外界干扰在项目中尤其是团队写作开发的时候应尽可能减少全局变量的使用以防止相互之间的冲突那么此时哦我们可以把自己的一部分内容封装到一个闭包里让全局变量变为私有变量。基于return把需要供外面使用的方法暴露出去。varZepto(function(){//...return{xxx:function(){}}})或者当想改变一个对象的值比如user之前用user.name但这个方法不够好当程序过于复杂会一不小心改动一些东西变化的轨迹就非常难以追踪。虽然有效但非常危险。所以想把修改过程管控起来就用到了闭包。可以定义一个function user(name)。在里面var一个age,sex。这时候返回的不是一个确切的数值是一个对象对象里包含不同的方法比如getName,setName。方法就是定义在对象里面的函数。当做的项目内部数据流足够复杂那我们此处必须得找个办法来归纳不能让对象里面的值在里面被随便修改必须得找一个像一个接口一样的东西必须得按我的方法才能修改和设置某个值这样严谨很多。闭包可以通过走子函数来获取母函数的函数作用域然后去存取里面的值。这就是闭包的好处和特点。3. 闭包具有保存作用形成不销毁的栈内存把一些值保存下来方便后面的调取使用可以基于闭包解决用var for循环给多个按钮绑定事件无论点击第几个i都是最后那个。这个问题可以直接直接用let解决此处说用闭包解决的办法假如有五个按钮for(vari0;ibuttonList.length;i){buttonList[i].onclickfunction(){console.log(i)}}//此时无论点击第几个按钮打印的都是4因为js在es6之前没有块级作用域。当我们点击的时候外层循环已经结束可以点击的时候页面已经加载完成页面加载完成预示着js代码都已经执行完成也就是循环也都执行完成外层循环结束已经让全局下的i为4用闭包解决如下for(vari0;ibuttonList.length;i){buttonList[i].onclick(function(){//让自执行函数执行把执行的返回值(return)赋值给onclick此时onclick绑定的是返回的小函数点击的时候执行的是小函数自执行函数在给事件赋值的时候已经执行了returnfunction(){console.log(i)//上级作用域自执行函数形成的作用域}})()}

相关新闻

OpenAI发布Presence企业智能体服务,75%问题可自动解决

OpenAI发布Presence企业智能体服务,75%问题可自动解决

OpenAI近日发布了一款名为Presence的企业级服务,专为部署语音与聊天智能体而设计,可处理客户及员工的各类请求,有望实现部分原本由一线支持团队承担的工作的自动化。这些智能体不仅能够回答问题,还能操作IT系统。企业可自行设定智…

2026/10/3 4:48:16 阅读更多 →
OpenCore Legacy Patcher完整教程:四步让老Mac免费运行最新macOS

OpenCore Legacy Patcher完整教程:四步让老Mac免费运行最新macOS

OpenCore Legacy Patcher完整教程:四步让老Mac免费运行最新macOS 【免费下载链接】OpenCore-Legacy-Patcher Experience macOS just like before 项目地址: https://gitcode.com/GitHub_Trending/op/OpenCore-Legacy-Patcher 你是否有一台被苹果官方"抛…

2026/10/2 2:38:10 阅读更多 →
线程通讯(一)

线程通讯(一)

##底层业务线数据隔离 要求:子线程循环跑30次,暂停,然后跑到主线程40次,接着子线程循环跑30次,暂停,主线程跑40次 如此往复,一共交替50次 public class ThreadTest {private static Lock lock …

2026/9/29 13:30:54 阅读更多 →

最新新闻

Python pytest 测试与日志输出笔记

Python pytest 测试与日志输出笔记

1. pytest 中为什么 print() 看不到?例如:def test_get_my_applications(): applications query_my_applications("employee_zhao") for i in applications: print(i)pytest 默认会捕获标准输出,所以测试成功时&…

2026/10/3 7:34:10 阅读更多 →
单视频三维重构赋能边海防哨所、雷达站、观察点立体态势还原

单视频三维重构赋能边海防哨所、雷达站、观察点立体态势还原

单视频三维重构赋能边海防哨所、雷达站、观察点立体态势还原一、方案背景边海防哨所、雷达站、前沿观察点地处山地、戈壁、岸滩、丛林等野外复杂环境,阵地内包含执勤营房、雷达天线阵地、观察塔、围墙隔离设施、通道工事,外围地形起伏大、沟壑茂密&#…

2026/10/3 7:34:10 阅读更多 →
3DCellForge 安全实践指南:API Key 服务端管理与敏感信息防泄露完整技巧

3DCellForge 安全实践指南:API Key 服务端管理与敏感信息防泄露完整技巧

3DCellForge 安全实践指南:API Key 服务端管理与敏感信息防泄露完整技巧 【免费下载链接】3DCellForge AI-powered interactive 3D model generation, inspection, and presentation studio. 项目地址: https://gitcode.com/gh_mirrors/3d/3DCellForge 3DCel…

2026/10/3 7:34:10 阅读更多 →
JRSwizzle新特性解析:withBlock如何优雅Hook方法?NSInvocation机制深度揭秘

JRSwizzle新特性解析:withBlock如何优雅Hook方法?NSInvocation机制深度揭秘

JRSwizzle新特性解析:withBlock如何优雅Hook方法?NSInvocation机制深度揭秘 【免费下载链接】jrswizzle one-stop-shop for all your method swizzling needs 项目地址: https://gitcode.com/gh_mirrors/jr/jrswizzle JRSwizzle 是一款 Objective…

2026/10/3 7:34:10 阅读更多 →
Python爬虫爬取|地图POI采集实战:行政区检索、结果去重与合规边界

Python爬虫爬取|地图POI采集实战:行政区检索、结果去重与合规边界

第 029 篇 | 地理数据 | 高级

2026/10/3 7:34:09 阅读更多 →
Java学习五 面向对象高级5 内部类4-匿名内部类(重点)

Java学习五 面向对象高级5 内部类4-匿名内部类(重点)

1.例子:接口:测试类:总结:

2026/10/3 7:33:09 阅读更多 →

日新闻

把回忆蒸馏成 AI 的浪漫实验:为什么你需要前任.skill 完整指南

把回忆蒸馏成 AI 的浪漫实验:为什么你需要前任.skill 完整指南

把回忆蒸馏成 AI 的浪漫实验:为什么你需要前任.skill 完整指南 【免费下载链接】ex-skill 前任 skill 项目地址: https://gitcode.com/gh_mirrors/exsk/ex-skill 前任.skill 是一个运行在 Claude Code 上的开源 Skill:导入微信、iMessage、短信、…

2026/10/3 0:00:27 阅读更多 →
45个经典Linux面试题:从命令到网络排障的完整考点解析

45个经典Linux面试题:从命令到网络排障的完整考点解析

刚开始带应届生的时候,我最头疼的就是他们拿着一摞Linux面试题背得滚瓜烂熟,一上机全露馅。后来自己从被面的人变成面别人的人,才慢慢摸清楚:Linux面试题考的根本不是答案本身,而是你面对一个不确定的系统问题时&#…

2026/10/3 0:01:28 阅读更多 →
SAP生产预留实战指南:MB21/MB23/MB25协同与MRP集成

SAP生产预留实战指南:MB21/MB23/MB25协同与MRP集成

简介:本资源是一份面向SAP ABAP开发人员、生产计划专员及ERP实施顾问的实操型操作指南,聚焦SAP生产预留核心业务场景,系统解决物料预留创建、查询、校验与批量处理等高频问题。文档以结构化方式覆盖预留背景原理、OMC2编码规则、工厂级参数配…

2026/10/3 0:01:28 阅读更多 →

周新闻

如何划分训练/验证集:Spirula Studio五种eval_mode策略详解

如何划分训练/验证集:Spirula Studio五种eval_mode策略详解

如何划分训练/验证集:Spirula Studio五种eval_mode策略详解 【免费下载链接】spirula-studio Cross-vendor 3D Gaussian Splatting trainer - video to splat to mesh, Vulkan or CUDA. 项目地址: https://gitcode.com/GitHub_Trending/sp/spirula-studio Sp…

2026/10/1 19:40:48 阅读更多 →
SEO怎么推广速查手册新手避坑实战指南

SEO怎么推广速查手册新手避坑实战指南

SEO怎么推广速查手册新手避坑实战指南 模板网站太丑不够用?别急着加滤镜,那是治标不治本。很多老板盯着后台流量掉得眼红,却还在纠结首页Banner的圆角是不是3像素。这就像穿着西装去挖土,姿势不对,努力白费。我整理这份 速查手册…

2026/10/1 19:41:40 阅读更多 →
FireRed-OpenStoryline少样本仿写深度解析:AI Agent如何复刻你的独特文案风格与节奏

FireRed-OpenStoryline少样本仿写深度解析:AI Agent如何复刻你的独特文案风格与节奏

FireRed-OpenStoryline少样本仿写深度解析:AI Agent如何复刻你的独特文案风格与节奏 【免费下载链接】FireRed-OpenStoryline FireRed-OpenStoryline is an AI video editing agent that transforms manual editing into intention-driven directing through natural language …

2026/10/1 20:05:24 阅读更多 →

月新闻

我发现了一个新思路:用 Remotion + Claude Code 像写代码一样自动化生成短视频

我发现了一个新思路:用 Remotion + Claude Code 像写代码一样自动化生成短视频

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/2 10:36:31 阅读更多 →
Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式:TaoToken 统一 Key 配置与验证

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式:TaoToken 统一 Key 配置与验证

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/2 5:26:06 阅读更多 →
黑夜航拍船只数据集训练YOLOV5模型全流程解析

黑夜航拍船只数据集训练YOLOV5模型全流程解析

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/2 6:09:11 阅读更多 →