教程知识库【免费下载链接】tech-interview-for-developer 신입 개발자 전공 지식 기술 면접 백과사전 项目地址https://gitcode.com/GitHub_Trending/te/tech-interview-for-developer点击查看免费下载本篇技术指南围绕 [Language/[Javascript] Closure.md](Language/[Javascript] Closure.md) 展开系统讲解 JavaScript 闭包的核心机制从词法作用域Lexical Scoping与静态/动态作用域对比出发逐步剖析闭包的形成原理、作用域链结构、基于闭包模拟私有方法的 Module Pattern以及循环中创建闭包的经典陷阱与四种修复方案最后给出闭包相关的性能优化建议。读完本文你将能够准确解释闭包是什么、为什么外层函数返回后局部变量依然存活并能在真实项目中正确使用闭包、规避内存与性能风险。什么是闭包Closure闭包Closure是与周边状态即词法环境 lexical environment的引用捆绑在一起的函数组合。换句话说闭包让内层函数inner function能够访问外层函数outer function的作用域。在 JavaScript 中闭包在函数创建的时刻随函数一起被创建——每创建一个函数就会同时创建一个闭包。理解闭包前先看一个最基础的例子function init() { var name Mozilla; // name 是 init 创建的局部变量 function displayName() { // displayName 是内层函数也是一个闭包 alert(name); // 使用父级函数中声明的变量 } displayName(); } init();因为闭包允许内层函数访问外层函数的作用域所以上面示例中内层函数displayName()引用了外层函数init()的局部变量name。词法作用域Lexical Scoping与静态/动态作用域词法作用域lexical scoping又称静态作用域 static scope定义了嵌套函数中变量名的解析方式变量在函数定义书写位置所处的作用域中解析而非在调用位置解析。内层函数即使在其父函数已经返回之后依然持有父函数的作用域。/* lexical scope (also called static scope) */ function func() { var x 5; function func2() { console.log(x); } func2(); } func() // print 5与之相对的是动态作用域dynamic scope变量在函数调用链call chain中解析/* dynamic scope */ function func() { console.log(x) } function dummy1() { x 5; func(); } function dummy2() { x 10; func(); } dummy1() // print 5 dummy2() // print 10两个示例的对比结论很清晰第一个示例中x的取值可以在编译期compile-time通过函数定义位置推断出来因此是静态static的第二个示例中外层作用域是动态变化的x的值取决于函数的调用链因此被称为动态dynamic的。JavaScript 采用词法静态作用域这也是闭包能够稳定捕获外层变量的根本前提。这一特性与 ES2015 引入的块级作用域let/const共同构成了现代 JavaScript 变量解析的基础相关语法细节可参考 [Language/[Javascript] ES2015 요약 정리.md](Language/[Javascript] ES2015%20요약%20정리.md)。闭包的形成原理函数 词法环境再看一个经典示例——内层函数在外层函数执行之前被返回function makeFunc() { var name Mozilla; function displayName() { alert(name); } return displayName; } var myFunc makeFunc(); myFunc();上面的示例与最初的init()产生相同的效果区别在于内层函数displayName()在外层函数执行结束之前就被返回了。在其他许多编程语言中函数的局部变量只在函数执行期间存在。直觉上makeFunc()调用结束后name变量就不应再被访问了——但 JavaScript 并非如此。原因在于JavaScript 的函数会形成闭包。闭包是函数与词法环境的组合这个环境由闭包被创建时作用域内的所有局部变量构成。在上面这种情况下myFunc引用的是makeFunc执行时创建的displayName实例该实例持续持有包含name变量的词法环境。因此当myFunc被调用时name变量依然可用。闭包非常有用因为它把数据与函数连接起来——这与面向对象编程OOP中数据与一个或多个方法绑定在一起完全一致。最终你可以借助闭包实现 OOP 中对象object的效果。用闭包模拟私有方法Emulating Private Methods with Closures与 Java 不同JavaScript 没有提供实现private的原生手段但可以通过闭包实现私有方法。下面的示例遵循Module模块设计模式var counter (function() { var privateCounter 0; function changeBy(val) { privateCounter val; } return { increment: function() { changeBy(1); }, decrement: function() { changeBy(-1); }, value: function() { return privateCounter; } }; })(); console.log(counter.value()); // 0. counter.increment(); counter.increment(); console.log(counter.value()); // 2. counter.decrement(); console.log(counter.value()); // 1.在上面的示例中counter.increment、counter.decrement、counter.value三个函数共享同一个词法环境。这个共享的词法环境创建于声明即执行的匿名函数即IIFEImmediately Invoked Function Expression的 body 中。该词法环境持有私有变量与私有函数匿名函数外部无法访问它们——privateCounter和changeBy从外部来看是完全私密的。用普通函数工厂替代 IIFE如果不想用匿名 IIFE也可以用普通函数作为工厂var makeCounter function() { var privateCounter 0; function changeBy(val) { privateCounter val; } return { increment: function() { changeBy(1); }, decrement: function() { changeBy(-1); }, value: function() { return privateCounter; } } }; var counter1 makeCounter(); var counter2 makeCounter(); alert(counter1.value()); // 0. counter1.increment(); counter1.increment(); alert(counter1.value()); // 2. counter1.decrement(); alert(counter1.value()); // 1. alert(counter2.value()); // 0.注意counter1与counter2各自拥有独立的词法环境互不影响——counter1的增减不会改变counter2的值。何时改用对象而非闭包上面的工厂函数示例有一个性能考量每次调用makeCounter()increment、decrement、value函数都会被重新创建并赋值产生不必要的开销。这种情况下更推荐把函数声明在对象的prototype上通过对象实例来运作效率更高function makeCounter() { this.publicCounter 0; } makeCounter.prototype { changeBy : function(val) { this.publicCounter val; }, increment : function() { this.changeBy(1); }, decrement : function() { this.changeBy(-1); }, value : function() { return this.publicCounter; } } var counter1 new makeCounter(); var counter2 new makeCounter(); alert(counter1.value()); // 0. counter1.increment(); counter1.increment(); alert(counter1.value()); // 2. counter1.decrement(); alert(counter1.value()); // 1. alert(counter2.value()); // 0.这里publicCounter是公开属性因此直接命名为 public方法则通过原型链被所有实例共享。关于原型继承机制的详细讲解可参考 Language/[Javasript] Object Prototype.md。小结需要封装私有状态时用闭包Module Pattern需要大量共享方法时优先用 prototype 构造器避免重复创建函数带来的开销。闭包的作用域链Closure Scope Chain每个闭包都具有三种作用域Local Scope自身作用域Outer Functions Scope外层函数作用域Global Scope全局作用域多层嵌套函数可以逐层捕获外部作用域示例// global scope var e 10; function sum(a){ return function(b){ return function(c){ // outer functions scope return function(d){ // local scope return a b c d e; } } } } console.log(sum(1)(2)(3)(4)); // log 20也可以不使用匿名函数改用具名函数逐步调用// global scope var e 10; function sum(a){ return function sum2(b){ return function sum3(c){ // outer functions scope return function sum4(d){ // local scope return a b c d e; } } } } var s sum(1); var s1 s(2); var s2 s1(3); var s3 s2(4); console.log(s3) //log 20通过上面的例子可以看出闭包持有所有外层函数的作用域。最内层函数可以同时访问a、b、c、d各级外层参数以及全局变量e。这里的柯里化式调用方式sum(1)(2)(3)(4)正是闭包捕获参数能力的典型体现。在循环中创建闭包经典陷阱Creating Closures in Loops先看一段 HTML 与 JS 配合的示例p idhelpHelpful notes will appear here/p pE-mail: input typetext idemail nameemail/p pName: input typetext idname namename/p pAge: input typetext idage nameage/pfunction showHelp(help) { document.getElementById(help).textContent help; } function setupHelp() { var helpText [ {id: email, help: Your e-mail address}, {id: name, help: Your full name}, {id: age, help: Your age (you must be over 16)} ]; for (var i 0; i helpText.length; i) { var item helpText[i]; document.getElementById(item.id).onfocus function() { showHelp(item.help); } } } setupHelp();这段代码无法正常工作聚焦任意输入框时显示的都是 age 的提示文本。原因是onfocus回调是闭包它捕获了函数声明所在处setupHelp的函数作用域。循环创建了3 个闭包但它们共享同一个词法环境。由于item用var声明会发生变量提升hoistingitem.help的值在onfocus真正执行聚焦触发时才被解析此时循环早已结束item指向最后一个元素因此永远传递 age 的提示文本。修复方案一工厂函数制造独立词法环境function showHelp(help) { document.getElementById(help).textContent help; } function makeHelpCallback(help) { return function() { showHelp(help); }; } function setupHelp() { var helpText [ {id: email, help: Your e-mail address}, {id: name, help: Your full name}, {id: age, help: Your age (you must be over 16)} ]; for (var i 0; i helpText.length; i) { var item helpText[i]; document.getElementById(item.id).onfocus makeHelpCallback(item.help); } } setupHelp();与所有闭包共享一个词法环境不同makeHelpCallback函数每次调用都会创建一个全新的词法环境从而把每一次迭代的help值固定下来。修复方案二匿名闭包IIFE逐次捕获function showHelp(help) { document.getElementById(help).textContent help; } function setupHelp() { var helpText [ {id: email, help: Your e-mail address}, {id: name, help: Your full name}, {id: age, help: Your age (you must be over 16)} ]; for (var i 0; i helpText.length; i) { (function() { var item helpText[i]; document.getElementById(item.id).onfocus function() { showHelp(item.help); } })(); // Immediate event listener attachment with the current value of item (preserved until iteration). } } setupHelp();通过 IIFE 在每次迭代时立即执行把当前item的值冻结在独立的词法环境中。修复方案三使用 let 关键字function showHelp(help) { document.getElementById(help).textContent help; } function setupHelp() { var helpText [ {id: email, help: Your e-mail address}, {id: name, help: Your full name}, {id: age, help: Your age (you must be over 16)} ]; for (let i 0; i helpText.length; i) { let item helpText[i]; document.getElementById(item.id).onfocus function() { showHelp(item.help); } } } setupHelp();let声明具有块级作用域每次迭代都会生成新的绑定闭包捕获的是当次迭代的item从语言层面彻底解决了该问题。这也是 ES2015 推荐的做法相关语法可参考 Language/[Javascript] ES2015 요약 정리.md。四种方案对比工厂函数显式传参、IIFE立即执行捕获、let块级作用域均可修复该陷阱其中let是最简洁、最符合现代 JavaScript 规范的方案。性能考量Performance Consideration在不需要闭包的场景下创建闭包会对内存与速度造成负面影响。例如创建新的对象/类时方法应当放在对象的prototype上而不是放在构造函数里——因为每次调用构造函数方法都会被重新赋值reassignfunction MyObject(name, message) { this.name name.toString(); this.message message.toString(); this.getName function() { return this.name; }; this.getMessage function() { return this.message; }; }上述示例中getName与getMessage在每次构造调用时都会被重新创建。改为挂载到原型function MyObject(name, message) { this.name name.toString(); this.message message.toString(); } MyObject.prototype { getName: function() { return this.name; }, getMessage: function() { return this.message; } };注意不推荐一次性整体重写 prototype 对象上面第二种写法虽然可行但会替换默认的 prototype可能丢失constructor等既有引用。更稳妥的做法是逐个在 prototype 上追加方法function MyObject(name, message) { this.name name.toString(); this.message message.toString(); } MyObject.prototype.getName function() { return this.name; }; MyObject.prototype.getMessage function() { return this.message; };最佳实践总结需要私有状态时用闭包Module Pattern / IIFE合理封装需要大量共享方法时优先把方法定义在 prototype 上让所有实例共享同一份函数避免构造时重复创建函数造成内存与分配开销循环中创建回调时优先使用let或工厂函数避免共享词法环境导致的取值错误不滥用闭包不必要的闭包会长期持有外层作用域中的变量导致本应被回收的内存无法释放。本文要点速览主题核心结论闭包定义函数 词法环境的组合内层函数可访问外层函数作用域作用域类型词法静态作用域 vs 动态作用域JavaScript 属于前者闭包原理外层函数返回后其词法环境仍被闭包持有局部变量继续存活私有方法借助 IIFE 闭包实现 Module Pattern模拟 Java 式 private作用域链Local → Outer Functions → Global多层嵌套逐层捕获循环陷阱var提升导致闭包共享同一词法环境用工厂函数 / IIFE /let修复性能建议共享方法放 prototype按需使用闭包避免不必要的内存开销闭包是 JavaScript 面试中的高频考点也是事件回调、函数式编程、模块化与状态封装的核心机制。掌握上述原理、陷阱与优化原则即可在实际开发与面试中游刃有余。延伸阅读Language/[Javascript] ES2015 요약 정리.mdlet/const块级作用域、IIFE、箭头函数等现代语法Language/[Javasript] Object Prototype.md原型链与对象继承机制README.md技术面试知识百科全书的完整目录赞分享教程知识库【免费下载链接】tech-interview-for-developer 신입 개발자 전공 지식 기술 면접 백과사전 项目地址https://gitcode.com/GitHub_Trending/te/tech-interview-for-developer点击查看免费下载相关推荐如何快速安装和管理Codex技能5个简单步骤提升你的AI工作流如何快速安装和管理Codex技能5个简单步骤提升你的AI工作流 在AI辅助编程的时代Codex技能已成为开发者提升效率的秘密武器。skill installAI 技能AI 插件工作流自动化人工智能攻克JavaScript面试的3个隐藏陷阱从闭包到事件循环攻克JavaScript面试的3个隐藏陷阱从闭包到事件循环 你是否在JavaScript面试中遇到过看似简单却总能答错的问题是否明明掌握了基础知识却在实际前端教程文档30 Seconds of Interviews 中的 JavaScript 闭包Closures详解从词法作用域到私有数据实战30 Seconds of Interviews 中的 JavaScript 闭包Closures详解从词法作用域到私有数据实战 闭包Closure是教程前端上一篇告别拥挤代码FiraCode标点优化如何拯救你的视觉疲劳下一篇解决Draw.io桌面版PDF导出中白色文本变灰的3个实用方案创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考