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

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

延伸函数环境生命周期

<!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> <…...

redis的分片集群模式

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

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

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

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

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

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

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

Java---猜数字游戏

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

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

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

vue3第三部分--组件通信

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

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

&#x1f4cc; 引言&#xff1a;AI 推理的新时代 近年来&#xff0c;大语言模型&#xff08;LLM&#xff09; 的规模化扩展成为 AI 研究的主流方向。然而&#xff0c;LLM 的扩展是否真的能推动 通用人工智能&#xff08;AGI&#xff09; 的实现&#xff1f;DeepSeek 推出的 R1…...

matlab提取滚动轴承故障特征

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

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

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

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

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

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

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

9、Docker环境安装Nginx

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

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

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

572. 另一棵树的子树

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

MATLAB中textBoundary函数用法

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

vue3的路由配置

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

在彼此的根系里呼吸

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

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

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

LVGL下拉列表控件lv_dropdown实战:从基础配置到高级定制(附完整代码示例)

LVGL下拉列表控件lv_dropdown实战&#xff1a;从基础配置到高级定制&#xff08;附完整代码示例&#xff09; 在嵌入式UI开发领域&#xff0c;LVGL&#xff08;Light and Versatile Graphics Library&#xff09;凭借其轻量级和高度可定制的特性&#xff0c;已成为许多开发者的…...

从电动车痛点出发:双三相永磁电机如何靠‘弱磁’跑得更远更快?(深入对比凸极与隐极设计)

双三相永磁电机弱磁控制技术&#xff1a;破解电动车高速性能瓶颈的工程实践 电动车的高速巡航与急加速能力一直是用户关注的焦点&#xff0c;而永磁同步电机&#xff08;PMSM&#xff09;的弱磁控制技术正是解锁这一性能的关键。不同于传统三相电机&#xff0c;双三相永磁同步…...

别再手动发卡了!2025新版ZFAKA搭配宝塔面板,30分钟搞定你的专属自动售卡站

2025年ZFAKA自动售卡系统&#xff1a;零基础30分钟搭建全攻略 在数字商品交易日益火爆的今天&#xff0c;手动处理订单不仅效率低下&#xff0c;还容易出错。想象一下凌晨三点被订单提醒吵醒&#xff0c;手忙脚乱地复制卡密发给买家——这种场景对于个体创业者来说再熟悉不过了…...

从电机控制实战看Q格式:TI C2000 DSP的定点数优化秘籍

电机控制实战&#xff1a;TI C2000 DSP中Q格式的定点数优化艺术 在实时电机控制系统中&#xff0c;计算效率和精度往往是一对矛盾体。当TI C2000系列DSP遇上无刷电机控制&#xff0c;Q格式定点数运算便成为平衡这对矛盾的关键技术。本文将深入探讨如何通过Q格式在资源受限的定点…...

突破跨平台壁垒:Whisky让macOS高效运行Windows程序的颠覆性方案

突破跨平台壁垒&#xff1a;Whisky让macOS高效运行Windows程序的颠覆性方案 【免费下载链接】Whisky A modern Wine wrapper for macOS built with SwiftUI 项目地址: https://gitcode.com/gh_mirrors/wh/Whisky 作为一名独立游戏开发者&#xff0c;李明曾因Mac无法运行…...

libtorrent会话管理终极指南:10个关键配置参数详解

libtorrent会话管理终极指南&#xff1a;10个关键配置参数详解 【免费下载链接】libtorrent an efficient feature complete C bittorrent implementation 项目地址: https://gitcode.com/gh_mirrors/li/libtorrent libtorrent是一个高效且功能完善的C BitTorrent实现&a…...

【单片机实战】中断服务程序编写精要:从现场保护到中断返回

1. 中断服务程序的核心作用与基本结构 第一次接触单片机中断时&#xff0c;我盯着开发板上的按键发愣——明明没有循环检测IO口状态&#xff0c;按下按键却能立即触发LED亮灭。这种"随叫随到"的响应机制&#xff0c;就是中断服务程序&#xff08;ISR&#xff09;的魔…...

UnityXR实战:用Pico实现物体抓取与场景重置(含材质交互技巧)

UnityXR实战&#xff1a;用Pico实现物体抓取与场景重置&#xff08;含材质交互技巧&#xff09; 在虚拟现实开发领域&#xff0c;交互体验的质量往往决定了产品的成败。Pico作为国内领先的VR设备&#xff0c;结合UnityXR框架&#xff0c;为开发者提供了强大的工具链来实现沉浸式…...

华为ENSP实战:手把手教你搭建住宅小区网络拓扑(附完整配置脚本)

华为ENSP实战&#xff1a;从零构建智能小区网络的全栈解决方案 当清晨第一缕阳光透过窗帘洒进房间&#xff0c;现代人睁开眼的第一件事往往是拿起手机查看消息——这种习以为常的场景背后&#xff0c;是无数个日夜运行的住宅小区网络在默默支撑。作为网络工程师&#xff0c;我…...

Rockchip Android 12编译踩坑记:手把手教你修改BoardConfig.mk生成userdata.img

Rockchip Android 12编译实战&#xff1a;从BoardConfig.mk修改到userdata.img生成的避坑指南 第一次在Rockchip平台上编译Android 12系统时&#xff0c;我遇到了一个令人抓狂的问题——编译过程看似顺利&#xff0c;但生成的固件烧写到设备后&#xff0c;系统始终无法正常启动…...