2024大二上js高级+ES6学习9.26(闭包,递归函数)

news/2024/10/4 2:50:48/

9.26.2024

1.闭包

什么是闭包:

闭包的作用:

Return 的函数作为fn的子函数,可以使用fn的局部变量num,局部变量num要等所有使用它的函数调用完毕后才销毁

2.闭包的案例

点击li会发现输出4

在 JavaScript 中,事件处理器(如 onclick)是异步的,这意味着它们不会立即执行,而是在特定的事件发生时(在这个例子中,是用户点击元素时)才会被调用。因此,尽管你在循环中为每个元素的 onclick 属性分配了函数,但这些函数并不会在循环结束之前执行。它们只是被设置为在将来某个时刻(用户点击元素时)可能被调用的函数。

以下是为什么这些函数是在循环结束后才调用的详细解释:

  1. 事件监听器的异步性质
    • onclick 属性设置的函数是一个事件监听器。它告诉浏览器在用户点击元素时执行特定的函数。这个函数的调用是异步的,因为它依赖于用户的行为。
  2. 事件循环
    • JavaScript 运行在单线程环境中,使用事件循环来处理异步操作。当循环中的函数设置完毕后,JavaScript 引擎会继续执行其他任务。只有当相应的事件(如点击)发生时,事件循环才会从消息队列中取出事件监听器函数并执行。
  3. 非阻塞行为
    • JavaScript 设计为非阻塞语言,这意味着它允许页面在执行长时间运行的脚本时仍然响应用户操作。设置事件监听器(如 onclick)不会阻塞代码的执行,因此循环可以快速完成,而事件监听器函数则在事件发生时被调用。
  4. 用户交互触发
    • onclick 函数只有在用户实际点击元素时才会执行。这是用户交互的一部分,而不是代码执行的一部分。
  5. 闭包和变量引用
    • 在循环中,每个 onclick 函数捕获了循环变量 i 的当前引用。由于这些函数是闭包,它们引用的是循环变量 i 而不是它的值的副本。因此,当这些函数最终被调用时(用户点击),它们引用的 i 变量的值是循环结束时的值。
  6. 循环结束
    • 循环结束意味着所有的 onclick 函数已经被设置好,但是还没有被调用。它们只是在等待用户的点击事件。

这就是为什么在循环中设置的 onclick 函数会在循环结束后才被调用的原因。这种行为是 JavaScript 事件驱动和异步执行模型的一部分。

闭包不一定是好的:会占用内存

案例实现原理:应用立即执行函数的立即响应包

案例一:

案例二:

案例三:出租车计费器

思考题:

3、递归函数

案例:

4.递归遍历数据:

升级:使用变量obj来接受返回的数据


http://www.ppmy.cn/news/1534225.html

相关文章

使用iTextPDF库时,设置文字为中文格式

在使用iTextPDF库时,设置文字为中文格式主要涉及选择合适的中文字体,并确保该字体能够正确渲染中文字符。由于iTextPDF的内置字体通常不支持中文,因此你需要加载一个支持中文的字体文件(如TrueType字体,.ttf文件&#…

C语言日志类库 zlog 使用指南(第四章 Syslog模式)

第四章 Syslog模式 在zlog中,有三个重要概念:分类(Category)、规则(Rule)和格式(Format)。 4.1 分类、规则和格式 分类(Category):用于指定不同…

Java | Leetcode Java题解之第446题等差数列划分II-子序列

题目&#xff1a; 题解&#xff1a; class Solution {public int numberOfArithmeticSlices(int[] nums) {int ans 0;int n nums.length;Map<Long, Integer>[] f new Map[n];for (int i 0; i < n; i) {f[i] new HashMap<Long, Integer>();}for (int i 0;…

android 系统默认apn数据库

在 Android 13 及其他版本的系统中&#xff0c;默认的 APN 数据库文件通常位于以下路径&#xff1a; /system/etc/apns-conf.xml 说明&#xff1a; apns-conf.xml 是存储默认 APN 设置的文件&#xff0c;通常包含全球不同运营商的 APN 配置。这个文件是系统文件&#xff0c…

两个圆形 一个z里面一个z外面,z里面的大,颜色不同 html

两个圆形 一个z里面一个z外面&#xff0c;z里面的大&#xff0c;颜色不同 html <!DOCTYPE html> <html> <head> <style> .outer-circle {width: 150px;height: 150px;border-radius: 50%;background-color: #ff9999; /* 外圆的颜色 */position: relat…

C++七种异常处理

在C++中,使用异常机制可以提高程序的健壮性和可维护性。异常是在程序运行时发生的一个事件,它会打断正在执行的程序的正常流程。C++异常处理机制可以使程序在出现异常时,进行异常处理,而不是退出程序。 基本的异常处理 #include <iostream> using namespace std;int …

JAVA并发编程系列(13)Future、FutureTask异步小王子

美团本地生活面试&#xff1a;模拟外卖订单处理&#xff0c;客户支付提交订单后&#xff0c;查询订单详情&#xff0c;后台需要查询店铺备餐进度、以及外卖员目前位置信息后再返回。 时间好快&#xff0c;一转眼不到一个月时间&#xff0c;已经完成分享synchronized、volatile、…

MongoDB 的基本使用

目录 数据库的创建和删除 创建数据库 查看数据库 删除数据库 集合的创建和删除 显示创建 查看 删除集合 隐式创建 文档的插入和查询 单个文档的插入 insertOne insertMany 查询 嵌入式文档 查询数组 查询数组元素 为数组元素指定多个条件 通过对数组元素使…