js闭包实例汇总

yizhihongxing

JS闭包实例汇总

在 JavaScript 中,函数是一等公民,它们可以被传递、被赋值、被嵌套定义等等。在函数内定义的函数,被称为闭包(Closure)。闭包可以访问函数外部的变量,而且在函数执行完并返回时,可以保留这些变量的值。

本文将为大家汇总几个 JavaScript 闭包的实例,方便大家加深对闭包的理解。

示例一:计数器

我们可以通过闭包来创建一个计数器,实现每次调用函数计数器加1的效果。代码如下:

function counter() {
  let count = 0;
  return function() {
    count++;
    console.log(count);
  };
}

const count1 = counter();
const count2 = counter();

count1();
count1();
// 输出:1, 2

count2();
// 输出:1

代码中的 counter 函数返回了一个内部定义的匿名函数,这个匿名函数引用了 counter 函数中的 count 变量。每次调用 counter 函数,都会创建一个新的闭包,因此 count 变量可以被独立地存储在不同闭包中。所以 count1count2 的调用是互不影响的。

示例二:模拟私有变量

在 JavaScript 中,并没有类似 Java 或 C++ 中的私有变量的概念,但是,通过闭包来实现封装变量的访问权限,可以达到类似的效果。代码如下:

function person(name) {
  let _age = 16;

  return {
    getName() {
      return name;
    },
    getAge() {
      return _age;
    },
    setAge(age) {
      if (age > 0 && age < 150) {
        _age = age;
      }
    },
  };
}

const xiaoming = person('小明');
console.log(xiaoming.getName()); // 输出:小明
console.log(xiaoming.getAge()); // 输出:16

xiaoming.setAge(18);
console.log(xiaoming.getAge()); // 输出:18

person 函数中定义了一个私有变量 _age,并通过返回的匿名函数暴露了两个公共方法 getAgesetAge,这两个方法暴露出来的 _age 变量,即可达到封装变量的效果。

结语

以上是两个实例,可以看到,闭包是 JavaScript 中十分重要的一个概念,通过闭包,可以实现很多有意思的功能,比如模拟私有变量,还可以实现一些高级的设计模式,比如单例模式、工厂模式等等。希望本文能够对大家了解闭包有所帮助。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:js闭包实例汇总 - Python技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • JavaScript性能优化之小知识总结

    JavaScript性能优化之小知识总结 JavaScript作为一门脚本语言,常常用来进行Web开发,然而JavaScript代码性能比其他语言的代码性能低,经常会造成网页的卡顿、响应速度慢等问题。为了避免这些问题,下面是一些关于JavaScript性能优化的小知识总结。 1. 减少对DOM的访问 频繁的对DOM进行读写操作会大大降低网站的性能,因此尽量避…

    JavaScript 2023年5月19日
    00
  • 毕业论文-大型的WEB应用程序开发

    毕业论文-大型WEB应用程序开发攻略 本文将详细介绍如何完成毕业论文中的大型WEB应用程序开发任务。涉及的内容包括:项目规划、技术栈选择、前端设计、后端设计、数据存储、测试和部署等方面。 项目规划 明确项目目标和需求:对于大型WEB应用程序,一般需要设计详细的功能需求和非功能需求,例如性能、可扩展性、数据安全等。 制定项目计划:在项目规划阶段,需要编制具体的…

    JavaScript 2023年5月19日
    00
  • Python 功能和特点(新手必学)

    Python 功能和特点(新手必学) Python 是一种高级编程语言,具有简单易学、开发效率高等特点,非常适用于数据分析、机器学习、人工智能等领域。下面详细讲解 Python 的功能和特点。 功能 语法简单易学 Python 的语法非常简单,类似于英语,易于理解和记忆。以下是一个简单的 Python 程序,输出 “Hello World!”。 print(…

    JavaScript 2023年5月28日
    00
  • js中Math之random,round,ceil,floor的用法总结

    js中Math之random,round,ceil,floor的用法总结 在JavaScript(简称JS)中,Math对象是一个内置对象,它涵盖了一系列数学函数和常数。 本篇攻略主要介绍Math对象中的 random(), round(), ceil() 和 floor() 这四个常用函数的用法。 1. random() random() 函数返回一个浮点…

    JavaScript 2023年5月27日
    00
  • 一次围绕setTimeout的前端面试经验分享

    一次围绕 setTimeout 的前端面试经验分享 问题 题目:实现一个函数 delay(fn, time),该函数接收一个函数和一个时间参数,返回一个新的函数,在调用这个新函数时,会在指定的时间之后执行传入的原函数。 思路:使用 setTimeout 函数来实现该功能。 代码 function delay(fn, time) { return functi…

    JavaScript 2023年6月10日
    00
  • js判断文件是否为utf-8编码的方法

    要判断一个文件是否为UTF-8编码,可以通过检查文件的字节序标记(BOM)或通过解析文件内容来确定。下面是两种不同的方案。 方案一:通过检查BOM BOM是UTF-8文件的可选字节序标记,它在文件头部前三位表示UTF-8编码方式,它的作用是告诉文本编辑器该文件使用UTF-8编码。因此,可以先读取文件的前三个字节,判断它们是否是BOM来判断文件是否为UTF-8…

    JavaScript 2023年5月20日
    00
  • Js md5加密网页版MD5转换代码

    让我来详细讲解一下“Js md5加密网页版MD5转换代码”的完整攻略。 什么是MD5加密 MD5是一种常用的加密算法,可以将任意长度的输入(字节流)转化为固定长度的输出(通常是128位)。这种转换是一种压缩算法,很难从输出中的散列值中反推出输入数据。因此,MD5被广泛应用于计算机安全领域。在网页开发中,常用MD5加密来保证用户的密码等敏感信息的传输安全。 J…

    JavaScript 2023年5月19日
    00
  • 网页实时显示服务器时间和javscript自运行时钟

    实时显示服务器时间和JavaScript自运行时钟,是网页中经常用到的两个功能。下面我将为您介绍实现这两个功能的完整攻略。 实时显示服务器时间 实时显示服务器时间,我们需要通过向服务器发送请求来获得服务器时间,然后使用JavaScript将服务器时间实时显示在网页中。下面是实现步骤。 步骤一:通过ajax向服务器获取时间 在JavaScript中使用ajax…

    JavaScript 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部