当前位置：首页 > news >正文

后盾人JS--闭包明明白白

news 2026/5/16 0:01:18

延伸函数环境生命周期

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>function hd(){let n = 1return function sum(){let m =1return function show(){console.log(++m)}}}let a = hd()()a()a()</script>
</body>
</html>

构造函数中的作用域的使用形态

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>function Hd(){let n = 1this.sum = function(){console.log(++n)}}let a = new Hd()a.sum()a.sum()a.sum()</script>
</body>
</html>

模拟出var的伪块作用域

var没有块级作用域，但是有函数作用域

这样可以顺利打印出i：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>for(var i=1;i<=3;i++){(function(i){setTimeout(function(){console.log(i)},1000)})(i)}</script>
</body>
</html>

闭包获取价格区间

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>let arr = [1,23,4,5,6,7,8,9]function between(a,b){return function(v){return v>=a && v<=b}}console.log(arr.filter(between(3,9)))</script>
</body>
</html>

闭包动画

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>button {position: absolute}
</style><body><button message="后盾人">houdunren</button><script>let btns = document.querySelectorAll("button")btns.forEach(function (item) {item.addEventListener("click", function () {let left = 1setInterval(function () {item.style.left = left++ + "px"}, 5)})})</script>
</body></html>

只要这样就可以防抖（直接是父级环境）：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>button {position: absolute}
</style><body><button message="后盾人">houdunren</button><script>let btns = document.querySelectorAll("button")btns.forEach(function (item) {let left = 1item.addEventListener("click", function () {setInterval(function () {item.style.left = left++ + "px"}, 5)})})</script>
</body></html>

但是虽然不抖了，引来了加速的效果。。。

加一个判断条件，就只会执行一次了：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>button {position: absolute}
</style><body><button message="后盾人">houdunren</button><script>let btns = document.querySelectorAll("button")btns.forEach(function (item) {let left = 1let interval = falseitem.addEventListener("click", function () {if(!interval){interval = truesetInterval(function () {item.style.left = left++ + "px"}, 5)}})})</script>
</body></html>

闭包排序

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>let lessons = [{title:"媒体查询响应式布局",click:89,price:12},{title:"FLEX弹性盒模型",click:45,price:120},{title:"GRID栅格系统",click:19,price:67},{title:"盒子模型详解",click:29,price:52}]function order(field){return function(a,b){return a[field] > b[field] ? 1 : -1}}let hd = lessons.sort(order("price"))console.table(hd)</script>
</body>
</html>

垃圾回收机制

当闭包不再使用时，手动解除对闭包函数和相关变量的引用，让垃圾回收机制能够回收这些内存。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div desc="houdunren">在线学习</div><div desc="hdcms">开源产品</div><script>let divs = document.querySelectorAll('div')divs.forEach(function(item){item.addEventListener("click",function(){console.log(item)})item = null})</script>
</body>
</html>

this遗留问题

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>let hd = {user:"后盾人",get: function(){let This = thisreturn function(){return This.user}}}let a = hd.get()console.log(a())</script>
</body>
</html>

也可以使用箭头函数：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>let hd = {user:"后盾人",get: function(){let This = thisreturn ()=>{return this.user}}}let a = hd.get()console.log(a())</script>
</body>
</html>

后盾人JS--闭包明明白白

延伸函数环境生命周期 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title> <…...

编程日记 2025/1/31 17:54:54

redis的分片集群模式

redis的分片集群模式 1 主从哨兵集群的问题和分片集群特点主从哨兵集群可应对高并发写和高可用性，但是还有2个问题没有解决： （1）海量数据存储 （2）高并发写的问题使用分片集群可解决，分片集群…...

编程日记 2025/1/31 17:52:49

Kiwi 安卓浏览器本月停止维护，扩展功能迁移至 Edge Canary

IT之家 1 月 25 日消息，科技媒体 Android Authority 今天（1 月 25 日）发布博文，报道称 Kiwi 安卓浏览器将于本月停止维护，相关扩展支持功能已整合到微软 Edge Canary 浏览器中。开发者 Arnaud42 表示 Kiwi 安卓浏览器…...

编程日记 2025/1/31 17:42:34

我的AI工具箱Tauri+Django内容生产介绍和使用

在现代内容生产环境中，高效、自动化的工具能够显著提升生产力，降低人工成本。Tauri 与 Django 结合打造的工作箱，集成了强大的音频处理、视频剪辑、内容下载以及 AI 文章撰写等模块，帮助用户在多媒体内容生产的各个环节实现高效…...

编程日记 2025/1/31 17:33:22

四.4 Redis 五大数据类型/结构的详细说明/详细使用（ zset 有序集合数据类型详解和使用）

四.4 Redis 五大数据类型/结构的详细说明/详细使用（ zset 有序集合数据类型详解和使用） 文章目录四.4 Redis 五大数据类型/结构的详细说明/详细使用（ zset 有序集合数据类型详解和使用）1. 有序集合 Zset(sorted set)2. zset 有序…...

编程日记 2025/1/31 17:28:04

Java---猜数字游戏

