首页 > 编程语言 >JavaScript闭包

JavaScript闭包

时间:2024-06-15 09:30:48浏览次数:12  
标签:闭包 function 函数 myCounter JavaScript count fn

  • 闭包:内层函数+外层函数的变量,能够访问记住其外部函数作用域中的变量,即使外部函数已经执行完毕,这是因为闭包函数捕获了外部函数的执行环境
  • 弊端:可能导致内存泄漏
  • 应用于:
    1.数据私有化和封装:闭包可以用来创建私有变量
    2.函数工厂:闭包可以用来生成定制的函数,比如记忆函数,柯里化函数
    3.回调函数:闭包可以用来在回调函数中访问外部函数的变量
    4.循环中的回调函数:在循环中使用闭包可以解决变量作用域的问题

1.简单写法

function outer() {
     let a = 10;
     function fn() {
         console.log(a);
//输出结果:10
      }
      fn()
}
outer()

2.常见的闭包形式,外部函数可以访问使用函数内部的变量

function outers() {
    let a = 10;
    function fn() {
        console.log(a);
//输出结果:10
     }
     return fn
}
// outers()===fn===function fn(){}
const fun = outers()
// const fun=function fn(){}
fun()//调用函数,外面要使用a=10

3.数据私有化和封装

function createCounter() {
    let count = 0;
//定义了一个函数createCounter()返回了一个对象,对象里有三种方法,每个方法都能操作外部的count
    return {
         increment: function () {
             count++
          },
          decrement: function () {
              count--
          },
          getCount: function () {
              return count
          }
     }
}
const myCounter = createCounter();
myCounter.increment();
myCounter.increment();
//调用 myCounter 对象上的 increment 方法两次,使 count 变量的值增加 2
 console.log(myCounter.getCount())
//输出结果:2

4.在循环中回调函数

for (let i = 0; i < 5; i++) {
     setTimeout(function () {
          console.log(i);
//输出结果:0 1 2 3 4
      }, i * 1000)
}
//setTimeout()回调函数是通过闭包访问的,每次循环都会创建一个新的块级作用域,所以每个回调函数都能访问到正确的i值

标签:闭包,function,函数,myCounter,JavaScript,count,fn
From: https://blog.csdn.net/m0_69666992/article/details/139694087

相关文章

  • JavaScript内置API
    js的内置api:js语言本身提供的一组预定义的对象、方法和属性,开发者可以直接使用它们来实现各种功能优点:1.提高开发效率2.增加代码可读性和可维护性3.跨平台兼容4.性能优化5.社区支持6.标准化和规范化1.DOMAPI提供了操作网页HTML元素的方法和属性<divid="myEl......
  • JavaScript的终端输入输出
    Inquirer.js是一个基于Node.js的命令行用户界面交互库,它允许你快速构建交互式的命令行应用程序。以下是一些Inquirer的常用方法和使用案例:prompt()-这是Inquirer的核心方法,用于创建一个或多个提示。constinquirer=require('inquirer');inquirer.prompt([{......
  • JavaScript打包可执行文件
    pkg[选项]选项:-h,--help输出使用信息-v,--version输出pkg版本-t,--targets逗号分隔的目标列表(参见示例)-c,--configpackage.json或任何具有顶级配置的json文件--options将v8选项拷贝到可执行文件中,以便与它们一起运行......
  • JavaScript的运算符(算术、比较、赋值、逻辑、条件)
    天行健,君子以自强不息;地势坤,君子以厚德载物。每个人都有惰性,但不断学习是好好生活的根本,共勉!文章均为学习整理笔记,分享记录为主,如有错误请指正,共同学习进步。文章目录运算符1.算术运算符1.1示例代码1.2打印结果2.比较运算符2.1示例代码2.2打印结果3.赋值......
  • ArcGIS JSAPI 高级教程 - ArcGIS Maps SDK for JavaScript - 添加自定义(GLSL)数据
    ArcGISJSAPI高级教程-ArcGISMapsSDKforJavaScript-添加自定义(GLSL)数据核心代码完整代码在线示例ArcGISMapsSDKforJavaScript从4.29开始增加RenderNode类,可以添加数据以及操作FBO(ManagedFBO);通过操作FBO,可以通过后处理实现很多效果,官方提供了几......
  • javascript - 文件上传
    最简单的文件上传接口@ControllerpublicclassExcelCtrl{@ResponseBody@RequestMapping(value="upload",method=RequestMethod.POST)publicResultimportExcel(@RequestParamMultipartFilefile,HttpServletResponseresponse)throwsIOExceptio......
  • javascript - 面向对象
    要是直接百度,如何在javascript中创建一个对象,你能找到一堆这样的文章:《js创建对象的n种方式》、《闭包的n种写法》……咱们不参加考试,不要记那么多,整那么多写法,代码还不好维护。就例举几个,在实际项目开发过程中,比较好的代码写法。兼容语法1如果想兼容旧的浏览器,可以采......
  • 需求虽小但是问题很多,浅谈JavaScript导出excel文件
    最近我在进行一些前端小开发,遇到了一个小需求:我想要将数据导出到Excel文件,并希望能够封装成一个函数来实现。这个函数需要接收一个二维数组作为参数,数组的第一行是表头。在导出的过程中,要能够确保避免出现中文乱码的情况。另外,考虑到数组中可能包含回车、逗号、换行符等......
  • JavaScript 编程语言【数据类型】映射|集合|WeakMap and WeakSet
    文章目录MapandSet(映射和集合)MapMap迭代Object.entries:从对象创建Map]Object.fromEntries:从Map创建对象SetSet迭代(iteration)总结✅任务过滤数组中的唯一元素过滤字谜(anagrams)迭代键WeakMapandWeakSet(弱映射和弱集合)WeakMap使用案例:额外的数据使用案例:缓存Weak......
  • 一起来学javascript-axios
       <!--//AJAX的封装插件——Axios。  //什么是Axios  //Axios是一个基于Promise的HTTP库,可以用于浏览器和Node.js,支持VanillaJS、Angular、React、Vue等框架。  //简单的理解就是对Ajax的封装,且具有易用、简洁、高效等特点。  ......