闭包与高阶函数
文中内容均来自于曾探《JavaScript设计模式与开发实践》的学习笔记。
闭包
作用域
变量的作用域，就是指变量的有效范围。
局部变量、全局变量。
变量的搜索是从内到外而非从外到内的。
变量的生命周期
对于全局变量莱索，全局变量的生命周期是永久的，除非我们主动销毁这个全局变量。
而对于函数内用var关键字生命的局部变量来说，当退出函数时，这些局部变量即失去了它们的价值，它们会随着函数调用的结束而被销毁。
闭包：f返回了一个匿名函数的应用，它可以访问到func()被调用时产生的环境，而局部变量a一直处于这个环境中，所以不会被销毁。局部变量的生命周期看起来被延续了。
//现在来看看下面这段代码：
varfunc=function(){
vara=1;
returnfunction(){
a++;
alert ( a );
}
};
varf=func();
f(); // 输出：2
f(); // 输出：3
f(); // 输出：4
f(); // 输出：5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>1111111111111</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<script type="text/javascript">
var nodes = document.getElementsByTagName('div');
// 方法一：
for (let i = 0; i < nodes.length; i++) {
nodes[i].onclick = function(){
alert(i)
}
}
// 方法二：
// for (var i = 0; i < nodes.length; i++) {
// (function(a){
// nodes[a].onclick = function(){
// alert(a)
// }
// })(i)
// }
// 方法三：
// for (var i = 0; i < nodes.length; i++) {
// nodes[i].onclick = (() => {
// var a = i;
// return () => {
// alert(a);
// }
// })();
// }
</script>
</body>
</html>
闭包的作用
封装数据：闭包可以把一些不需要暴露在全局的变量封装成“私有变量”。
//最好是把它们用闭包封闭起来。代码如下：
var mult = (function(){
var cache = {};
var calculate = function(){ // 封闭calculate 函数
var a = 1;
for ( var i = 0, l = arguments.length; i < l; i++ ){
a = a * arguments[i];
}
return a;
};
return function(){
var args = Array.prototype.join.call( arguments, ',' );
if ( args in cache ){
return cache[ args ];
}
return cache[ args ] = calculate.apply( null, arguments );
}
})();
延续局部变量的寿命
//现在我们把img 变量用闭包封闭起来，便能解决请求丢失的问题：
var report = (function(){
var imgs = [];
return function( src ){
var img = new Image();
imgs.push( img );
img.src = src;
}
})();
闭包和面向对象设计
过程和数据的结合是形容面向对象中的“对象”时经常使用的表达。对象以方法的形式包含了过程，而闭包则是在过程中以环境的形式包含了数据。通常用面向对象思想能实现的功能，用闭包也能实现。
//下面来看看这段跟闭包相关的代码：
var extent = function(){
var value = 0;
return {
call: function(){
value++;
console.log( value );
}
}
};
var extent = extent();
extent.call(); // 输出：1
extent.call(); // 输出：2
extent.call(); // 输出：3
//如果换成面向对象的写法，就是：
var extent = {
value: 0,
call: function(){
this.value++;
console.log( this.value );
}
};
extent.call(); // 输出：1
extent.call(); // 输出：2
extent.call(); // 输出：3
//或者：
var Extent = function(){
this.value = 0;
};
Extent.prototype.call = function(){
this.value++;
console.log( this.value );
};
var extent = new Extent();
extent.call();
extent.call();
extent.call();
用闭包实现命令模式
命令接受者会被封闭再闭包形成的环境中。
<script type="text/javascript">
var Tv = {
open: function(){
console.log( '打开电视机' );
},
close: function(){
console.log( '关上电视机' );
}
};
var createCommand = function( receiver ){
var execute = function(){
return receiver.open(); // 执行命令，打开电视机
}
var undo = function(){
return receiver.close(); // 执行命令，关闭电视机
}
return {
execute: execute,
undo: undo
}
};
var setCommand = function( command ){
document.getElementById( 'execute' ).onclick = function(){
command.execute(); // 输出：打开电视机
}
document.getElementById( 'undo' ).onclick = function(){
command.undo(); // 输出：关闭电视机
}
};
setCommand( createCommand( Tv ) );
</script>
闭包和内存泄露
内存泄露的原因：闭包不是罪魁祸首，全局作用域和闭包，对内存方便的影响是一样的，并不能说是内存泄露。是BOM和DOM引起的，如果两个对象之间形成了循环引用，那么这两个对象都无法被回收。
解决方法：手动将变量设为null。
高阶函数
高阶函数是指至少满足下列条件之一的函数：
函数可以作为参数被传递；
函数可以作为返回值输出；
函数作为参数传递
回调函数
var getUserInfo = function( userId, callback ){
$.ajax( 'http://xxx.com/getUserInfo?' + userId, function( data ){
if ( typeof callback === 'function' ){
callback( data );
}
});
}
getUserInfo( 13157, function( data ){
alert ( data.userName );
});
Array.prototype.sort
[ 1, 4, 3 ].sort( function( a, b ){
return a - b;
});
函数作为返回值输出
判断数据的类型
//我们还可以用循环语句，来批量注册这些isType 函数：
var Type = {};
for ( var i = 0, type; type = [ 'String', 'Array', 'Number' ][ i++ ]; ){
(function( type ){
Type[ 'is' + type ] = function( obj ){
return Object.prototype.toString.call( obj ) === '[object '+ type +']';
}
})( type )
};
Type.isArray( [] ); // 输出：true
Type.isString( "str" ); // 输出：true
单例模式
var getSingle = function ( fn ) {
var ret;
return function () {
return ret || ( ret = fn.apply( this, arguments ) );
};
};
高阶函数实现AOP
AOP(面向切面编程)的主要作用是把一些跟核心业务逻辑模块无关的功能抽离出来，这些跟业务逻辑无关的功能通常包括日志统计、安全控制、异常处理等。
Function.prototype.before = function( beforefn ){
var __self = this; // 保存原函数的引用
return function(){ // 返回包含了原函数和新函数的"代理"函数
beforefn.apply( this, arguments ); // 执行新函数，修正this
return __self.apply( this, arguments ); // 执行原函数
}
};
Function.prototype.after = function( afterfn ){
var __self = this;
return function(){
var ret = __self.apply( this, arguments );
afterfn.apply( this, arguments );
return ret;
}
};
var func = function(){
console.log( 2 );
};
func = func.before(function(){
console.log( 1 );
}).after(function(){
console.log( 3 );
});
func();
高阶函数的应用
currying：函数柯里化，又称部分求值，一个currying的函数首先会接受一些参数，接收了这些参数之后，该函数并不会立刻求值，而是继续返回另外一个函数，刚才传入的函数在函数形成的闭包中被保存起来。待到函数被真正需要求值的时候，之前传入的所有参数都会被一次性用于求值。
var currying = function( fn ){
var args = [];
return function(){
if ( arguments.length === 0 ){
return fn.apply( this, args );
}else{
[].push.apply( args, arguments );
return arguments.callee;
}
}
};
var cost = (function(){
var money = 0;
return function(){
for ( var i = 0, l = arguments.length; i < l; i++ ){
money += arguments[ i ];
}
return money;
}
})();
var cost = currying( cost ); // 转化成currying 函数
cost( 100 ); // 未真正求值
cost( 200 ); // 未真正求值
cost( 300 ); // 未真正求值
alert ( cost() ); // 求值并输出：600
uncurrying：一个对象未必只能使用它自身的方法，可以使用别的对象的方法，比如call和apply就能实现。
Function.prototype.uncurrying = function () {
var self = this;
return function() {
var obj = Array.prototype.shift.call( arguments );
return self.apply( obj, arguments );
};
};
var push = Array.prototype.push.uncurrying();
(function(){
push( arguments, 4 );
console.log( arguments ); // 输出：[1, 2, 3, 4]
})( 1, 2, 3 );
函数节流：
场景：比如window.resize事件，mousemove事件，上传进度
原理：指定时间间隔内只会执行一次任务。将即将被执行的函数用setTimeout延迟一段时间执行。如果该次延迟执行还没有完成，则忽略接下来的调用该函数的请求。
实现：
var throttle = function ( fn, interval ) {
var __self = fn, // 保存需要被延迟执行的函数引用
timer, // 定时器
firstTime = true; // 是否是第一次调用
return function () {
var args = arguments,
__me = this;
if ( firstTime ) { // 如果是第一次调用，不需延迟执行
__self.apply(__me, args);
return firstTime = false;
}
if ( timer ) { // 如果定时器还在，说明前一次延迟执行还没有完成
return false;
timer = setTimeout(function () { // 延迟一段时间执行
clearTimeout(timer);
timer = null;
__self.apply(__me, args);
}, interval || 500 );
};
};
防抖：
场景：用户名输入后，判断用户是否存在
原理：任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行。
分时函数
var timeChunk = function( ary, fn, count ){
var obj,
t;
var len = ary.length;
var start = function(){
for ( var i = 0; i < Math.min( count || 1, ary.length ); i++ ){
var obj = ary.shift();
fn( obj );
}
};
return function(){
t = setInterval(function(){
if ( ary.length === 0 ){ // 如果全部节点都已经被创建好
return clearInterval( t );
}
start();
}, 200 ); // 分批执行的时间间隔，也可以用参数的形式传入
};
};
var ary = [];
for ( var i = 1; i <= 1000; i++ ){
ary.push( i );
};
var renderFriendList = timeChunk( ary, function( n ){
var div = document.createElement( 'div' );
div.innerHTML = n;
document.body.appendChild( div );
}, 8 );
renderFriendList();
惰性加载函数
<html>
<body>
<div id="div1">点我绑定事件</div>
<script>
var addEvent = function( elem, type, handler ){
if ( window.addEventListener ){
addEvent = function( elem, type, handler ){
elem.addEventListener( type, handler, false );
}
}else if ( window.attachEvent ){
addEvent = function( elem, type, handler ){
elem.attachEvent( 'on' + type, handler );
}
}
addEvent( elem, type, handler );
};
var div = document.getElementById( 'div1' );
addEvent( div, 'click', function(){
alert (1);
});
addEvent( div, 'click', function(){
alert (2);
});
</script>
</body>
</html>
总结
很多模式都是通过闭包和高阶函数实现的。相对于模式的实现过程，我们更关注的是模式可以帮助我们完成什么！！！
相关文章：
闭包与高阶函数
文中内容均来自于曾探《JavaScript设计模式与开发实践》的学习笔记。闭包作用域变量的作用域，就是指变量的有效范围。局部变量、全局变量。变量的搜索是从内到外而非从外到内的。变量的生命周期对于全局变量莱索，全局变量的生命周期是永久的，…...
人工智能轨道交通行业周刊-第35期（2023.2.20-2.26）
本期关键词：重庆智慧轨道、智能运维主机、标准轨距、地方铁路公报、景深、机器视觉应用 1 整理涉及公众号名单 1.1 行业类 RT轨道交通人民铁道世界轨道交通资讯网铁路信号技术交流北京铁路轨道交通网上榜铁路视点ITS World轨道交通联盟VSTR铁路与城市轨道交通Rai…...
快慢指针判断链表是否有环
快慢指针判断链表是否有环 单链表有可能存在环，有些情况下要判断一个单链表是否有环。数组的有个快慢指针的方法，其实单链表和数组有相似的地方，可以使用快慢指针的方法。具体做法如下： 首先创建两个指针，它们初始时…...
《MongoDB入门教程》第26篇 聚合统计之$max/$min表达式
本文将会介绍两个 MongoDB 表达式，返回一组数据中最大值的 $max 表达式，以及返回一组数据中最小值的 $min 表达式。 $max 表达式 $max 表达式用于返回一组数据中的最大值，语法如下： { $max: <expression> }$max 表达式在…...
FPGA纯verilog解码SDI视频 纯逻辑资源实现 提供2套工程源码和技术支持
目录1、前言2、硬件电路解析SDI摄像头Gv8601a单端转差GTX解串SDI解码VGA时序恢复YUV转RGB图像输出FDMA图像缓存HDMI输出3、工程1详解：无缓存输出4、工程2详解：缓存3帧输出5、上板调试验证并演示6、福利：工程代码的获取1、前言 FPGA实现SDI视…...
JVM篇之垃圾回收
一.如何判断对象可以回收 1.引用计数法 只要一个对象被其他变量所引用，就让它的计数加1，被引用了两次就让它的计数变成2，当这个变量的计数变成0时，就可以被垃圾回收； 弊端：当出现如下图的情况࿰…...
尝试用程序计算Π(3.141592653......)
文章目录1. π\piπ2. 用微积分来计算π\piπ2.1 原理2.2 代码2.3 结果2.4 分析1. π\piπ π\piπ的重要性或者地位不用多说，有时候还是很好奇，精确地π\piπ值是怎么计算出来的。研究π\piπ的精确计算应该是很多数学家计算机科学家努力的方向…...
【异常检测三件套】系列3--时序异常检测综述
写在前面： 异常检测共包含3个内容，从多个方面剖析异常检测方法，本文为第三篇。过往内容请查看以下链接： 【异常检测三件套】系列1--14种异常检测算法https://blog.csdn.net/allein_STR/article/details/128114175?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%…...
关于SAP 错误日志解析
有时候启动或操作sap会出现故障，只是察看sap用户当前目录下的日志文件可能不得要领，此时有必要察看work目录下的一些trace. 以Linux系统为例，其他的也差不多。 instance说明 如下 DVEBMGS?? ABAP Central Instance D?? …...
java：自定义变量加载到系统变量后替换shell模版并执行shell
这里的需求前提是，在项目中进行某些操作前，需要在命令后对shell配置文件的进行修改（如ip、port），这个对于用户是不友好的，需要改为用户页面输入ip、port，后台自动去操作修改配置；那么…...
Redis高级删除策略与数据淘汰
第二章：Redis高级 学习目标 目标1：能够说出redis中的数据删除策与略淘汰策略 目标2：能够说出主从复制的概念，工作流程以及场景问题及解决方案 目标3：能够说出哨兵的作用以及工作原理，以及如何启用哨兵 …...
社畜大学生的Python之pandas学习笔记,保姆入门级教学
接上期，上篇介绍了 NumPy，本篇介绍 pandas。 目录 pandas 入门pandas 的数据结构介绍基本功能汇总和计算描述统计处理缺失数据层次化索引 pandas 入门 Pandas 是基于 Numpy 构建的，让以 NumPy 为中心的应用变的更加简单。 Pandas是基于Numpy…...
20_FreeRTOS低功耗模式
目录 低功耗模式简介 STM32低功耗模式 Tickless模式详解 Tickless模式相关配置 实验源码 低功耗模式简介 很多应用场合对于功耗的要求很严格,比如可穿戴低功耗产品、物联网低功耗产品等。 一般MCU都有相应的低功耗模式,裸机开发时可以使用MCU的低功耗模式。 FreeRTOS也…...
Hive的使用方式
操作Hive可以在Shell命令行下操作，或者是使用JDBC代码的方式操作 针对命令行这种方式，其实还有两种使用 第一个是使用bin目录下的hive命令，这个是从hive一开始就支持的使用方式 后来又出现一个beeline命令，它是通过HiveServer2服…...
Flume三大核心组件
Flume的三大核心组件： Source：数据源 Channel：临时存储数据的管道 Sink：目的地 Source：数据源：通过source组件可以指定让Flume读取哪里的数据，然后将数据传递给后面的 channel Flume内置支持读…...
数据结构（六）二叉树
一、树形结构概念树是一种非线性的数据结构，它是由n（n>0）个有限结点组成一个具有层次关系的集合。把它叫做树是因为它看起来像一棵倒挂的树，也就是说它是根朝上，而叶朝下的。它具有以下的特点：1、有一个…...
Docker buildx 的跨平台编译
docker buildx 默认的 docker build 命令无法完成跨平台构建任务，我们需要为 docker 命令行安装 buildx 插件扩展其功能。buildx 能够使用由 Moby BuildKit 提供的构建镜像额外特性，它能够创建多个 builder 实例，在多个节点并行地执行构建任…...
【java基础】方法重载和方法重写
文章目录方法重载方法重写方法重载 方法重载就是可以在一个类里面定义多个相同名称的方法，只需要参数列表的个数或者类型不同就行。 public class Overload {public int add(int a, int b) {return a b;}public double add(double a, double b) {return a b;}}对…...
Gradle7.4安装与基本使用
文章目录一.前言二.下载Gradle三.Gradle镜像源-全局级配置四.配置Gradle wrapper-项目级配置五.Gradle对测试的支持五.生命周期5.1 settings文件六.Gradle任务入门6.1 任务行为6.2 任务依赖方式七. Dependencies依赖引入7.1 依赖冲突及解决方案八.Gradle整合多模块SpringBoot九…...
[系统安全] 虚拟化安全之虚拟化概述
本文为笔者从零基础学习系统安全相关内容的笔记，如果您对系统安全、逆向分析等内容感兴趣或者想要了解一些内容，欢迎关注。本系列文章将会随着笔者在未来三年的读研过程中持续更新，由于笔者现阶段还处于初学阶段，不可避免参照复现各类书籍内容，如书籍作者认为侵权请告知，…...
业务系统对接大模型的基础方案：架构设计与关键步骤
业务系统对接大模型：架构设计与关键步骤 在当今数字化转型的浪潮中，大语言模型（LLM）已成为企业提升业务效率和创新能力的关键技术之一。将大模型集成到业务系统中，不仅可以优化用户体验，还能为业务决策提供…...
模型参数、模型存储精度、参数与显存
模型参数量衡量单位 M：百万（Million） B：十亿（Billion） 1 B 1000 M 1B 1000M 1B1000M 参数存储精度 模型参数是固定的，但是一个参数所表示多少字节不一定，需要看这个参数以什么…...
基于Uniapp开发HarmonyOS 5.0旅游应用技术实践
一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架，支持"一次开发，多端部署"，可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务，为旅游应用带来…...
python爬虫：Newspaper3k 的详细使用（好用的新闻网站文章抓取和解析的Python库）
更多内容请见： 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...
微服务商城-商品微服务
数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...
C++ 求圆面积的程序（Program to find area of a circle）
给定半径r，求圆的面积。圆的面积应精确到小数点后5位。 例子： 输入：r 5 输出：78.53982 解释：由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982，因为我们只保留小数点后 5 位数字。 输…...
爬虫基础学习day2
# 爬虫设计领域 工商：企查查、天眼查短视频：抖音、快手、西瓜 ---> 飞瓜电商：京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空：抓取所有航空公司价格 ---> 去哪儿自媒体：采集自媒体数据进…...
【碎碎念】宝可梦 Mesh GO : 基于MESH网络的口袋妖怪 宝可梦GO游戏自组网系统
目录 游戏说明《宝可梦 Mesh GO》 —— 局域宝可梦探索Pokmon GO 类游戏核心理念应用场景Mesh 特性 宝可梦玩法融合设计游戏构想要素1. 地图探索（基于物理空间 广播范围）2. 野生宝可梦生成与广播3. 对战系统4. 道具与通信5. 延伸玩法 安全性设计 技术选…...
html-＜abbr＞ 缩写或首字母缩略词
定义与作用 <abbr> 标签用于表示缩写或首字母缩略词，它可以帮助用户更好地理解缩写的含义，尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时，会显示一个提示框。 示例&#x…...
基于IDIG-GAN的小样本电机轴承故障诊断
目录 🔍 核心问题 一、IDIG-GAN模型原理 1. 整体架构 2. 核心创新点 (1) 梯度归一化（Gradient Normalization） (2) 判别器梯度间隙正则化（Discriminator Gradient Gap Regularization） (3) 自注意力机制（Self-Attention） 3. 完整损失函数 二…...