闭包及闭包经典面试题

article/2025/6/28 2:55:42

理解:什么是闭包?

1.密闭的容器,类似set/map容器,用来存储数据

2.闭包是一个对象,存放数据的格式:key:value

闭包形成的条件

1.函数嵌套

2.内部函数引用外部函数

function fun(){var count = 1;function fun2(){//条件1:函数嵌套//形成条件2:内部函数引用外部函数console.log(count);}
}
fun();

已经形成了闭包,以键值对的形式保存数据

 在外部函数里面去调用fun2()

function fun(){var count = 1;function fun2(){//条件1:函数嵌套//形成条件2:内部函数引用外部函数console.log(count);}fun2();
}
fun();

fun2()执行之前断点,存在闭包

 fun2()执行之后断点,闭包不在了,因为fun2()执行完成后,作用域销毁,释放内存,里面的闭包同时被销毁

 闭包的应用场景:

将内部的函数返到外部去

function fun(){var count = 1;return function (){console.log(count);}
}
var fun2 = fun();
fun2();
fun2();

 闭包的优点:

延长外部函数局部变量的生命周期

闭包的缺点:

优点也是缺点,本应被销毁的变量,因为闭包的原因没有被销毁,长期存在的话,容易造成内存泄漏

注意点:

1.合理使用闭包

2.用完闭包要及时清除(销毁),避免内存泄露

基本面试题:

function fun(){var count = 1;return function (){count ++console.log(count);}
}
var fun2 = fun();
fun2();
fun2();

fun2()分别输出什么?

2/3

分析:

第一次执行return匿名函数执行count++ ,输出count = 2

第二次执行闭包起作用,第一次为被销毁

经典面试例题:

function fun(n,o){console.log(o);return{fun:function(m){return fun(m,n)}}
}
var a = fun(0)
a.fun(1)
a.fun(2)
a.fun(3)
var b = fun(0).fun(1).fun(2).fun(3)
var c = fun(0).fun(1)
c.fun(2)
c.fun(3)

函数内部有函数就已经满足了闭包的条件。

fun(0)

输出o为undefined:fun(0)只传一个参数赋值给n,o输出为undefined {n = 0}

a部分:

a.fun(1):a.fun代表内部函数的fun,执行内部函数,m = 1=>n,n=>o从内部向外部执行,n获取上次闭包值为0对应o,输出 o = 0 {m = 1}

a是返回对象 fun:function(m){ return fun(m,n) },闭包保存在a 中,闭包又是用来存储介质对的,认为key是n,存储的值是0,也就是说a 里面有一个闭包n值为0,所以每次传值不论传什么值进去,都是复制给m了,但通过闭包n值始终不变,n=0恒成立,所以:

var a = fun(0)
a.fun(1)
a.fun(2)
a.fun(3)

输出为:undefined,0,0,0

b部分:

var b = fun(0).fun(1).fun(2).fun(3)

由上述推导知:fun(0) = undefined

fun(0).fun(1)相当与a.fun(1),结果为0,返回值是个对象,n = 0

fun(0).fun(1).fun(2),返回值是个新的对象内部存储的闭包也是新的,和上面不同,n = 1

fun(0).fun(1).fun(2).fun(3),n = 2

总结:

当前传入的参数为多少并不重要,重要的是上一步给闭包中传入的key为多少

例如:

var x = fun(0).fun(1).fun(2).fun(3).fun(12).fun(33).fun(78)

输出依次为:undefined/0/1//2/3/12/33

c部分:

var c = fun(0).fun(1)
c.fun(2)
c.fun(3)

输出依次:undefined/0/1/1

前端面试官问闭包,怎样回答脱颖而出_不爱吃糖的程序媛的博客-CSDN博客_前端面试闭包该怎么回答


http://chatgpt.dhexx.cn/article/B1MheUjf.shtml

相关文章

css js写在一起 vue_问题记录(关于css、js、Vue、ES6)

一.css样式问题 1.一行省略以及多行省略问题 一行省略样式: width: 200px; // 必须是定宽 overflow: hidden; // 超出隐藏 text-overflow: ellipsis; // 隐藏部分用省略号代替 white-space: nowrap; // 文本内容不换行(默认在定宽的情况下换行) 多行省略样式: width: 200px; //…

React基础语法学习

React主要有如下3个特点: 作为UI(Just the UI)虚拟DOM(Virtual DOM):这是亮点 是React最重要的一个特性 放进内存 最小更新的视图,差异部分更新 diff算法数据流(Date Flow)单向数据流 学习Re…

class语法糖,尝尝嘛~~

语法糖(Syntactic sugar),也译为糖衣语法,是由英国计算机科学家彼得约翰兰达(Peter J. Landin)发明的一个术语,指计算机语言中添加的某种语法,这种语法对语言的功能并没有影响,但是更…

一种小型后台管理系统通用开发框架中的Cache缓存设计 ES6学习笔记 探秘 flex 上下文中神奇的自动 margin...

一种小型后台管理系统通用开发框架中的Cache缓存设计 本篇博客记录一下我在实习的公司的后台管理系统开发框架中学习到的一种关于网站的缓存(Cache)的实现方法,我会在弄懂的基础上,将该方法在.net core上进行实现。因为公司开发都…

前端综合笔记-JavaScript-CSS-HTML-VUE-ES6-Typescript-axios浏览器与web安全 --从入门到入坟

文章为个人整合的笔记,并无商业用途 点进来之后你的噩梦就要来了,接下来是我从业以来整理的一些基础与难点(多数来源于阅读文章与实践中遇到的问题),如果你 是个小白: 推荐使用2~3周的时间来消化接下来的内容, 遇到不…

flex布局应用与踩坑

一、预告 本文不是一篇入门的文章所有请符合以下条件的战斗人员绕道: 1、初学前端,对前端的传统布局还不是很熟悉的人 2、后端人员对前端不打算深入学习的同学 二、开篇 flex布局原本是好几个月前就一直想学习的东西,当时flex布局还算是比较新…

前端面试+学习笔记(HTML+CSS+JavaScript+ES6+Vue+NodeJs)

前端面试学习笔记(HTMLCSSJavaScriptES6VueNodeJs) 一. HTML 1. 盒子模型 是什么:每个元素被表示为一个矩形的盒子,有四个部分组成:内容(content)、内边距(padding)、边…

ReactNative基础篇(1)语法、布局、组件通信

•1.1语法 •ES6语法:ECMAScript6.0(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了。它的目标,是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言 •参考网…

HTML/CSS/JS 基本语法

前端 一、HTNL1、文件结构2、文本标签&#xff08;1&#xff09;块元素&#xff1a;div&#xff08;2&#xff09;行内元素&#xff1a;span&#xff08;3&#xff09;格式标签 3、图片、音频、视频&#xff08;1&#xff09;图片&#xff08;2&#xff09;音频< audio >…

flex 弹性布局

阮一峰的网络日志 首页 档案 上一篇&#xff1a;ES6 的功能侦测库 下一篇&#xff1a;Flex 布局教程&#xff1a;实 分类&#xff1a; 开发者手册 Flex 布局教程&#xff1a;语法篇 作者&#xff1a; 阮一峰 日期&#xff1a; 2015年7月10日 感谢 腾讯课堂NEXT学院 赞助本站&…

前端可能问到的面试题(ts,js,css,es6)

1.void,null,undefined&#xff0c;never,NaN void:无返回值&#xff0c;只能赋值undefined和null null:空值&#xff0c;表示不存在 undefined&#xff1a;未定义&#xff0c;声明了但没有赋值&#xff0c;对象没有赋值的属性&#xff0c;对象没有返回值 never&#xff1a;永…

利用es6和es5的继承方式写一个简单的弹窗

本片博文受到https://blog.csdn.net/zfzhuman123/article/details/90411793的启发,es6部分代码只改了一点点,逻辑也是遵照他的思想来的,而且es5继承的部分也是用了部分es6的语法 1.首先是index.html <!DOCTYPE html> <html lang"en"> <head><m…

Flex 布局教程:语法篇

阮一峰的网络日志 首页 档案 上一篇&#xff1a;ES6 的功能侦测库 下一篇&#xff1a;Flex 布局教程&#xff1a;实 分类&#xff1a; 开发者手册 Flex 布局教程&#xff1a;语法篇 作者&#xff1a; 阮一峰 日期&#xff1a; 2015年7月10日 网页布局&#xff08;layout&am…

Python全栈:ES6标准入门和Flex入门

文章目录 1 ES6标准入门2 开发环境搭建3 ES6与 JavaScript的关系4 ES6 变量与常量4.1 变量4.2 常量 5 ES6 解构赋值6 ES6 函数、箭头函数箭头函数理解this 7 JavaScript中的面向对象编程构造函数静态方法 8 ES6中的继承9 ES6中的模块化export的使用&#xff1a;import的使用在N…

ES6语法笔记

1.多行字符串 用反引号 表示&#xff1a; abc相当于 abc 2.字符串连接时使用变量 使用${变量名}直接引用字符串变量 var name 小明; var age 20; var message 你好, ${name}, 你今年${age}岁了!; alert(message); 3.字符串方法&#xff1a;不会改变原有字符串的内容&a…

mt4交易平台哪个好?不妨试试福瑞斯外汇平台

对于从事外汇交易的人来说&#xff0c;肯定对MT4不会陌生&#xff0c;众所周知&#xff0c;MT4是全球外汇交易中&#xff0c;最被广泛应用于零售客户市场的交易软件。界面简洁&#xff0c;容易上手等都是MT4潜在的优势&#xff0c;新手上路还得看MT4的指导。不过外汇交易中&…

AJPFX告诉你MT4平台有什么优势?

FX TERMINAL&#xff08;Meta Trader4&#xff09;交易平台功能 成功驾驭金融市场的第一步是拥有正确的工具。AJPFX为客户提供二十四小时的在线交易服务&#xff0c;MT4交易软件是目前全世界上最为先进&#xff0c;应用最为广泛的交易系统。客户的所要了解的行情报价&#xff0…

MT4行情交易API接口开发手记

之前开发的外汇量化交易系统&#xff0c;行情和交易接口都是通过在MT4平台下编写EA来实现&#xff0c;具体方法是&#xff1a;1、用C编写一个动态库文件&#xff0c;在里面实现行情和交易数据调用接口&#xff0c;将报价数据和K线数据写入数据库中&#xff0c;并从数据库中获取…

中期国际:MT4数据挖掘与分析方法:以数据为导向,制定有效的交易策略

在金融市场中&#xff0c;制定有效的交易策略是成功交易的关键。而要制定一份可靠的交易策略&#xff0c;数据挖掘与分析方法是不可或缺的工具。本文将介绍如何以数据为导向&#xff0c;利用MT4进行数据挖掘与分析&#xff0c;从而制定有效的交易策略。 首先&#xff0c;我们需…

双线macd指标参数最佳设置_手机mt4平台怎么使用macd双线指标

macd双线指标在外汇操作中具有重要作用&#xff0c;它既可用于电脑版的mt4&#xff0c;亦可用于手机mt4。那么&#xff0c;您对手机mt4macd双线指标了解多少&#xff1f;您知道它该如何添加、怎么使用吗&#xff1f;下文将为大家进行详细介绍。 手机mt4macd双线指标添加 手机mt…