【JS】—闭包—双例对比法学习总结

news2024/11/16 19:33:57

一、选定知识点:闭包

二、指令学习

1. 闭包MDN的定义

闭包(closure)是一个函数以及其捆绑的周边环境状态(lexical environment,词法环境)的引用的组合。换而言之,闭包让开发者可以从内部函数访问外部函数的作用域。在 JavaScript 中,闭包会随着函数的创建而被同时创建。

三、做练习题 、归纳比较、测试新题

1. 通过立即执行函数和返回函数实现闭包

let data = []
for(let i = 0; i < 3; i++) {
	data[i] = (function (i) {
		return function () {
			console.log(i)
		}
	})(i)
}
data[0]()
data[1]()
data[2]()
// 0
// 1
// 2

2. 通过返回对象,调用对象方法,返回函数递归调用外部函数实现闭包

function fun (n, o) {
    console.log(o)
    return {
        fun: function (m) {
            return fun(m,n)
        }
    }
}
let a =  fun(0)
a.fun(1)
步骤分析:
1. 传递参数 n =0 ,o 没有传递为undefined
2. 打印undefined
3. 返回一个对象给a
4. a,fun(1) , 传递参数m =1
5. 执行fun(m, n) ,当内部函数参数没有某个变量时,往外部函数查找,外部函数的参数 n =0
6. 执行fun(m,n) = fun(1, 0)
7. 打印0

归纳对比,在练习题1和练习题2中有哪些共性和差异性

1.共性

1-1 都有两个函数,一个外部函数和一个内部函数

1-2 内部函数都会调用外部函数的参数

1-3 外部函数的参数值因为内部函数一直引用,所以参数的内存地址没有被释放掉

2. 差异性

2-1 实现闭包的方式不同

①中通过立即执行函数和函数的返回值,调用返回的函数,从而实现闭包

②中通过外部函数的返回值,返回一个对象,通过调用这个对象的fun函数 的返回函数,递归调用外部函数,从而实现闭包

2-2 调用方法的次数不同

① 通过调用一次外部函数,内部函数自动执行,调用一次

② 先调用一次外部函数,再根据外部函数的返回值,手动再调用一次内部函数,调用两次

2-3 返回值不同,调用方式不同

① 返回函数是立即自动执行的

② 返回对象,对象下的方法需要手动调用

3. 通过倒计时定时器方法接收外部函数的变量,实现闭包

function fn1 () {
	for (var i =0 ; i< 4; i++) {
		var tc = setTimeout(function (i) {
			console.log('索引',i)
			console.log('定时器的返回值',tc)
		},10, i)
	}
}
fn1()
// 索引 0
// 定时器的返回值 4
// 索引 1
// 定时器的返回值 4
// 索引 2
// 定时器的返回值 4
// 索引 3
// 定时器的返回值 4

归纳对比,在练习题2和练习题3中有哪些共性和差异性

1. 共性

1-1 都有两个函数,一个外部函数和一个内部函数

1-2 内部函数都调用了外部函数的变量,变量包括外部作用域内的变量和参数

2.差异性

2-1 使用外部参数的方式不同

②中通过作用域往上找到对应的参数,然后使用

③中通过定时器,传递实参,设置形参,传递给内部函数使用

4. 通过循环定时器,接收外部函数的变量,实现闭包

function fn2 () {
	for (var i =0; i < 4; i++) {
		var tc = setInterval(function(i,tc){
			console.log('索引',i)
			clearInterval(tc)
		},10,i,tc)
		if (i=== 3) {
			setTimeout(function (tc){
				clearInterval(tc)
			},10,tc)
		}
	}
}
fn2()
// 0
// 1
// 2
// 3 一直循环

PS: 因为先走定时器,再赋值给tc,所以每次清除定时器其实清除掉是上一次的定时器,所以最后一次定时器没有清除。
通过i===3给任务队列加一个清除的定时器

归纳对比,在练习题3和练习题4中有哪些共性和差异性

1. 共性

1-1 都有两个函数,一个外部函数和一个内部函数

1-2 内部函数都调用了外部函数的变量,变量包括外部作用域内的变量和参数

1-3 内部函数都使用实参、形参、实现参数传递,使内部函数使用外部函数的变量

