我的编程空间,编程开发者的网络收藏夹
学习永远不晚

闭包在js中是什么意思

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

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

闭包在js中是什么意思

这篇文章跟大家分析一下“闭包在js中是什么意思”。内容详细易懂,对“闭包在js中是什么意思”感兴趣的朋友可以跟着小编的思路慢慢深入来阅读一下,希望阅读后能够对大家有所帮助。下面跟着小编一起深入学习“闭包在js中是什么意思”的知识吧。

    什么是闭包

    闭包是什么,为什么说在js中处处充满了闭包。

    闭包就是函数有权访问另一个函数作用域中的变量,此函数和被引用的变量一起构成了闭包

    文字描述文绉绉的难以理解,看一下代码就能够一目了然了

    function test() {    var a = 1    var b = function() {        console.log(a)    }        return b}

    在上面的代码例子中,变量 a 处于函数 test 的作用域中,但是函数 b 中可以对变量 a 进行访问。
    套用闭包的概念,也就是函数 b 有权访问函数 test 作用域中的变量 a,此时函数 b 与变量 a 就形成了一个闭包。

    看了上面的例子,大家是否恍然大悟,这不就是我们在代码中经常写的吗。所以说js中处处充满了闭包。

    如何观察闭包

    如果一开始我们对于闭包的认识还不是很深刻,我们怎么知道在代码中写出了一个闭包呢?一招教你找出闭包

    function test() {    let a = 1    return function test1() {        debugger        console.log(a)    }}test()()

    如上的一段代码,在执行到 debugger 关键字的时候,我们可以打开浏览器的开发者调制工具,此时我们可以从调用栈中看到 Closure 的字样,这就是代表我们写出了一个闭包啦

    闭包在js中是什么意思

    闭包的错误认识

    说完了闭包的概念,再来说说可能大家会对闭包产生的一些错误认识。

    1.闭包的产生需要使用 return 暴露出去

    首先从闭包的概念上来看就没有说到闭包需要暴露到函数外才叫闭包,而是只要引用了不属于当前函数作用域中的变量就已经产生闭包了。

    为什么会有这样的错误认识,是因为我们使用闭包引用了外部作用域中的变量,一般是为了将这个变量或者是这个函数暴露出去,让我们在外部也可以访问到这个变量或者函数,也就是说将闭包暴露到函数外部只是我们的业务需求,而不是闭包的必要条件。

    闭包在js中是什么意思

    2.闭包会导致内存泄漏

    首先我们要知道为什么闭包会导致内存泄漏,是因为我们将闭包暴露到函数外部的时候,闭包内部仍然引用着其外部作用域中的变量,导致外部作用域中的变量无法被垃圾回收机制回收,如果循环引用闭包的话就容易造成内存泄漏的现象。但这是由于我们在使用闭包过程中所引起的,而不是闭包本身的性质所决定的,因此说闭包一定会导致内存泄漏是不严谨的。

    (另外在 IE9 之后也对浏览器的垃圾回收机制做了优化,现在已经不容易导致内存泄露了)

    闭包在js中是什么意思

    闭包导致的问题

    作为 js 中八大陷阱之一的循环陷阱,就是由于闭包引起的

    for (var i = 0; i < 4; i++) {    setTimeout(() => {        console.log(i)    }, 1000)}  // 4, 4, 4, 4

    执行以上代码,会发现 1s 之后打印了 4个 4,为什么不是打印 0, 1, 2, 3,就是因为 setTimeout 中的回调函数是一个闭包,引用了外部作用域中的 i 变量,但是 i 只有一个,并不会在每个回调中生成新的 i,因此在 1s 后打印的时候访问的是同一个作用域中的 i 变量,因此打印的结果就是 4个 4

    如何解决以上问题,有两个方法:

    • 一种是使用 es6 的 let 语法生成块级作用域,这样每个块级作用域中的 i 变量就不是指向同一个 i 变量,不会对彼此产生影响

    for (let i = 0; i < 4; i++) {    setTimeout(() => {        console.log(i)    }, 1000)}  // 0, 1, 2, 3
    • 一种是使用立即执行函数,每个立即执行函数中的变量 i 都是当前外部变量 i 的一个快照

    for (let i = 0; i < 4; i++) {    (function(i) {        setTimeout(() => {            console.log(i)        }, 1000)    })(i)}  // 0, 1, 2, 3

    闭包的使用场景

    说了这么多闭包的性质,甚至闭包还会引发循环陷阱这么重大的问题,那么闭包到底有什么用?面试官问到的时候总不能说 js 处处都是闭包,所以 js 到处都是闭包的使用场景吧。那么我们就来说说闭包的几个经典使用场景

    1. 单例模式

    var CreateSingleton = (function() {    var instance = null    var CreateSingleton = function() {        if (instance) return instance        return instance = this    }    return CreateSingleton})()

    单例模式是设计模式的一种,目的是为了保证全局中只有一个实例对象,上述代码利用 instance 创建一个闭包。单例模式在组件库保证全局中只有一个弹窗组件尤其好用。

    2. 函数柯里化

    柯里化是将一个多参数的函数转化成几个单参数的函数嵌套的形式,例如: function test(a, b, c) => function test(a)(b)(c)

    function currying(fn, args) {  var _this = this  var len = fn.length  var args = args || []  return function() {    var _args = Array.prototype.slice.call(arguments)    Array.prototype.push.apply(args, _args)        if(_args.length < len) {      return currying.call(this, fn, _args)    }    return fn.apply(this, _args)  }}

    3. 与立即执行函数配合使用完成类库的封装

    闭包往往配合着立即执行函数来一起使用,能够发挥出强大的效果。因此,往往很多人容易被误导,认为闭包与立即执行函数之间有什么关系,甚至认为立即执行函数就是闭包。但这种认识其实是错误的,立即执行函数与闭包之间没有任何关系。

    在 jQuery 盛行的年代,各类规范百花争艳,其中 umd 规范能够兼容多种环境,主要在于其 umd 头部结构的实现

    (function( global, factory ) {    "use strict";    if ( typeof module === "object" && typeof module.exports === "object" ) {        module.exports = global.document ?        factory( global, true ) :function( w ) {            if ( !w.document ) {throw new Error( "jQuery requires a window with a document" );            }            return factory( w );};    } else {factory( global );    }})( typeof window !== "undefined" ? window : this, function( window, noGlobal ) {})

    以上这种代码的写法使用过 jQuery 开发的人应该非常熟悉吧。

    4. 保存私有变量

    在实际开发过程中,我们有时候需要对于计算结果进行缓存,或者是保存私有变量而不被外部访问到,就可以使用闭包来实现。

    另外,在目前流行的两大前端框架 Vue 和 React 中其实也大量用到了闭包进行相关功能的实现,具体大家可以自己翻翻源码啦~

    javascript是一种什么语言

    javascript是一种动态类型、弱类型的语言,基于对象和事件驱动并具有相对安全性并广泛用于客户端网页开发的脚本语言,同时也是一种广泛用于客户端Web开发的脚本语言。它主要用来给HTML网页添加动态功能,现在JavaScript也可被用于网络服务器,如Node.js。

    关于闭包在js中是什么意思就分享到这里啦,希望上述内容能够让大家有所提升。如果想要学习更多知识,请大家多多留意小编的更新。谢谢大家关注一下编程网网站!

    免责声明:

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

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

    闭包在js中是什么意思

    下载Word文档到电脑,方便收藏和打印~

    下载Word文档

    猜你喜欢

    闭包在js中是什么意思

    这篇文章跟大家分析一下“闭包在js中是什么意思”。内容详细易懂,对“闭包在js中是什么意思”感兴趣的朋友可以跟着小编的思路慢慢深入来阅读一下,希望阅读后能够对大家有所帮助。下面跟着小编一起深入学习“闭包在js中是什么意思”的知识吧。什么是闭
    2023-06-29

    JavaScript闭包是什么意思

    本篇内容介绍了“JavaScript闭包是什么意思”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!闭包是纯函数式编程语言的传统特性之一。通过将
    2023-06-20

    js是什么意思

    JS是JavaScript的缩写,是一种广泛用于网页开发的脚本语言。它可以通过在网页上嵌入JavaScript代码来实现动态交互和实时更新页面内容。JS可以用于验证表单、创建动画效果、处理用户输入、与服务器进行通信等。它是一种高级、解释性的
    2023-08-30

    js中bom指的是什么意思

    这篇文章给大家分享的是有关js中bom指的是什么意思的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。JavaScript是什么JS是JavaScript的简称,它是一种直译式的脚本语言,其解释器被称为JavaScr
    2023-06-14

    js中test指的是什么意思

    这篇文章将为大家详细讲解有关js中test指的是什么意思,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。javascript是一种什么语言javascript是一种动态类型、弱类型的语言,基于对象和事件驱动
    2023-06-14

    js中caller指的是什么意思

    这篇文章主要介绍了js中caller指的是什么意思,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。1、说明caller是函数对象的一个属性,它指向调用当前函数的函数,例如A调用
    2023-06-15

    在c++中==是什么意思

    在c++中,==运算符表示相等比较:用于比较两个操作数的值返回一个布尔值,操作数相等则为true,不相等则为false可用于比较不同类型的操作数,包括基本类型、对象、指针和引用比较的是操作数的值,而不是它们的标识在 C++ 中 == 的含义
    在c++中==是什么意思
    2024-05-01

    在php中-= 是什么意思

    在php中-=符号表示减运算符,该运算符的语法如“x -= y”,该表达式就等同于“x = x - y” ,其中“=”符号就是PHP中基本的赋值运算符。
    2020-09-14

    class在c++中是什么意思

    在c++中,class关键字定义一个类,表示对象的模板。一个类包括数据成员(属性)、成员函数(方法)、构造函数(创建对象时调用)和析构函数(销毁对象时调用)。要使用类,需要创建对象,然后通过对象访问类的成员。class在C++中的含义在C
    class在c++中是什么意思
    2024-05-09

    在css中padding是什么意思

    在 css 中,padding 是用于在元素周围添加空白区域的属性,用于增加元素之间的空间、创建内边距、对齐元素和创建视觉层次。在 CSS 中,padding 是什么?在 CSS 中,padding 是用于在元素周围添加空白(透明)区域的
    在css中padding是什么意思
    2024-04-25

    namespace在c++中是什么意思

    在 c++ 中,namespace 是一种机制,用于组织和封装相关代码,主要作用为:避免符号冲突:不同 namespace 中的同名符号不会冲突。组织代码:将相关代码组织到一个 namespace 中,提高可读性和可维护性。控制访问权限:通
    namespace在c++中是什么意思
    2024-04-26

    p在css中是什么意思

    p 元素在 css 中表示段落样式,默认显示为块级元素,文本颜色为黑色,行高等于字体大小的 1.5 倍。可以通过 css 自定义 p 元素的样式,包括字体、文本颜色、对齐方式、边距和内边距等。CSS 中的 p 元素p 元素是 HTML 中
    p在css中是什么意思
    2024-04-28

    solid在css中是什么意思

    在css中,solid表示边框的绘制方式,绘制为实线,具有均匀的宽度和颜色,最常见于创建清晰可见的边框。solid在CSS中是什么意思在CSS(层叠样式表)中,solid是一个border(边框)样式值,用于指定边框的绘制方式。soli
    solid在css中是什么意思
    2024-04-28

    编程热搜

    • Python 学习之路 - Python
      一、安装Python34Windows在Python官网(https://www.python.org/downloads/)下载安装包并安装。Python的默认安装路径是:C:\Python34配置环境变量:【右键计算机】--》【属性】-
      Python 学习之路 - Python
    • chatgpt的中文全称是什么
      chatgpt的中文全称是生成型预训练变换模型。ChatGPT是什么ChatGPT是美国人工智能研究实验室OpenAI开发的一种全新聊天机器人模型,它能够通过学习和理解人类的语言来进行对话,还能根据聊天的上下文进行互动,并协助人类完成一系列
      chatgpt的中文全称是什么
    • C/C++中extern函数使用详解
    • C/C++可变参数的使用
      可变参数的使用方法远远不止以下几种,不过在C,C++中使用可变参数时要小心,在使用printf()等函数时传入的参数个数一定不能比前面的格式化字符串中的’%’符号个数少,否则会产生访问越界,运气不好的话还会导致程序崩溃
      C/C++可变参数的使用
    • css样式文件该放在哪里
    • php中数组下标必须是连续的吗
    • Python 3 教程
      Python 3 教程 Python 的 3.0 版本,常被称为 Python 3000,或简称 Py3k。相对于 Python 的早期版本,这是一个较大的升级。为了不带入过多的累赘,Python 3.0 在设计的时候没有考虑向下兼容。 Python
      Python 3 教程
    • Python pip包管理
      一、前言    在Python中, 安装第三方模块是通过 setuptools 这个工具完成的。 Python有两个封装了 setuptools的包管理工具: easy_install  和  pip , 目前官方推荐使用 pip。    
      Python pip包管理
    • ubuntu如何重新编译内核
    • 改善Java代码之慎用java动态编译

    目录