首先来思考一下下面的案例:

  1. function unclosure() {
  2. let count = 0
  3. return count++
  4. }
  5. for (let index = 0; index < 10; index++) {
  6. let result = unclosure()
  7. console.log(result)
  8. }

我在函数内实现一个很简单的计数器功能,希望在最后得到一个成功累加之后的数字。unclosure 函数是没有利用闭包写的计数器。

通过 for 的10次循环,打印 result,当我们打开浏览器运行这一段代码之后:

unclosure 函数被重复调用了10次,每次的 count 变量都不会成为下一次函数计数时使用的那个 count 变量。也就是说,每次函数重新运行的时候,此 count 变量非上一次 count 变量,所以,对于下一次函数运行时面对的 count 变量初始值为 0。那么,应该如何解决这个问题呢?

一般会想到把 count 变量提到 unclosure 函数体之外,这样做是肯定可以的。实际上,这样的操作已经是在利用闭包了。让我们改造上面的案例:

  1. let count = 0
  2. function unclosure() {
  3. return count++
  4. }

一个函数体内引用了外部的变量时,函数就会形成一个闭包。闭包形成一个持续的环境,闭包内的所有资源都将持续存在着,所以,上面的例子会成功进行累加。

如果不把变量提取到函数体外,直接就在函数里面运行也是可以的,应该如何制造一个闭包呢?

函数引用了外部的变量时,就会形成一个闭包。一句这一结论,我们真的可以在第一个案例中制造一个闭包,来解决最先出现的问题。

  1. function closure() {
  2. let count = 0
  3. console.log('closure 函数初始化了一次')
  4. return function () {
  5. return count++
  6. }
  7. }
  8. let inner = closure() // 得到一个闭包
  9. for (let index = 0; index < 10; index++) {
  10. let result = inner()
  11. console.log(result)
  12. }

closure 函数的内部嵌套了一个匿名函数(也可以嵌套有名函数)。相对于匿名函数来说,它引用了外部函数 closure 的变量 count,这就形成了一个闭包了。

在运行这段代码之前,我们需要得到 closure 函数的闭包(不要重复得到一个新的闭包,因为会初始化这个环境,回到上诉提到的问题)。最后反复执行 inner() 就可以实现累加了。

JavaScript 基础知识(二):闭包的更多相关文章

  1. 快速掌握JavaScript面试基础知识(二)

    译者按: 总结了大量JavaScript基本知识点,很有用! 原文: The Definitive JavaScript Handbook for your next developer interv ...

  2. Javascript基础知识总结一

    Javascript基础知识总结一 <!DOCTYPE html> <html> <head lang="en"> <meta chars ...

  3. JavaScript基础笔记二

    一.函数返回值1.什么是函数返回值    函数的执行结果2. 可以没有return // 没有return或者return后面为空则会返回undefined3.一个函数应该只返回一种类型的值 二.可变 ...

  4. 学习javascript基础知识系列第二节 - this用法

    通过一段代码学习javascript基础知识系列 第二节 - this用法 this是面向对象语言中的一个重要概念,在JAVA,C#等大型语言中,this固定指向运行时的当前对象.但是在javascr ...

  5. 学习javascript基础知识系列第三节 - ()()用法

    总目录:通过一段代码学习javascript基础知识系列 注意: 为了便于执行和演示,建议使用chrome浏览器,按F12,然后按Esc(或手动选择)打开console,在console进行执行和演示 ...

  6. JavaScript 基础知识 - BOM篇

    前言 本篇文章是JavaScript基础知识的BOM篇,如果前面的<JavaScript基础知识-DOM篇>看完了,现在就可以学习BOM了. 注意: 所有的案例都在这里链接: 提取密码密码 ...

  7. java 基础知识二 基本类型与运算符

    java  基础知识二 基本类型与运算符 1.标识符 定义:为类.方法.变量起的名称 由大小写字母.数字.下划线(_)和美元符号($)组成,同时不能以数字开头 2.关键字 java语言保留特殊含义或者 ...

  8. 菜鸟脱壳之脱壳的基础知识(二) ——DUMP的原理

    菜鸟脱壳之脱壳的基础知识(二)——DUMP的原理当外壳的执行完毕后,会跳到原来的程序的入口点,即Entry Point,也可以称作OEP!当一般加密强度不是很大的壳,会在壳的末尾有一个大的跨段,跳向O ...

  9. Dapper基础知识二

    在下刚毕业工作,之前实习有用到Dapper?这几天新项目想用上Dapper,在下比较菜鸟,这块只是个人对Dapper的一种总结. 2,如何使用Dapper?     首先Dapper是支持多种数据库的 ...

  10. python基础知识(二)

    python基础知识(二) 字符串格式化 ​ 格式: % 类型 ---- > ' %类型 ' %(数据) %s 字符串 ​ print(' %s is boy'%('tom')) ----> ...

随机推荐

  1. MTK 虚拟 sensor bring up (pick up) sensor1.0

    pick up bring up sensor1.0 1.pick up对比 2.SCP 1.添加驱动文件 2.添加编译环境(打开开关) 注:编译过程中如果显示内存不够 3.修改底层数据上报方式 3. ...

  2. pycharm编辑器下载与安装

    pycharm编辑器下载与安装 首先是下载地址:https://www.jetbrains.com/pycharm/download/#section=windows   首先根据自己的电脑选择系统, ...

  3. Nastran的应变方向

    问题 近日使用Nastran做一个算例,在计算频响时发现:位移场是连续的,而应变场不连续.以某一频率处应变场为例,其上表面X.Y方向应变场分布如下图.此处关闭了云图的插值,所显示的为单元的应变,因此云 ...

  4. gulp入门第一课你需要注意的

    安装 1.首先确保你已经正确安装了nodejs环境.然后以全局方式安装gulp. npm install -g gulp 2.初始化项目. npm init 3.如果想在安装的时候把gulp写进项目p ...

  5. VirtualBox虚拟机安装Ubuntu系统后,增加内存空间和处理器核心数

    对于Linux爱好者而言,初次使用虚拟机时,一般都会使用默认的设置,例如硬盘空间.内存空间等等. 而往往在熟悉之后,安装了某些必要的软件,或者熟悉了实际的开发场景后,却发现原本给虚拟机分配的物理资源是 ...

  6. Java创建TXT文件并写入 内容

    public static void main(String[] args) { String filePath = "E:/" + "1.txt"; Stri ...

  7. 上传几张.NET5之后的机器人logo

    上传几张.NET5之后的机器人logo

  8. 高仿Android网易云音乐OkHttp+Retrofit+RxJava+Glide+MVC+MVVM

    简介 这是一个使用Java(以后还会推出Kotlin版本)语言,从0开发一个Android平台,接近企业级的项目(我的云音乐),包含了基础内容,高级内容,项目封装,项目重构等知识:主要是使用系统功能, ...

  9. NC204382 中序序列

    NC204382 中序序列 题目 题目描述 给定一棵有 \(n\) 个结点的二叉树的先序遍历与后序遍历序列,求其中序遍历序列. 若某节点只有一个子结点,则此处将其看作左儿子结点 示例1 输入 5,[3 ...

  10. Linux-Day01

    Linux-Day01 课程内容 Linux简介 Linux安装 Linux常用命令 1. 前言 1.1 什么是Linux Linux是一套免费使用和自由传播的操作系统.说到操作系统,大家比较熟知的应 ...