2. 差异性

2-1. setTimeout 是一次性定时器,可以不用清除,setInterval 是多次定时器,需要清除

2-2 setInterval 定时器 属于异步方法,需要使用setTimeOut 加入异步队列先后顺序清除定时器

四、总结规律

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/963404.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Cordova Android 生成的 APK 中添加代码混淆

要在 Cordova Android 生成的 APK 中添加代码混淆&#xff0c;你可以按照以下步骤进行操作&#xff1a; 1. 在项目根目录下&#xff0c;找到 platforms/android/ 目录&#xff0c;进入该目录。 2. 打开 build.gradle 文件&#xff0c;并在 android { ... } 部分添加以下代码&…

在Windows10上编译grpc工程,得到protoc.exe和grpc_cpp_plugin.exe

grpc是google于2015年发布的一款跨进程、跨语言、开源的RPC(远程过程调用)技术。使用C/S模式&#xff0c;在客户端、服务端共享一个protobuf二进制数据。在点对点通信、微服务、跨语言通信等领域应用很广&#xff0c;下面介绍grpc在windows10上编译&#xff0c;这里以编译grpc …

肖sir__xftp安装使用__004

xftp 一、定义&#xff1a;Xftp是一款功能强大的FTP传输软件&#xff0c;主要用于文件的上传和下载&#xff0c;支持SFTP和FTP协议。Xftp在Windows系统上设计&#xff0c;但也可在Linux系统上使用。本文将详细介绍Xftp的功能和使用方法 二、Xftp的功能 1.文件传输与管理&#…

递归算法学习——电话号码的字母组成,括号生成,组合

目录 一&#xff0c;电话号码的字母组合 1.题意 2.例子 3.题目接口 4.解题代码和思路 代码&#xff1a; 思路&#xff1a; 二&#xff0c;括号的生成 1.题意 2.例子 3.题目接口 四&#xff0c;解题代码和思路 1.先写代码&#xff1a; 2.思路 三&#xff0c;组合 …

udig下载、安装及汉化,生成geoserver图层样式sld文件

uDig是一款开源免费的桌面地理信息系统框架软件。uDig汉化版主要采用RCP技术构建&#xff0c;内置的多专业的水文工具&#xff0c;拥有复杂专业的分析能力&#xff0c;既可以作为独立程序运行&#xff0c;还可以作为插件使用。 uDig是一个 open source (EPL and BSD) 桌面应用程…

volatile 关键字 与 CPU cache line 的效率问题

分析&回答 Cache Line可以简单的理解为CPU Cache中的最小缓存单位。目前主流的CPU Cache的Cache Line大小都是64Bytes。假设我们有一个512字节的一级缓存&#xff0c;那么按照64B的缓存单位大小来算&#xff0c;这个一级缓存所能存放的缓存个数就是512/64 8个。具体参见下…

微信小程序地图应用总结版

1.应用场景&#xff1a;展示公司位置&#xff0c;并打开第三方app&#xff08;高德&#xff0c;腾讯&#xff09;导航到目标位置。 &#xff08;1&#xff09;展示位置地图 uniapp官网提供了相关组件&#xff0c;uniapp-map组件 具体用法&#xff1a; html结构 <map sty…

文件夹如何隐藏加密?文件夹加密隐藏软件有哪些?

文件夹加密和文件夹隐藏都是保护文件夹数据安全的方法&#xff0c;我们可以将这两者结合&#xff0c;以实现更好的保护。那么&#xff0c;文件夹如何隐藏加密呢&#xff1f; 如何隐藏加密文件夹&#xff1f; 想要隐藏加密文件夹&#xff0c;我们可以通过以下两种方式来实现&am…

【算法竞赛宝典】读文章

【算法竞赛宝典】读文章 题目描述代码展示 题目描述 代码展示 //读文章 #include <iostream> #include <string.h>using namespace std;int main() {int i, j, upp, low, dig, spa, oth;char text[3][80];upp low dig spa oth 0;for (i 0; i < 3; i) {g…

Pyecharts数据可视化(一)

