前端基础知识库JavaScript闭包

简介: 在JavaScript中,闭包对于JavaScript的意义无异于指针在c++中的意义。理解闭包是我们掌握JavaScript这门语言的基础能力,而对闭包的掌握程度就可以看出来你对JavaScript这门语言的深入程度,网上关于闭包的文章也不少但多数让人看过之后一头雾水,也许是自己理解能力较差。所以我还下定决心以提问的方式来理解何谓闭包,希望能给与我有相同境遇的博友一点帮助。

前言


在JavaScript中,闭包对于JavaScript的意义无异于指针在c++中的意义。理解闭包是我们掌握JavaScript这门语言的基础能力,而对闭包的掌握程度就可以看出来你对JavaScript这门语言的深入程度,网上关于闭包的文章也不少但多数让人看过之后一头雾水,也许是自己理解能力较差。所以我还下定决心以提问的方式来理解何谓闭包,希望能给与我有相同境遇的博友一点帮助。

闭包是什么

  1. 基本概念(一句话来表述:当B执行时,如果访问了A中变量对象中的值,那么闭包就会产生)
  • 闭包是指有权访问另一个函数作用域中的变量函数,即B函数为闭包函数。
  1. 特征:
  • 函数嵌套函数。
  • 函数内部可以引用外部的参数和变量。
  • 参数和变量不会被垃圾回收机制回收。

产生闭包现象的原因

  1. 直接原因:作用域和作用域链的特性
  2. 根本原因:JavaScript中变量的存储方式,JavaScript中变量在内存中存储方式有两种堆和栈。

注:这两点内容较多后面会专门抽出个章节来分析,敬请期待了 在

关于闭包的疑问

1. 为什么函数内部可以引用外部的参数和变量?

  • javascript中作用域链决定的变量的引用。(作用域链是由一系列变量对象组成,我们可以在这个单向通道中,查询变量对象中的标识符,这样就可以访问到上一层作用域中的变量了。)

2. 为什么参数和变量不会被垃圾回收机制回收?

  • 在JavaScript的作用域的规则是根据标识符名称进行变量查找。
  • 函数在调用激活时,会开始创建对应的执行上下文,在执行上下文生成的过程中将确定变量调用的作用域链。
  • 正常来说函数执行完后,其对应使用的内存会被JavaScript的垃圾回收机制自动回收(如何回收不在此解释,简单来说就是变量不在被引用则会被自动回收),但是闭包不会如此请看如下代码。
var a = 20;
function clour(c) {
    var b = a + c;
    function innerTest() {
        return b + c;
    }
    return innerTest();
}
var result =clour();//全局变量result不会被回收,并且innerTest被其引用也不会被回收

以上就是为何闭包是能保存变量不被回收。因为闭包内部的变量被一直引用着,JavaScript的垃圾回收机制决定了这种情况不会被回收的。

  1. 闭包主要解决了什么问题?
  • 对于闭包解决的问题其实很好理解,我们来对比下普通函数和闭包函数的区别就行如下:
  • 直接定义全局变量:可以重用、但是会造成全局污染而且容易被篡改
  • 直接定义局部变量:仅函数内使用不会造成全局污染也不会被篡改、不可以重用
  • 闭包函数中的变量:可以重用且不会造成全局污染 从上面可以看出直接定义全局变量和直接定义的局部变量的优缺点刚好是相对的。闭包的出现正好结合了全局变量和局部变量的优点
  1. 为什么在项目开发中尽量少使用闭包呢?

虽然闭包的使用可以规避直接定义全局变量和直接定义局部变量的问题,但是他也带来了新的问题,就是JavaScript的垃圾回收机制不会自动回收他也就是说定义的闭包函数要比正常定义的变量占有更多的内存,也就是我们常说的内存泄漏,所以要慎用。

项目中闭包常见的运用

  1. 最常见的应用-模块化
;(function(global, factory) {
    factory(global);
}(typeof window !== "undefined" ? window : this, function(window, noGlobal) {
    var jQuery = function( selector, context ) {
        return new jQuery.fn.init( selector, context );
    };
    jQuery.fn = jQuery.prototype = {};
    //......
    if ( typeof noGlobal === strundefined ) {
        window.jQuery = window.$ = jQuery;
    }
    return jQuery;
})); 

看到这段代码大家是不是觉的很熟悉,相信只要是前端都用过他jquery,但是有几人仔细研究过jquery的源码呢(反正我没有=-=)。细节我们就不多说了,这种整体架构我们瞅瞅就晓得用了闭包。这也是前端模块化非常成功的一个实例,虽然现在已经渐渐退出前端界,但是现在比较火的vue(reactjs源码没看过不确定是否也使用了这种结构)中,模块化很常见。

  1. 最常见的应用-定时器
setTimeout(function(){
    console.log('this is time out')
},1000)
  1. 最常见的应用-柯里化传送门
// 正常函数
function normal(a, b) {
    return x + y
}
// 柯里化函数
function curry(x) {
    return function (y) {
        return x + y
    }
}
normal(2, 2)           // 4
curry(21)(2)   // 4
//函数可以作为参数进行传递,并且将函数作为返回值return出去。
  1. 单例模式
