闭包学习,闭包和高阶函数

面试官反复在前端面试中提出闭包相关的问题,并要求提供代码示例,主要是为了考察以下几点

1.概念:考察候选人是否真正理解闭包是如何形成的,即当一个函数可以访问并操作其外部作用域中的变量,即使在其外部函数已经执行完毕后仍然存在的现象。

2.实战应用能力:闭包在许多实际应用场景中都起到关键作用,比如模块化、缓存、事件监听解除、异步处理等。通过代码示例,面试官可以了解到候选人是否能够在实际开发中恰当地使用闭包解决具体问题。

3.代码编写与调试技能:提供闭包相关的代码示例,能让面试官看到候选人如何避免常见的闭包陷阱,例如循环引用、变量捕获等问题,并判断他们是否具备调试闭包相关bug的能力。

下面是一段经典的闭包面试题目的代码示例

function outerFunction() {var outerVar = 'outer';var innerFunction = function() {console.log(outerVar);};return innerFunction;
}var inner = outerFunction();
inner(); // 输出 "outer"

在这个例子中,innerFunction 是一个闭包,因为它能够访问并打印 outerFunction 的局部变量 outerVar,尽管 outerFunction 已经执行完毕。

面试官还可能要求解释以下更复杂的闭包行为:

function createCounter() {var count = 0;return {increment: function() {count++;return count;},getCount: function() {return count;}};
}var counter = createCounter();
console.log(counter.getCount()); // 输出 0
counter.increment();
console.log(counter.getCount()); // 输出 1

在此例中,createCounter 返回的对象方法 increment 和 getCount 都形成了闭包,它们共享并维护同一个外部作用域中的 count 变量,展示了闭包用于封装状态和实现数据隐藏的实际用途。

前端面试官问你闭包是什么

作为前端面试者,在回答“闭包是什么”的问题时,可以按照以下结构进行详细阐述:

闭包是一种特殊的函数对象,它拥有两个主要特征:

  1. 词法作用域的延续: 在JavaScript中,闭包是指有权访问另一个函数作用域中变量的函数,即使这个函数是在其外部函数执行完之后才被执行。也就是说,当一个内部函数引用了外部函数的变量,并且这个内部函数在外部函数的作用域之外被调用时,就会形成闭包。

     2.状态保持闭包能维持对外部作用域变量的引用,即使外部函数已经执行完毕并退出,这些变量也不会被垃圾回收机制回收。这就意味着闭包可以用来存储并保护那些不想暴露给全局作用域的数据,提供了类似于私有变量的效果

