必会的闭包面试题

article/2025/6/28 2:46:50

百度百科摘要:
  闭包就是能够读取其他函数内部变量的函数。例如在 JavaScript 中,只有函数内部的子函数才能读取局部变量,所以闭包可以理解成“定义在一个函数内部的函数“。在本质上,闭包是将函数内部和函数外部连接起来的桥梁。

Q1:

		function Foo() {var i = 0;console.log(i)return () => console.log(i++);}var f1 = Foo(), f2 = Foo();f1();f1();f2();
控制台输出:

在这里插入图片描述

分析:
  1. 此题目的考察点在闭包引用类型对象,首先Foo是引用类型存储在堆中,而变量 f1、f2 存储是在栈中;

  2. var f1 = Foo() 首先 Foo() 执行,输出 0 ,返回一个函数体,f1 指向返回的函数体。
    var f2 = Foo() 同样执行 Foo(),和 f1 不同的是这是一个新的内存地址,输出 0 ,返回一个函数体,f2 指向返回的函数体。

  3. f1() 第一次执行,即返回的函数体执行,因为自身没有 定义 i ,所以向上找父函数定义的 i ,输出 i++ 即为 0

  4. f1() 第二次执行,再次执行返回的函数体,输出的是父函数的 i = 1i++ ,输仍为 1

  5. f2() 第一次执行,f2 执行的是新的 Foo() 执行返回的函数体,因此其内部定义的变量和 f1 中没有任何关系。其父函数的 i0,输出 i++ 即是 0

在这里插入图片描述



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

相关文章

JS闭包 经典面试题

面试题 先看题目代码: 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);//undefined,?,?,? var b fun(0).fun(1).fun(2).fun(3);//undefined,?,?,? var c fun(0).fun(1…

分享 10 个 JS 闭包面试题(图解),进来看看你能答对多少

英文 | https://betterprogramming.pub/10-javascript-closure-challenges-explained-with-diagrams-c964110805e7 翻译 | 杨小爱 闭包是函数式编程中的核心概念之一,是每个 JavaScript 开发人员必备的知识。在这里,我准备了 10 个关于闭包的面试挑战题&…

图解JavaScript闭包面试题

由于最近在学习关于闭包相关的知识,并且闭包这个知识点让我有点搞不太清楚其具体的定义,所以在网上也查阅了很多大佬的讲解和对闭包的一个定义。 最后感觉还是MDN上的说法感觉比较好理解一些,对闭包还是不太理解的道友可以尝试看一看。 MDN上…

10 个用图表解释JavaScript 闭包的面试题

英文 | https://betterprogramming.pub/10-javascript-closure-challenges-explained-with-diagrams-c964110805e7 翻译 | 杨小爱 闭包是函数式编程中的核心概念之一,是每个 JavaScript 开发人员必备的知识。在这里,我准备了 10 个关于闭包的面试挑战题&…

面试题-闭包

目录 什么是闭包? 闭包的产生 闭包中的变量 自动形成的闭包与内存占用 手动形成闭包 闭包的优点/特点 对闭包的小结: 闭包经典面试题一 闭包基础面试题二 闭包经典面试题三 闭包经典面试题四 真题解答 需要先掌握的知识 1.javascript中的作用域与…

关于闭包的7道面试题

每个JavaScript开发人员都必须知道闭包是什么。在JavaScript编码面试中,闭包经常被问及。 本文整理了一份关于JavaScript 闭包的 7 个有趣且难度递增的问题的清单。 拿一支铅笔和一张纸,试着在不看答案或运行代码的情况下回答问题。可能需要大约 30 分钟…

闭包中常见的面试题

1、声明函数 最普通最标准的声明函数方法,包括函数名及函数体。 function fn1(){} 2、创建匿名函数表达式 创建一个变量,这个变量的内容为一个函数 var fn1function (){} 注意采用这种方法创建的函数为匿名函数,即没有函数name var fn1…

闭包及闭包经典面试题

理解:什么是闭包? 1.密闭的容器,类似set/map容器,用来存储数据 2.闭包是一个对象,存放数据的格式:key:value 闭包形成的条件 1.函数嵌套 2.内部函数引用外部函数 function fun(){var count 1;functi…

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…