SingleDemo.getInstance = (function() {
    // 定义变量instance,用来存储实例
    let instance = null
    return function() {
        // 判断变量是否为null
        if(!instance) {
            // 如果为null则new出唯一实例
            instance = new SingleDemo()
        }
        //返回实例
        return instance
    }
})()

总结


在javascript语言世界中有许多特性需要我们自己去理解,别人告诉你的是他们站在自己的角度思考得出的结论,这点我们只能作为参考来看,这也是我为何要写这篇文章,不只是为了给别人分享下自己对JavaScript闭包的理解也是自己对闭包这块的一个总结吧,如有不正之处请文明指正。

注:本文参考如下文档:

这几篇关于闭包的文章值得一读。


相关文章
|
2天前
|
数据可视化 前端开发 JavaScript
前端框架与库-D3.js数据可视化基础
【7月更文挑战第21天】D3.js是Web开发中创建动态、交互图表的利器,适用于从基础条形图到复杂地理热力图的广泛需求。核心概念涉及数据绑定至DOM,支持动态更新。初学者常遇难题包括不当数据绑定、选择器误用、过渡动画过量及坐标轴配置失误。避免策略需善用`.data()`, `.enter().append()`, `.exit().remove()`管理数据,熟知选择器差异,适度应用`.transition()`, 并精准设定坐标轴。示例条形图代码展示了数据绑定至`<rect>`元素的过程,奠定基础,助你进阶复杂项目。
|
6天前
|
Web App开发 存储 JavaScript
前端如何学习Node.js及Node.js的主要用途
【7月更文挑战第16天】 学习Node.js对前端开发者至关重要,涉及理解其基于V8的运行时环境、JavaScript基础、安装与验证、核心模块(如fs、http、path)及npm管理。实践项目,如用Express建服务器,参与开源,深入学习异步编程和事件循环。Node.js用于服务器开发、构建工具、本地开发服务器和实时应用,提升全栈能力。借助官方文档和各种资源加速学习。
15 4
|
9天前
|
缓存 JavaScript 前端开发
前端框架与库 - Vue.js基础:模板语法、数据绑定
【7月更文挑战第14天】Vue.js 是渐进式框架,以简洁API和高效数据绑定知名。本文聚焦模板语法与数据绑定,解释常见问题和易错点,助力初学者避坑。模板语法中,{{ expression }} 用于渲染值,v-bind/: 用于动态绑定属性。数据绑定涉及文本、属性和事件,注意v-model适用于表单元素,计算属性有缓存。理解正确用法,借助文档和IDE,可提升开发质量和效率。善用Vue.js,打造响应式UI。
|
8天前
|
JavaScript 前端开发 API
前端框架与库 - Vue.js 组件与路由
【7月更文挑战第15天】Vue.js 框架以简洁API和高效DOM更新著名,组件和路由是构建应用的关键。组件是自包含的实例,常见问题包括命名冲突、作用域混淆和状态管理。要避免这些问题,可使用命名空间、明确数据绑定和事件,以及采用Vuex管理状态。Vue Router提供声明式路由,常见挑战包括路由守卫、动态路由参数和懒加载配置。正确使用路由守卫、处理动态参数和实现代码分割能优化路由管理。提供的代码示例展示了基本组件和路由配置。
|
18天前
|
前端开发 NoSQL 数据库
部署常用的流程,可以用后端,连接宝塔,将IP地址修改好,本地只要连接好了,在本地上前后端跑起来,前端能够跑起来,改好了config.js资料,后端修改好数据库和连接redis,本地上跑成功了,再改
部署常用的流程,可以用后端,连接宝塔,将IP地址修改好,本地只要连接好了,在本地上前后端跑起来,前端能够跑起来,改好了config.js资料,后端修改好数据库和连接redis,本地上跑成功了,再改
|
18天前
|
前端开发 NoSQL JavaScript
若依修改---重新部署项目注意事项,新文件初始化需要修改的地方,打包后的文件很难进行修改,如果想要不断修改项目,注意保存原项目,才可以不断修改,前端:在Vue.config.js文件中修改target
若依修改---重新部署项目注意事项,新文件初始化需要修改的地方,打包后的文件很难进行修改,如果想要不断修改项目,注意保存原项目,才可以不断修改,前端:在Vue.config.js文件中修改target
|
18天前
|
前端开发 JavaScript Linux
若依修改之后,无法访问前端项目如何解决,只能访问后端的接口,我的接口8083,端不显示咋解决?在vue.config.js文件中的映射路径要跟后端匹配,到软件商店里找到Ngnix配置代理,设80不用加
若依修改之后,无法访问前端项目如何解决,只能访问后端的接口,我的接口8083,端不显示咋解决?在vue.config.js文件中的映射路径要跟后端匹配,到软件商店里找到Ngnix配置代理,设80不用加
|
19天前
|
前端开发 JavaScript
js 打开资源管理器(经典范例:纯前端选择并预览图片)
js 打开资源管理器(经典范例:纯前端选择并预览图片)
30 0
|
20天前
|
存储 缓存 JavaScript
js 【详解】闭包
js 【详解】闭包
17 0
|
21天前
|
前端开发 JavaScript API
只会用插件可不行,这些前端动画技术同样值得收藏-JavaScript篇(下)
只会用插件可不行,这些前端动画技术同样值得收藏-JavaScript篇(下)
15 0