function outerFunction(outerParam) {var outerVariable = 'This is an outer variable';function innerFunction(innerParam) {console.log(outerVariable); // 内部函数可以访问外部函数的变量console.log(outerParam); // 同样也可以访问外部函数的参数}return innerFunction; // 当我们返回innerFunction时,形成了一个闭包
}var closureInstance = outerFunction('Some value');
closureInstance(); // 即使在outerFunction执行完成后,仍能正确输出outerVariable的值

简而言之,闭包是JavaScript中函数作用域和执行上下文相结合的产物,它使得内部函数可以长期保存外部函数的状态,这一特性在诸如函数工厂、模块化、异步编程(回调函数)、事件处理等领域具有广泛的应用价值。



高阶函数和闭包的联系和区别

高阶函数:是指接收一个或多个函数作为输入参数,或者输出一个新的函数的函数(接受函数作为参数)

以下是个错误的示例:

function higherOrderFunc(func) {return func + 1; // 此时这里的fun还无法获取到内部的参数X
}function addOne(x) {return x + 1;
}let result = higherOrderFunc(addOne);
console.log(result(5)); 

因为高阶函数需要接受一个函数作为参数,并返回一个新的函数,通常他的传参是一层一层传递的,如果不使用下面的方式写的话,无法获取到内层函数的参数。

正确的是:

function higherOrderFunc(func) {return function (x) {return func(x) + 1;};
}function addOne(x) {return x + 1;
}var newFunc = higherOrderFunc(addOne);
console.log(newFunc(5)); // 输出6

闭包:闭包是指有权访问其自身范围外的自由变量的函数,即便在其外部作用域已经关闭(外部函数已执行完毕),闭包依然能够记住并访问这些变量。(闭包作为返回值)

function makeAdder(x) {return function(y) {return x + y;};
}let addFive = makeAdder(5);
console.log(addFive(3)); // 输出8,闭包addFive保留了makeAdder函数中x的值(5)

实际上,高阶函数常常会生成闭包,因为当一个高阶函数返回了一个内部函数时,这个内部函数通常会形成一个闭包,它可以访问到外部高阶函数的变量:

function counterFactory(startFrom) {let count = startFrom;// 高阶函数返回一个内部函数,同时形成闭包return function() {count += 1;return count;};
}let myCounter = counterFactory(10);
console.log(myCounter()); // 输出11,闭包记住了startFrom的值,并增加了1
console.log(myCounter()); // 输出12,闭包继续保留并更新计数

在这个例子中,counterFactory 是一个高阶函数,它返回了一个闭包函数,这个闭包函数能够访问并修改 counterFactory 作用域内的 count 变量。

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

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

相关文章

React函数组件Hook

问题: 相对于类组件, 函数组件的编码更简单, 效率也更高, 但函数组件不能有state (旧版) 解决: React 16.8版本设计了一套新的语法来让函数组件也可以有state Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性 Hook也叫钩子…

Simple negative sampling for link prediction inknowledge graphs

摘要 知识图嵌入方法学习知识图中实体和关系的低维向量表示,便于知识图中的链接预测任务。在学习嵌入过程中,采样负三元组是很重要的,因为KGs只观察到正三元组。据我们所知,均匀随机、基于生成对抗网络(GAN)和nscach、结构感知负…

Linux 系统 快速卸载docker

(卸载前一定要做好相关数据的备份) 卸载: 第一种卸载方法 1、查询docker安装过的包: yum list installed | grep docker 2、删除安装包: yum remove docker-ce.x86_64 ddocker-ce-cli.x86_64 -y 3、删除镜像/容器等 rm -rf /var/lib/dock…

【征稿进行时|见刊、检索快速稳定】2024年教育资源与人文发展国际学术会议(ICERHD 2024)

【征稿进行时|见刊、检索快速稳定】2024年教育资源与人文发展国际学术会议(ICERHD 2024) 2024 International Conference on Educational Resources and Humanistic Development(ICERHD 2024) 大会主题: 教育艺术 商…

机器学习周报第33周

目录 摘要Abstract一、文献阅读1.1 论文标题1.2 论文摘要1.3 论文背景1.4 过去研究1.5 论文介绍1.5.1 论文模型1.5.2 时空交互学习模块(Spatiotemporal Interactive Learning Module)1.5.3 动态图推理模块(Dynamic Graph Inference Module&am…

【Java】基于SpringCloud的考研复试辅导平台

1、前端请求后端服务提供的接口。 2、后端服务的控制层Controller接收前端的请求。 3、Contorller层调用Service层进行业务处理。 4、Service层调用Dao持久层对数据持久化。 XXX-api:接口工程,为前端提供接口。 XXX-service: 业务工程,为…

SQLite使用的临时文件(二)

返回:SQLite—系列文章目录 上一篇:SQLite数据库文件损坏的可能几种情况 下一篇:未发表 ​ 1. 引言 SQLite的显着特点之一它是一个数据库由一个磁盘文件组成。 这简化了 SQLite 的使用,因为移动或备份 数据库就像复制单个文…

第4周 Python程序流程控制刷题(选择结构)

单击题目,直接跳转到页面刷题,一周后公布答案。 B2050:三角形判断B2037:奇偶数判断B2039:整数大小比较P5711:闰年判断P5714:肥胖问题B2043:判断能否被 3,5,7…

shell编程-jq命令详解

文章目录 前言一、jq简介1. 简介2. 语法3. 命令选项 二、用于处理json数据1. 过滤1.1 标识运算符1.2 基本过滤1.3 获取对象属性1.3 迭代数组元素1.4 获取数组元素1.5 使用运算符 2. 类型和值2.1 数组构造2.2 对象构造2.3 递归下降 3. 内置运算符和函数3.1 算术运算符3.2 函数3.…

PCL点云处理之最小中值平方(Lmeds法)拟合平面(二百三十四)

PCL点云处理之 最小中值平方法(Lmeds)拟合平面(二百三十四) 一、算法介绍一、拟合原理二、具体实现1.代码2.结果一、算法介绍 (本文提供详细注释,输出拟合平面参数和平面点云) Lmeds(Least Median of Squares)是一种统计学方法,用于拟合数据并减少异常值对拟合结果…

CISP证书如何查询?软考信息安全工程师和CISP哪个好?

在信息安全领域,证书是衡量一个人专业能力和经验的重要标志。 CISP(国家信息安全专业人员认证)和软考信息安全工程师证书都是业内认可度较高的证书。 那么,对于想要提升自己信息安全能力的人来说,究竟应该如何选择呢? 下面将为…

汽车信息安全--密钥管理系统初探(1)

目录 1.为什么需要密钥管理 2.常见密钥种类 3.小结 当真正开始思考如何设计基于HSM的密钥管理系统,才发现基于之前vHSM的套路是相当不完备的。 仅仅是依靠AUTOSAR KeyM和CSM提出的密钥管理要点作为需求,总觉得是无根之水,不够踏实。因此我打算从密钥的实际使用场景、HSM…

基础篇Redis

基础篇Redis 1.Redis简单介绍 Redis是一种键值型的NoSql数据库,这里有两个关键字: 键值型NoSql 其中键值型,是指Redis中存储的数据都是以key.value对的形式存储,而value的形式多种多样,可以是字符串.数值.甚至json…

前端-html-01

1.HTML的标签分类 1.1常用排版标签 标签名语义和功能属性单标签还是双标签h1 ~ h6一级标题~六级标题无双标签p段落无双标签hr分隔线无单标签br换行无单标签pre原格式显示无双标签div无语义&#xff0c;用于页面布局无双标签 1.1.1h标题标签 <!DOCTYPE html> <htm…

【Node.js 常用命令(第一篇)】揭秘Node.js:掌握这些常用命令,让你在开发路上风生水起!

目录 前言 30条常用的Node.js 命令 1. node - 启动 Node.js REPL 或执行脚本 2. npm - Node.js 包管理器 3. npx - 执行 Node 包程序 4. nodemon - 自动重启 Node.js 应用 5. express - 快速搭建 Web 应用框架 6. git - 版本控制系统 7. mocha - 测试框架 8. eslint …

面试算法-104-乘积最大子数组

题目 给你一个整数数组 nums &#xff0c;请你找出数组中乘积最大的非空连续 子数组 &#xff08;该子数组中至少包含一个数字&#xff09;&#xff0c;并返回该子数组所对应的乘积。 测试用例的答案是一个 32-位 整数。 示例 1: 输入: nums [2,3,-2,4] 输出: 6 解释: 子数…

python ch8 函数

# 如何编写函数&#xff0c;以及如何传递实参&#xff0c;让函数能够访问完成其工作所需 # 的信息&#xff1b;如何使用位置实参和关键字实参&#xff0c;以及如何接受任意数量的实参&#xff1b;显示输出的函数和返 # 回值的函数&#xff1b;如何将函数同列表、字典、if语句…

Android_NDK调试

第一步&#xff1a; 链接log动态库 在Android.mk文件中添加 LOCAL_LDLIBS -llog 注意&#xff1a;一定要在 include $(BUILD_SHARED_LIBRARY) 之上添加&#xff0c;因为当执行到这句话的时候就表示所有的lib动态库已经加载完毕了&#xff0c;所以当你在这句代码之后再添加…

C++ 中常用的 STL

标准模板库 (STL) 是 C 标准库中一个强大的组件&#xff0c;它提供了各种通用数据结构和算法。STL 旨在提高代码的可重用性、效率和可读性。本文将介绍 C 中一些常用的 STL&#xff0c;并提供代码示例。 容器 容器是用于存储和组织数据的对象。STL 中提供了以下几种容器&…

Redis I/O多路复用

I/O多路复用 Redis的I/o多路复用中&#xff0c;将多个连接放到I/O复用程序中&#xff0c;这个复用程序具体是什么&#xff0c;是Redis的主线程吗 在Redis的I/O多路复用机制中&#xff0c;“复用程序”实际上指的是操作系统提供的系统调用接口&#xff0c;如Linux下的epoll、sel…