大纲:

主体:

(1)场景1:点击按钮显示点击的第几个

注意:伪数组每次循环时都会重新计算一次长度,所以最好提出去或者直接加到for循环内部

结果:

分析:

  1、i为全局变量

    

解决方案:

  1、下标法

    

  2、闭包法

    

    变量分类与读取:

    

【闭包理解】

(1)首先做下断点测试

(2)自定义验证:  

(3)闭包条件验证:

(4)验证方式

通过Chrome调试工具的debug调试工具进行断点测试,进行查看

(5)闭包产生条件

最后必须调用执行函数定义,注意不一定要调用内部函数才会产生闭包,上面断点测试即可看出。验证如下

修改:

【常见的闭包】

(1)将函数作为另外一个函数的返回值

  

   将fn2函数作为fn1函数的返回值

注意:大概格式是这样,但此时还不是闭包,因为没有变量嵌套,也没有调用外部函数。
将代码修改如下

  

  接下来修改如下,会发现a逐增

  

  分析:

    ①闭包数量

      

      再次创建一个闭包,只需再执行箭头步骤即可

    ②闭包调用次数

      断点测试如下

      

   ③第15行虽然是在函数之前调用,但闭包已经产生,因为函数声明提升... ...

(2)将函数作为实参传递给另一个函数

【闭包的作用】

1、在函数外部操作读取内部局部变量

2、延迟局部变量生命周期

【问题】

1、任然存在,因为闭包延长了局部变量的生命周期

2、

【闭包的生命周期】

(1)产生位置

  

(2)死亡(包含闭包的函数对象成为垃圾对象,此时闭包死亡)

.

JS高阶---闭包(循环遍历+监听)的更多相关文章

  1. JS高阶---事件循环模式(事件轮询)

    大纲: 相关知识点: 主体: (1)模型原理 JS部分:初始化代码执行 WebAPIS:执行上下文对象(不是一个真的对象,而是一个抽象的虚拟对象,可以看做栈里的一个区域,包含很多对象) setTime ...

  2. JS高阶---闭包应用(自定义JS模块)

    [自定义JS模块] [闭包案例] (1)案例1 对应的模块文件 (2)案例2---使用匿名函数 对应的模块文件 案例2分析:因为内部函数引用了外部函数的变量,且存在嵌套关系,所以是闭包,分析结构图如下 ...

  3. JS高阶---闭包面试题

    [面试题1] 答案:The Window 分析: 本案例里,不存在闭包. 条件: .函数嵌套(满足) .内部函数调用外部函数变量(没有) 综上所述,该例中不存在闭包 [面试题2] 答案:My Obje ...

  4. JS高阶---闭包缺点(内存溢出与泄露)

    [大纲] [主体] (1)闭包优缺点 .延长局部变量的生命周期2.外部访问函数内部变量 闭包的优点同时也是它的缺点,就是 (2)解决方案 .能不用闭包就不用(很难做到,因为应用较多) .及时释放--- ...

  5. js和jquery实现页面滚动监听

    js和jquery实现页面滚动监听 一.总结 一句话总结:onscroll方法和监听页面元素的高度都可以实现滚动监听. 1.onscroll方法实现滚动监听的核心代码是什么? <body ons ...

  6. JS高阶函数的理解(函数作为参数传递)

    JS高阶函数的理解 高阶函数是指至少满足下列条件之一的函数. · 函数可以作为参数被传递 · 函数可以作为返回值输出 一个例子,我们想在页面中创建100个div节点,这是一种写法.我们发现并不是所有用 ...

  7. React.js高阶函数的定义与使用

    /* 高阶函数的简单定义与使用 一: 先定义一个普通组件 二: 用function higherOrder(WrappendComponent) { return } 将组件包裹起来,并用export ...

  8. js 高阶函数 闭包

    摘自  https://www.cnblogs.com/bobodeboke/p/5594647.html 建议结合另外一篇关于闭包的文章一起阅读:http://www.cnblogs.com/bob ...

  9. js高阶函数应用—函数防抖和节流

    高阶函数指的是至少满足下列两个条件之一的函数: 1. 函数可以作为参数被传递:2.函数可以作为返回值输出: javaScript中的函数显然具备高级函数的特征,这使得函数运用更灵活,作为学习js必定会 ...

随机推荐

  1. /usr/lib/python2.7/subprocess.py", line 1239, in _execute_child

    Traceback (most recent call last):File "/home/eping/bin/repo", line 685, in main(sys.argv[ ...

  2. 201871010116-祁英红《面向对象程序设计(java)》第6-7周学习总结

    项目 内容 <面向对象程序设计(java)> https://home.cnblogs.com/u/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.c ...

  3. ora-01489 字符串连接的结果过长 解决方案

    如下代码,使用listagg进行分组拼接时,常常会报 ora-01489 错误,造成该报错的主要原因是:oracle对字符变量的长度限制,正常情况下,oracle定义的varchar2类型变量的长度不 ...

  4. [C14] 总结(Conclusion)

    总结(Conclusion) 总结和致谢(Summary and Thank You) 欢迎来到<机器学习>课的最后一段视频.我们已经一起学习很长一段时间了.在最后这段视频中,我想快速地回 ...

  5. C++ class外的 << 重载,输出流,重载示例。不应该定义类内的<<重载

    #include <iostream> // overloading "operator << " outside class // << 应该 ...

  6. 项目那几步走:先配置setting路径文件、创建数据库、执行数据库迁移命令、配置mysql数据库信息、注册app、注释中间件、pymysql替换mysqldb-配置urls路由-继续视图函数-然后HTML页面展示-HTML里面导入css文件、models配置数据库表、

    django使用mysql数据库: 首先cmd创建库 1.settings: """Django settings for day42 project. Generate ...

  7. CF1225B2 TV Subscriptions (Hard Version)

    CF1225B2 TV Subscriptions (Hard Version) 洛谷评测传送门 题目描述 The only difference between easy and hard vers ...

  8. 怎样把ndarray转换为PyQt中的QPixmap

    找不到文档,只在网上找到一些语焉不详,执行错误的代码,鼓捣了一个晚上,研(luan)究(gao)成功 def img2pixmap(self, image): Y, X = image.shape[: ...

  9. 前端Vue项目——购物车页面

    一.加入购物车的两种策略 1.加入购物车接口 在 src/restful/api.js 中写入添加购物车接口: // 加入购物车的接口 export const shopCart = (params) ...

  10. HashHelper

    在C#中,数据的Hash以MD5或SHA-1的方式实现,MD5与SHA1都是Hash算法,MD5输出是128位的,SHA1输出是160位的,MD5比SHA1快,SHA1比MD5强度高. MD5与SHA ...