web前端之JavaScrip中的闭包
MENU
闭包–笔试-11
function fun() {
var n = 9;
// js 中强行给一个未声明的变量赋值，
// 程序不会报错
// 并且会自动在全局创建此变量
add = function() {
n++;
};
return function() {
console.log(n);
};
};
// 把 fun() 执行的结果赋值给 fn 变量
var fn = fun();
// 此处调用的是全局的 add 函数，
// 因为全局的 add 函数作用域链引用着 fun 函数作用域对象
// 所以修改的是 fun 里面变量的值
add();
fn(); // 10
// 把 fun() 执行的结果赋值给 fn2 变量
// 注意：这里的 fn2 所引用的是 fun() 执行后的地址
// 所以 fn 和 fn2 变量使用的地址是不同，结果也不相同
var fn2 = fun();
fn2(); // 9
add();
add();
fn2(); // 11
fn(); // 10
add();
fn(); // 10
defineReactive函数，利用闭包封装Object.defineProperty()
function defineReactive(data, key, val) {
Object.defineProperty(data, key, {
// 可枚举
enumerable: true,
// 可以被配置，比如可以被 delete
configurable: true,
// getter
get() {
return val;
},
// setter
set(newValue) {
if (val === newValue) return false;
val = newValue;
}
});
};
let obj = {};
defineReactive(obj, 'a', 10); // 设置 a 属性
console.log(obj.a); // 10 访问 a 的值
obj.a = 100; // 改变 a 的值
console.log(obj.a); // 100 访问改变后 a 的值
闭包–节流函数–笔试-10
1、定义
节流函数的作用是在限定的时间内函数只执行一次。
1、按钮提交（可以避免重复提交，当然不只这种方法，将按钮设置为不可用也可以）。
2、scroll、mousehover、mousemove 等触发频率高的时候。
主要的原理就是在闭包内设置一个标记，在限定的时间内这个 flag 设置为 true，函数再次点击则让执行，setTimeout 函数执行以后将 flag 设置为 flase，就可以继续执行 。
2、html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
</head>
<body>
<div class="box" id="div_box" >
<button onclick="fn1()">test</button>
</div>
</body>
</html>
3、JavaScript
function throttle(fn, delay) {
var flag = false;
var timer = null;
return function() {
// 将参数转成数组
var args = [].slice.call(arguments, 0);
var context = this;
// 如果在限定的时间内 flag 是 true 则直接返回，不让执行
if(flag) return false;
// 函数正在控制中
flag = true;
// 执行函数
fn.apply(context, args);
// 清除定时器
clearTimeout(timer);
timer = setTimeout(function() {
// 延时时间过了以后，放开函数控制
flag = false;
}, delay);
}
}
function fn() {
console.log(123);
}
// 绑定节流函数
var fn1 = throttle(fn, 2000);
闭包的定义
定义-01
闭包是指有权访问另一个函数作用域中的变量的函数。
定义-02
闭包是一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。
定义-03
闭包可以让一个函数访问并操作其声明时的作用域中的变量和函数，即使声明时的作用域消失了，也可以调用。
定义-04
闭包是一个定义在其它函数（父函数）里面的函数，它拥有对父函数里面变量的访问权。闭包有三个作用域的访问权。自身的作用域、父作用域和全局作用域。
JavaScript闭包的9大经典使用场景
1、返回值（最常用）
这个很好理解就是以闭包的形式将 name 返回。
function fn() {
var name = "hello";
return function (){
return name;
};
};
var fnc = fn();
console.log(fnc()); // hello
2、函数赋值
在闭包里面给fn函数设置值，闭包的形式把name属性记忆下来，执行会输出 hello。
var fn;
function fnc() {
var name = "hello";
// 将函数赋值给fn
fn = function (){
return name;
};
};
fnc(); // 要先执行进行赋值，
console.log(fn2()); // 执行输出fn2
3、函数参数
用闭包返回一个函数，把此函数作为另一个函数的参数，在另一个函数里面执行这个函数，最终输出 hello。
function fn(){
var name = "hello";
return function callback() {
return name;
};
};
var fun = fn(); // 执行函数将返回值（callback函数）赋值给fnc
function func(f) {
// 将函数作为参数传入
console.log(f()); // 执行函数，并输出
};
func(fun); // 执行输出fun
4、IIFE（自执行函数）
直接在自执行函数里面将封装的函数fn1传给fn2，作为参数调用同样可以获得结果hello。
(function (){
var name = "hello";
var fn1 = function (){
return name;
};
// 直接在自执行函数里面调用fn2，将fn1作为参数传入
fn2(fn1);
})();
function fn2(f){
// 将函数作为参数传入
console.log(f()); // 执行函数，并输出
};
5、循环赋值
如果不采用闭包的话，会有不一样的情况。
// 每秒执行1次，分别输出1-10
for(var i = 1; i <= 10; i++){
(function (j){
// j来接收
setTimeout(function (){
console.log(j);
}, j * 1000);
})(i); // i作为实参传入
}
6、getter和setter
第一次输出 hello 用setter以后再输出 world ，这样做可以封装成公共方法，防止不想暴露的属性和函数暴露在外部。
function fn() {
var name = 'hello',
setName = function (n){
name = n;
},
getName = function (){
return name;
};
// 将setName，getName作为对象的属性返回
return {
setName,
getName
};
};
var fn1 = fn(); // 返回对象，属性setName和getName是两个函数
console.log(fn1.getName()); // getter
fn1.setName('world'); // setter修改闭包里面的name
console.log(fn1.getName()); // getter
7、迭代器（执行一次函数往下取一个值）
null
var arr = ['aa','bb','cc'];
function incre(arr) {
var i = 0;
return function (){
// 这个函数每次被执行都返回数组arr中 i下标对应的元素
return arr[i++] || '数组值已经遍历完';
}
}
var next = incre(arr);
console.log(next()); // aa
console.log(next()); // bb
console.log(next()); // cc
console.log(next()); // 数组值已经遍历完
8、首次区分（相同的参数，函数不会重复执行）
null
var fn = (function (){
var arr = []; // 用来缓存的数组
return function (val){
if(arr.indexOf(val) == -1) { // 缓存中没有则表示需要执行
arr.push(val); // 将参数push到缓存数组中
console.log('函数被执行了', arr);
//这里写想要执行的函数
} else {
console.log('此次函数不需要执行');
}
console.log('函数调用完打印一下，方便查看已缓存的数组：', arr);
};
})();
fn(10);
fn(10);
fn(1000);
fn(200);
fn(1000);
9、缓存
比如求和操作，如果没有缓存，每次调用都要重复计算，采用缓存已经执行过的去查找，查找到了就直接返回，不需要重新计算。
var fn = (function (){
var cache = {}; // 缓存对象
var calc = function (arr){ // 计算函数
var sum = 0;
// 求和
for(var i = 0; i < arr.length; i++){
sum += arr[i];
}
return sum;
};
return function (){
var args = Array.prototype.slice.call(arguments,0); // arguments转换成数组
var key = args.join(","); // 将args用逗号连接成字符串
var result,
tSum = cache[key];
if(tSum){ // 如果缓存有
console.log('从缓存中取：', cache); // 打印方便查看
result = tSum;
} else {
// 重新计算，并存入缓存同时赋值给result
result = cache[key] = calc(args);
console.log('存入缓存：', cache); // 打印方便查看
}
return result;
}
})();
fn(1, 2, 3, 4, 5);
fn(1, 2, 3, 4, 5);
fn(1, 2, 3, 4, 5, 6);
fn(1, 2, 3, 4, 5, 8);
fn(1, 2, 3, 4, 5, 6);
链接
相关文章：
HackQuest介绍 web3 学习平台
官网地址： https://www.hackquest.io/zhHackQuest是一个专注于Web3技术教育的在线学习平台，旨在帮助全球开发者掌握区块链、加密货币和去中心化应用（DApps）领域的最新技能。该平台汇聚了超过14000名活跃开发者，与100多个领先的Web3生态系统和项目紧密合作，为用户提供全面的教育资源。
在Java中使用WebSocket
WebSocket是一种协议，用于在Web应用程序和服务器之间建立实时、双向的通信连接。它通过一个单一的TCP连接提供了持久化连接，这使得Web应用程序可以更加实时地传递数据。WebSocket协议最初由W3C开发，并于2011年成为标准。
Spring MVC 和WebFlux 区别
本节主要对比了WebMvc 和 WebFlux两个Web框架，Spring已经为我们开发做了很大努力了，所以在合适的场景下这种异步框架还是非常可行的。但是还要考虑后期其它异步框架是否能够完善，全链路异步才能发挥异步最大的优势。
终于有人把Web 3.0和元宇宙讲明白了
分散的数据网络使个人数据（例如个人的健康数据、农民的作物数据或汽车的位置和性能数据）出售或交换成为可能，与此同时，不会失去对数据的所有权控制、放弃数据隐私或依赖第三方平台来管理数据。Web 3.0的目标是在创作者经济中取得更好的平衡。互联网第二次迭代（Web 2.0）的缺陷，加上公有区块链技术的诞生，帮助我们朝着更加去中心化的Web 3.0 迈进，元宇宙和更广泛的去中心化网络都是关于现实世界和虚拟世界的融合。此时的网络中不再是静态内容，而是动态的内容，用户现在可以与发布在网络上的内容进行交互。
使用JavaScript实现复杂功能：一个完整的电商网站搜索功能
随着互联网的发展，电子商务网站已经成为人们购物的重要平台。而在这些网站中，搜索功能无疑是核心功能之一。用户可以通过搜索快速找到他们需要的商品，从而提高购物体验。本文将详细介绍如何使用JavaScript实现一个完整的电商网站搜索功能。
抖音直播原理解析-如何在 Web 中播放 FLV 直播流
Media Source Extensions API（MSE）媒体源扩展 API 提供了实现无插件且基于 Web 的流媒体的功能，不同于简单的使用video元素，video元素对于开发者来说完全是一个黑盒，浏览器自己去加载数据，加载完了自己解析，解码再播放，这个过程中开发者无法进行任何操作。利用 MSE API 开发者可以自定义获取流媒体数据并且还可以对数据做一些操作。MSE 的兼容性如下图所示。可以发现 MSE 的兼容性还算可以，IE 11 都支持。
JavaScript DOM之Cookie详解
随着互联网的不断发展各种基于互联网的服务系统逐渐多了起来，我们常常需要记录访问者的一些信息，比如用户的账号，购物车存储的商品等，就需要用到cookie技术。cookie最早是网景公司发明的，是一种跟踪用户会话的技术。可以理解为本地缓存，它由服务器生成，保存在用户本地浏览器上的小文本文件，它可以包含与用户相关的信息。
说说你对 TypeScript 的理解？与 JavaScript 的区别？
超集，不得不说另外一个概念，子集，怎么理解这两个呢，举个例子，如果一个集合 A 里面的的所有元素集合 B 里面都存在，那么我们可以理解集合 B 是集合 A 的超集，集合 A 为集合 B 的子集。其是一种静态类型检查的语言，提供了类型注解，在代码编译阶段就可以检查出数据类型的错误。通过类型批注提供在编译时启动类型检查的静态类型，这是可选的，而且可以忽略而使用。如果缺乏声明而不能推断出类型，那么它的类型被视作默认的动态。等数据格式，对象的类型就是用接口来描述的。的语法，所以任何现有的。对于基本类型的批注是。
websocket服务端本地部署
即登录cpolar官网后，点击预留，保留一个固定tcp端口地址，然后将其配置到相应的隧道中即可。这里我们用cpolar内网穿透来映射内网端口，它支持http/https/tcp协议，不限制流量，无需公网ip，也不用设置路由器，操作简单。注意:该隧道选择的是临时tcp地址和端口,24小时内会变化,如需固定tcp地址,可升级为专业套餐做tcp地址固定!cpolar安装成功后，默认会配置两个默认隧道：一个ssh隧道和一个website隧道，可自行删减或者修改。，可以查看到token码，复制并执行命令进行认证。
elementPlust 的el-select在提示框关闭时自动弹出
主要问题就是因为filterable属性，根本解决方案是选中的时候让他失去焦点 el-select有一个visible-change事件，下拉框出现/隐藏时触发。当el-select添加filterable属性时，弹提示窗时，点击确定后，下拉框会自动弹出。console.log('弹窗出select', item)增加了visible-change事件。el-select事件最后增加焦点取消。
在 Spring MVC 中，用于接收前端传递的参数的注解常用的有以下几种
form-data参数使用multipart/form-data作为Content-Type，前端使用params格式传参，后端使用@RequestParam注解接收参数。- json请求体参数使用application/json作为Content-Type，前端使用data格式传参，后端使用@RequestBody注解接收参数。- 路径传参不需要设置Content-Type，前端将参数通过URL传递，后端使用@PathVariable注解接收参数。
在react中说说对受控组件和非受控组件的理解？以及应用场景
这时候当我们在输入框输入内容时，会发现输入的内容无法显示出来，此时input标签是一个可读的状态，因为value被this.state.username所控制，当用户输入时，this.state.username不会自动更新，这样的话input的内容就不会发生变化了，想要解除被控制，可以为input标签设置onChange事件，触发的时候更新state，从而导致input框内容更新。简单来讲，就是受我们控制的组件，组件的状态全程响应外部数据。
Golang 搭建 WebSocket 应用（八） - 完整代码
本文应该是本系列文章最后一篇了，前面留下的一些坑可能后面会再补充一下，但不在本系列文章中了。
Python中如何简化if...else...语句
我们通常在Python中采用if...else..语句对结果进行判断，根据条件来返回不同的结果，如下面的例子。这段代码是一个简单的Python代码片段，让用户输入姓名并将其赋值给变量user_input。我们能不能把这几行代码进行简化，优化代码的执行效率呢？以下是对各行代码的解读。这里使用了or这个逻辑运算符，当user_input不为空时，user_input为真，name就被赋于user_input的值。采用这种方法可以轻松实现if...else语句的简化。我们可以使用一行简短的代码来实现上面的任务。
vue3 项目中 arguments 对象获取失败问题
在 vue3 项目中获取到的 arguments 对象与传入实参不符，打印出函数中的 arguments 对象如下...
前端JS代码中Object类型数据的相关知识
遍历JavaScript中的对象有几种方法，包括使用for…in循环、Object.keys()方法、Object.values()方法和Object.entries()方法。因此前端传入了日期类型数据之后，如果和后台数据库中的数据类型不一致，比如数据库中的日期数据类型格式是。前端传入的Object对象中其中某个字段值是日期类型的数据，则在前端的类型就是一个。，则数据传往后端之前需要做格式类型转换。，它的值是一个中国标准时间，比如。
深入解析JavaScript的原生原型
在JavaScript中,除了自定义对象,还存在很多由JavaScript语言本身提供的原生对象。这些原生对象同样基于原型继承机制,拥有自己的原型。理解原生对象的原型非常重要,可以让我们正确使用这些内置对象,也有助于进一步理解JavaScript的原型继承系统。本文将详细解析原生对象的原型结构,揭开一些常见原生对象原型的神秘面纱。学习原生对象的原型关系,有助于我们在日常开发中正确理解和使用这些JavaScript内置对象,避免一些常见陷阱。
WebSocket 入门实战
这个简单示例演示了如何使用 Spring Boot 和 Spring WebSocket 创建一个基本的 WebSocket 服务。通过这个例子，可以了解 WebSocket 在实时通信中的应用，如果大家在平时工作当中有遇到需要实时推送的场景，比如大屏实时展示数据变化，就可以用这种发放时。
深入三目运算符：JavaScript、C++ 和 Python 比较
三目运算符是编程中常用的条件表达式，它允许我们根据条件选择不同的值。我们将通过具体的例子分别介绍 JavaScript、C++ 和 Python 中的三目运算符，以便更好地理解它们的用法和特性。JavaScript 示例// 例子: 根据条件选择不同的值var x = 10;var y = 20;"x 大于 y" : "x 不大于 y";在这个例子中，如果x大于y，则result的值为 “x 大于 y”，否则为 “x 不大于 y”。C++ 示例// 例子: 根据条件选择不同的值。
深入解析JavaScript中new Function语法
Function是JavaScript中非常重要的内置构造函数,可以用来动态创建函数。new Function语法就是其中一种函数创建方式。但是new Function也有一定的缺点需要注意。本文将带您深入解析new Function语法,了解其应用场景以及需要注意的问题。new Function是动态创建函数的一种方式,但也有缺点。为了更好的代码质量和性能,应该慎用或避免使用。对JavaScript函数和作用域有深入理解,可以编写出更简洁、高效、稳定的代码。。
javascript的变量存储机制和原理
js的变量存储机制
uniap vue3 组件使用uni.createSelectorQuery() 获取dom报错
批量查询时，结果是按照查询的顺序返回的。由于vue3中没有this，所以使用。
将 RGB 转换为十六进制、生成随机十六进制
RGB是一种加法混色模式，它通过调节红、绿、蓝三个颜色通道的亮度来混合出各种颜色。对于每个颜色通道，取值范围是0到255，0表示该通道对应的颜色分量没有亮度，255表示达到最大亮度。
nodemon（自动重启 node 应用程序）的安装与使用
(2).键入命令 set-ExecutionPolicy remoteSigned。windows 默认不允许 npm 全局命令执行脚本文件，所以需要修改执行策略。全局安装完成之后就可以在命令行的任何位置运行 nodemon 命令。(4)、再运行 nodemon app.js ok。我们可以执行安装选项 -g 进行全局安装。1、安装，在随意一个命令窗口都可以。自动重启 node 应用程序。(3)、输入Y 或者 A。
如何优化Uniapp应用程序的性能？
避免频繁的重绘和重排：频繁的DOM操作会导致浏览器频繁的重绘和重排，影响性能。使用v-for中的key属性：在使用v-for渲染列表时，为每个列表项添加唯一的key属性，这样可以减少渲染的次数，提高渲染的效率。减少页面加载时间：避免页面过多和过大的组件，减少不必要的资源加载。使用图片懒加载：对于图片较多的场景，可以使用图片懒加载的方式，当图片进入用户可视范围时再进行加载，减少初始页面加载的时间。节流和防抖：对于频繁触发事件的场景，可以使用节流和防抖的方法来减少事件处理的频率，从而提高性能。
鸿蒙开发-ArkTS基础，它与TS区别在那？
ArkTS是HarmonyOS优选的主力应用开发语言。ArkTS围绕应用开发在TypeScript（简称TS）生态基础上做了进一步扩展，继承了TS的所有特性，是TS的超集。说明： 也就是前端开发过程中所有的js/ts语法大部分支持的，比如es6中的箭头函数-模板字符串-promise-async/await-数组对象方法- 注意： 根据对下一代的Next版本的内部沟通，下一版本的ArkTs对类型最了更一步的限制。
vue+element ui实现图片上传并拖拽进行图片排序
vue+element ui实现图片上传并拖住进行图片排序
websocket介绍并模拟股票数据推流
Websockt是一种网络通信协议，允许客户端和服务器双向通信。最大的特点就是允许服务器主动推送数据给客户端，比如股票数据在客户端实时更新，就能利用websocket。
IDEA中在Java项目中添加Web模块 与配置tomcat服务器
现有项目添加直接走第二步。
TypeScript基础知识：类型断言
语法，我们可以将一个值断言为特定类型或将联合类型的变量断言为其中一个类型。在实际开发中，合理使用类型断言可以提高代码的可读性和维护性。中，类型断言是一种强制将一个值视为特定类型的方式。它允许开发人员在编译时指定变量的类型，从而获得更好的类型检查和代码提示。类型断言是一种告诉编译器某个值的具体类型的方法。中的一项强大特性，它允许开发人员在编译时明确指定变量的类型，以获得更好的类型检查和代码提示。中的类型断言，并提供丰富的示例代码帮助读者更好地理解和应用这一特性。将一个联合类型的变量断言为其中一个类型。