前端开发面试题—JavaScript闭包

简介: 今天分享一下我遇到的一个面试题,是关于JavaScript闭包的问题,什么是JavaScript闭包?

今天分享一下我遇到的一个面试题,是关于JavaScript闭包的问题,什么是JavaScript闭包?

📦什么是闭包

    • 官方对闭包的解释是:一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。
    • 在JavaScript中,内嵌函数(即函数定义和函数表达式位于另一个函数的函数体内)可以访问定义在外层函数中的所有变量和函数,并包括其外层函数能访问的所有变量和函数。但是在函数外部则不能访问函数的内部变量和嵌套函数。此时就可以使用“闭包”来实现(当其中一个这样的内部函数在包含它们的外部函数之外被调用时,就会形成闭包)。
      所谓“闭包”指的就是有权访问另一函数作用域内变量(局部变量)的函数。它最主要的用途是以下两点:
      1️⃣ 可以在函数外部读取函数内部的变量;
      2️⃣ 可以让变量的值始终保持在内存中。
      需要注意的是(缺点),由于闭包会使得函数中的变量一直被保存在内存中,内存消耗很大,所以闭包的滥用可能会降低程序的处理速度,造成内存消耗等问题。

    image.gif

    📦闭包的简单实现

    functionfn() {
    varnum=0;
    vara=function () {
    return++num;
    };
    returna;
    }
    varcount=fn();    // 保存fn()返回的函数,此时count就是一个闭包// 访问测试console.log(count());  // 输出结果:1console.log(count());  // 输出结果:2console.log(count());  // 输出结果:3console.log(count());  // 输出结果:4console.log(count());  // 输出结果:5


    • 闭包的常见创建方式就是在一个函数内部创建另一个函数,通过另一个函数访问这个函数的局部变量。
    • 上述第3~5行代码(var a = function () {return ++num;};),利用闭包函数实现了在全局作用域中访问局部变量num,并让变量的值始终存储在内存中。第8行代码(var count = fn(); )调用fn()函数后,接下来将匿名函数的引用返回给count变量,且匿名函数中使用了局部变量num。因此,局部变量num所占用的资源不会在fn()函数执行完成后被JavaScript回收,依然保存在内存中。这样就形成了一个闭包。

    另一个例子

    functionfn(){
    varstr="abc";
    returnfunction(){
    alert(str);
    }
    }
    varfObj=fn();
    fObj();
    image.gif

    在上面代码中,str是定义在函数fn()中局部变量,若str在fn()函数调用完成以后不能再被访问,则在函数执行完成后str将被释放。但是由于函数fn()返回了一个内部函数,且这个返回的函数引用了str变量,导致了str可能会在fn()函数执行完成以后还会被引用,所以str所占用的资源不会被回收。这样fn就形成了一个闭包。

    相关文章
    |
    6月前
    |
    JavaScript 前端开发 API
    |
    6月前
    |
    存储 JavaScript 前端开发
    |
    8月前
    |
    前端开发 JavaScript Java
    JavaScript闭包深入剖析:性能剖析与优化技巧
    JavaScript 闭包是强大而灵活的特性,广泛应用于数据封装、函数柯里化和事件处理等场景。闭包通过保存外部作用域的变量,实现了私有变量和方法的创建,提升了代码的安全性和可维护性。然而,闭包也可能带来性能问题,如内存泄漏和执行效率下降。为优化闭包性能,建议采取以下策略:及时解除对不再使用的闭包变量的引用,减少闭包的创建次数,使用 WeakMap 管理弱引用,以及优化闭包结构以减少作用域链查找的开销。在实际开发中,无论是 Web 前端还是 Node.js 后端,这些优化措施都能显著提升程序的性能和稳定性。
    213 70
    |
    7月前
    |
    资源调度 JavaScript 前端开发
    前端开发必备!Node.js 18.x LTS保姆级安装教程(附国内镜像源配置)
    本文详细介绍了Node.js的安装与配置流程,涵盖环境准备、版本选择(推荐LTS版v18.x)、安装步骤(路径设置、组件选择)、环境验证(命令测试、镜像加速)及常见问题解决方法。同时推荐开发工具链,如VS Code、Yarn等,并提供常用全局包安装指南,帮助开发者快速搭建高效稳定的JavaScript开发环境。内容基于官方正版软件,确保合规性与安全性。
    6393 24
    |
    8月前
    |
    自然语言处理 JavaScript 前端开发
    当面试官再问我JS闭包时,我能答出来的都在这里了。
    闭包(Closure)是前端面试中的高频考点,广泛应用于函数式编程中。它不仅指函数内部定义的函数,还涉及内存管理、作用域链和垃圾回收机制。闭包可以让函数访问其外部作用域的变量,但也可能引发内存泄漏等问题。通过合理使用闭包,可以实现模块化、高阶函数和回调函数等应用场景。然而,滥用闭包可能导致代码复杂度增加、调试困难以及潜在的性能问题。为了避免这些问题,开发时应谨慎处理闭包,避免不必要的嵌套,并及时清理不再使用的变量和监听器。
    358 16
    当面试官再问我JS闭包时,我能答出来的都在这里了。
    |
    8月前
    |
    前端开发
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    227 1
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    |
    7月前
    |
    缓存 自然语言处理 JavaScript
    JavaScript中闭包详解+举例,闭包的各种实践场景:高级技巧与实用指南
    闭包是JavaScript中不可或缺的部分,它不仅可以增强代码的可维护性,还能在模块化、回调处理等场景中发挥巨大作用。然而,闭包的强大也意味着需要谨慎使用,避免潜在的性能问题和内存泄漏。通过对闭包原理的深入理解以及在实际项目中的灵活应用,你将能够更加高效地编写出简洁且功能强大的代码。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
    |
    11月前
    |
    JavaScript 前端开发
    js 闭包的优点和缺点
    【10月更文挑战第27天】JavaScript闭包是一把双刃剑,在合理使用的情况下,它可以带来很多好处,如实现数据封装、记忆功能和模块化等;但如果不注意其缺点,如内存泄漏、变量共享和性能开销等问题,可能会导致代码出现难以调试的错误和性能问题。因此,在使用闭包时,需要谨慎权衡其优缺点,根据具体的应用场景合理地运用闭包。
    297 58
    |
    11月前
    |
    JavaScript 前端开发 Java
    springboot解决js前端跨域问题,javascript跨域问题解决
    本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
    175 3
    springboot解决js前端跨域问题,javascript跨域问题解决
    |
    11月前
    |
    缓存 JavaScript 前端开发
    JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
    本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
    391 5

    热门文章

    最新文章

  • 1
    前端工程化演进之路:从手工作坊到AI驱动的智能化开发
  • 2
    Vue 3 + TypeScript 现代前端开发最佳实践(2025版指南)
  • 3
    实现“永久登录”:针对蜻蜓Q系统的用户体验优化方案(前端uni-app+后端Laravel详解)-优雅草卓伊凡
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数