本篇文章所实现的是Java经典的猜数字游戏 , 运用简单代码来实现基本功能目录一.题目要求二.游戏准备三.代码实现一.题目要求随机生成一个1-100之间的整数(可以自己设置区间），提示用户猜测，猜大提示"猜大了"，…...

编程日记 2025/1/31 17:21:51

网站快速收录：利用RSS订阅提升效率

本文转自：百万收录网原文链接：https://www.baiwanshoulu.com/27.html 利用RSS订阅可以显著提升网站内容的更新和收录效率，以下是一些具体的方法和策略： 一、RSS订阅的基本原理 RSS（ReallySimpleSyndication或RichS…...

编程日记 2025/1/31 17:18:46

vue3第三部分--组件通信

title: 组件通信 date: 2025-01-28 12:00:00 tags:- 前端 categories:- 前端组件通信目标：重点学习父子组件与兄弟组件的通信方式，以及插槽的作用与使用方式父子组件通信主要是通过props和自定义事件来实现 1.1 父 -> 子通信（通过 …...

编程日记 2025/1/31 17:13:39

DeepSeek R1-Zero vs. R1：强化学习推理的技术突破与应用前景

📌 引言：AI 推理的新时代近年来，大语言模型（LLM） 的规模化扩展成为 AI 研究的主流方向。然而，LLM 的扩展是否真的能推动通用人工智能（AGI） 的实现？DeepSeek 推出的 R1…...

编程日记 2025/1/31 17:06:27

matlab提取滚动轴承故障特征

为了精准、稳定地提取滚动轴承故障特征，提出了基于变分模态分解和奇异值分解的特征提取方法，采用标准模糊C均值聚类(fuzzy C means clustering, FCM)进行故障识别。对同一负荷下的已知故障信号进行变分模态分解，利用奇异值分解技术进一步提…...

编程日记 2025/1/31 17:05:08

数据结构与算法学习笔记----容斥原理

数据结构与算法学习笔记----容斥原理 author: 明月清了个风 first publish time: 2025.1.30 ps⭐️介绍了容斥原理的相关内容以及一道对应的应用例题。 Acwing 890. 能被整除的数 [原题链接](890. 能被整除的数 - AcWing题库) 给定一个整数 n n n和 m m m个不同的质数 p 1 …...

编程日记 2025/1/31 17:00:54

Java 知识速记：全面解析 final 关键字

Java 知识速记：全面解析 final 关键字什么是 final 关键字？ final 关键字是 Java 中的一个修饰符。它可以用于类、方法和变量，其作用是限制对这些元素的修改。究竟如何限制？我们来逐个分析。 final 在变量中的用法 1. 声明常…...

编程日记 2025/1/31 16:59:47

（笔记+作业）书生大模型实战营春节卷王班---L0G2000 Python 基础知识

学员闯关手册：https://aicarrier.feishu.cn/wiki/QtJnweAW1iFl8LkoMKGcsUS9nld 课程视频：https://www.bilibili.com/video/BV13U1VYmEUr/ 课程文档：https://github.com/InternLM/Tutorial/tree/camp4/docs/L0/Python 关卡作业：htt…...

编程日记 2025/1/31 16:56:40

9、Docker环境安装Nginx

一、拉取镜像 docker pull nginx:1.24.0二、创建映射目录作用：是将docker中nginx的相关配置信息映射到外面，方便修改配置文件 1、创建目录 # cd home/ # mkdir nginx/ # cd nginx/ # mkdir conf html log2、生成容器 docker run -p 80:80 -d --name…...

编程日记 2025/1/31 16:55:36

受击反馈HitReact、死亡效果Death Dissolve、Floating伤害值Text(末尾附客户端RPC )

受击反馈HitReact 设置角色受击标签 (GameplayTag基本了解待补充) 角色监听标签并设置移动速度创建一个受击技能，并应用GE 实现设置角色的受击蒙太奇动画实现角色受击时播放蒙太奇动画，为了保证通用性，将其设置为一个函数，并…...

编程日记 2025/1/31 16:50:26

572. 另一棵树的子树

前导题：100. 相同的树回顾一下判断两棵二叉树相同，根结点相同且左子树相同且右子树相同。于是判断如下： 根结点都为null，返回true根结点不都为null，返回false根结点都不为null，但是值不相同&#…...

编程日记 2025/1/31 16:49:23

MATLAB中textBoundary函数用法

目录语法说明示例匹配文本的边界匹配文本的结尾边界对文本的边界求反 textBoundary函数的功能是匹配文本的开头或结尾。语法 pat textBoundary pat textBoundary(type) 说明 pat textBoundary 创建与文本开头或结尾匹配的模式。textBoundary 可以使用 ~ 运算…...

编程日记 2025/1/31 16:48:21

vue3的路由配置

先找到Layout布局文件，从中找到左侧边栏，找到下述代码 <SidebarItem v-for"route in noHiddenRoutes" :key"route.path" :item"route" :base-path"route.path" />/** *菜单项 <SidebarItem>: *使用…...

编程日记 2025/1/31 16:44:11

在彼此的根系里呼吸

爱如草木，需以晨露滋养，而非绳索捆缚。一段健康的亲密关系，恰似两株根系相连却各自向阳的树——风起时枝叶相触，晴空下共享光影，却始终保有向地心深处生长的自由。那些纠缠的根须是信任编织的网，容得下沉默…...

编程日记 2025/1/31 16:38:03

深入理解若依RuoYi-Vue数据字典设计与实现

深入理解若依数据字典设计与实现一、Vue2版本主要文件目录组件目录src/components：数据字典组件、字典标签组件工具目录src/utils：字典工具类 store目录src/store：字典数据 main.js：字典数据初始化页面使用字典例子&#xf…...

编程日记 2025/1/31 16:37:02

Perplexity企业版部署倒计时：仅剩3个关键License配额可申领，附2024Q3企业版SLA服务等级白皮书摘要

更多请点击： https://intelliparadigm.com 第一章：Perplexity企业版核心价值与定位 Perplexity企业版并非通用问答工具的简单升级，而是面向现代数据驱动型组织构建的**可信AI协作者平台**。它深度融合企业知识图谱、权限感知检索与可审计推理…...

编程新知 2026/5/15 22:19:20

实测5款AI教材编写工具，低查重效果惊人，快速生成专业教材

许多教材编写者常常感到遗憾，他们费尽心思完善的正文内容，因为缺少配套资源而导致教学效果打折。设计课后练习题时，面对题型的多样化却缺乏创新的思路；制作可视化教学课件时，手头的技术能力又无法满足；深入…...

编程新知 2026/5/15 22:14:34

USB OTG = 让这个 USB 口既能当设备连电脑，也能当主机接 U 盘等外设。

USB OTG = 让这个 USB 口既能当设备连电脑，也能当主机接 U 盘等外设。 USB OTG = USB On-The-Go（常读成「USB OTG」）一句话让本来当 U 盘、鼠标那种「从设备（Device）」用的 USB 口，在需要时也能临时当「主机（Host）」，去接 U 盘、键盘、读卡器等外设。...

编程新知 2026/5/15 21:47:55

智能助手会话上下文管理：基于向量检索的长期记忆与多技能协作实践

1. 项目概述与核心价值最近在折腾一个基于大语言模型的智能助手项目，发现一个挺有意思的痛点：如何让AI在持续的对话中，不仅能记住当前聊了什么，还能“聪明地”回忆起我们之前讨论过的所有相关背景？比如，你昨…...

编程新知 2026/5/15 21:13:36

3步轻松解锁Cursor Pro完整功能：免费使用AI编程助手的终极指南

3步轻松解锁Cursor Pro完整功能：免费使用AI编程助手的终极指南【免费下载链接】cursor-free-vip [Support 0.45]（Multi Language 多语言）自动注册 Cursor Ai ，自动重置机器ID ， 免费升级使用Pro 功能: Youve reached …...

编程新知 2026/5/15 20:41:17

Saga状态机设计失效导致订单丢失？DeepSeek内部SRE团队紧急修复的7个隐性陷阱，你中了几个？

更多请点击： https://intelliparadigm.com 第一章：Saga状态机设计失效导致订单丢失？DeepSeek内部SRE团队紧急修复的7个隐性陷阱，你中了几个？ Saga 模式在分布式事务中被广泛采用，但 DeepSeek SRE 团队在一…...

编程新知 2026/5/15 18:47:55

DeepSeek Saga模式性能压测实录（TPS从1.2K飙升至8.6K）：异步事件总线+快照版本向量的组合拳揭秘

更多请点击： https://intelliparadigm.com 第一章：DeepSeek Saga模式性能压测实录（TPS从1.2K飙升至8.6K）：异步事件总线快照版本向量的组合拳揭秘在真实生产级负载下，DeepSeek R1模型启用Saga模式后&#…...

编程新知 2026/5/15 18:41:24

别再死记硬背了！用MATLAB的`strel`函数玩转形态学：从结构元素选择到开闭运算除噪

别再死记硬背了！用MATLAB的strel函数玩转形态学：从结构元素选择到开闭运算除噪在数字图像处理的学习过程中，很多初学者都会陷入一个误区：机械地记忆膨胀、腐蚀、开运算、闭运算的定义，却忽略了形态学操作中最关键的一…...

编程新知 2026/5/15 18:19:27

那个号称能把安全厂商、操作系统厂商桌子都掀了的Anthropic Mythos到底是吹牛还是真牛

权力的杠杆与认知的泡沫：Anthropic Mythos 模型在网络安全领域的真实效能与战略叙事深度评估2026年4月7日，Anthropic 公司发布了名为 Claude Mythos Preview 的新型前沿模型，这一事件在人工智能与网络安全交叉领域引发了前所未有的剧烈震荡。…...

编程新知 2026/5/15 17:53:55

视觉暂留与嵌入式编程：打造动态LED光影艺术装置

1. 项目概述：当LED阵列在空中“作画”如果你见过夜晚挥舞的LED光剑在空中留下绚烂的图案，或者火舞者手中的Poi（火球）划出复杂的光轨，那么你已经亲眼目睹了动态成像（Kinetic Persistence of Vision, Kinetic…...

编程新知 2026/5/15 16:30:23