目录 1.Pyecharts简介 2.Pyecharts的常用方法 3.Pyecharts绘制柱状图 3.1 绘制并列柱状图 3.2 绘制水平直方图 1.Pyecharts简介 Pyecharts是一个用于创建交互式图表的Python库。它基于Echarts&#xff0c;一个强大的JavaScript图表库&#xff0c;Pyecharts允许Python开发者…

分享几个靠谱的网络项目,空闲时间就能月收益几千!

近几年来最大的感受就是赚钱越来越难了&#xff0c;对于上班族来说固定的那份工资比较有限&#xff0c;相信很多朋友们都想开拓一些副业&#xff0c;给自己增加一些收入&#xff0c;小编今天给大家推荐几个靠谱的最新项目分享给大家。 第一个&#xff1a;文案编辑 文案编辑是…

详解vue3中ref和reactive用法和区别

vue3中ref和reactive区别 1、前言2、基本用法2.1 ref2.2 reactive 3、ref和reactive定义数组对比3.1 ref定义数组3.1 reactive定义数组 4、ref 和reactive的区别 1、前言 ref和reactive是Vue3中用来实现数据响应式的API&#xff0c;一般情况下&#xff0c;ref定义基本数据类型…

6.(Python数模)游泳接力指派问题

Python解决游泳接力指派问题 该问题也属于一个线性规划问题 源代码 import pulp # 导入 pulp 库 import numpy as np# 主程序 def main():# 问题建模&#xff1a;"""决策变量&#xff1a;x(i,j) 0, 第 i 个人不游第 j 种姿势x(i,j) 1, 第 i 个人游第 …

小疆智控CANOpen转PROFINET网关连接EA180C CANOPEN总线型伺服配置案例

1、首先新建一个工程&#xff0c;在CanOpen转Profinet网关配置软件中添加主站设备&#xff0c;如下图&#xff1b; 2、在CanOpen转Profinet网关设备点击导入EA180C CANOPEN总线型伺服 EDS 文件&#xff0c;右键添加从属设备&#xff1b; 3、设备设置站地址&#xff0c;如图&…

【LeetCode算法系列题解】第46~50题

CONTENTS LeetCode 46. 全排列&#xff08;中等&#xff09;LeetCode 47. 全排列 II&#xff08;中等&#xff09;LeetCode 48. 旋转图像&#xff08;中等&#xff09;LeetCode 49. 字母异位词分组&#xff08;中等&#xff09;LeetCode 50. Pow(x, n)&#xff08;中等&#xf…

【高阶产品策略】设计有效的AB测试

文章目录 1、A/B测试概述2、A/B测试实施过程3、A/B测试中需要注意的地方4、从一个案例中看A/B测试 1、A/B测试概述 2、A/B测试实施过程 3、A/B测试中需要注意的地方 4、从一个案例中看A/B测试

水果库存系统(SSM+Thymeleaf版)

不为失败找理由&#xff0c;只为成功找方法。所有的不甘&#xff0c;因为还心存梦想&#xff0c;所以在你放弃之前&#xff0c;好好拼一把&#xff0c;只怕心老&#xff0c;不怕路长。 文章目录 一、前言二、系统架构与需求分析1、技术栈1.1 后端1.2 前端 2、需求分析 三、设计…

python 深度学习 解决遇到的报错问题4

目录 一、DLL load failed while importing _imaging: 找不到指定的模块 二、Cartopy安装失败 三、simplejson.errors.JSONDecodeError: Expecting value: line 1 column 1 (char 0) 四、raise IndexError("single positional indexer is out-of-bounds") 五、T…

Linux系统Ubuntu以非root用户身份操作Docker的方法

本文介绍在Linux操作系统Ubuntu版本中&#xff0c;通过配置&#xff0c;实现以非root用户身份&#xff0c;进行Docker各项操作的具体方法。 在文章Linux系统Ubuntu配置Docker详细流程&#xff08;https://blog.csdn.net/zhebushibiaoshifu/article/details/132612560&#xff0…

一文1800字从0到1使用Python Flask实战构建Web应用

Python Flask是一个轻量级的Web框架&#xff0c;它简单易用、灵活性高&#xff0c;适用于构建各种规模的Web应用。本文将介绍如何使用Python Flask框架来实战构建一个简单的Web应用&#xff0c;并展示其基本功能和特性。 第一部分&#xff1a;搭建开发环境 在开始之前我们需要…