大纲:

主体:

(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. vue高频面试题(面试路上踩过的坑)

    ### Vue 双向绑定原理 mvvm 双向绑定,采用**数据劫持结合发布者-订阅者模式**的方式,通过 `Object.defineProperty()` 来劫持各个属性的 setter.gette ...

  2. Python的运用基础3

    1. 简述执行Python程序的两种方式以及他们的优缺点? 交互式(jupyter) 优点:运行一句执行一句 缺点:关闭即消失 ==例如== win10系统cmd窗口 命令行式(Pycharm) 优点 ...

  3. [转] 构建Docker镜像两种方式的比较-Dockerfile方式和S2I方式

    原文地址:https://www.cnblogs.com/tianshifu/p/8127837.html 前言 写Dockerfile是构建Docker镜像最通常的方式,接触过Docker的童鞋多少 ...

  4. WEB 中的文件下载(待修改、完善)

    在 WEB 开发中,我们会期望用户在点击某个链接的时候,下载一个文件(不管这个文件能不能被浏览器解析,都要下载).以前接触过一种方式,就是在响应 header 中设置 force-download : ...

  5. python socket编程腾讯云下报错[Errno 99] Cannot assign requested address的解决方式

    先写服务端server.py: import socket import time HOST = '172.17.xx.xx' #服务器的私网IP #HOST = 'localhost' PORT = ...

  6. 药店商品销量分析(python)

    一.数据分析的步骤 二.提出问题 分析药店商品销售情况 1)月均消费次数 2)月均消费金额 3)客单价 4)消费趋势 5)热销商品.滞销商品 三.理解数据 销售数据源为excel文件 字段的含义: 共 ...

  7. split task

    和印度的team合作的时候,他们经常有些要求,然后我们这边有时候需要改代码来满足他们的需求. 最近一次,他们要求在我们的一个工具中为他们加入2个asp.net的注册命令,不知道什么原因,system ...

  8. Vue 使用数组和对象控制Class

    直接上代码: <!doctype html> <html lang="en"> <head> <meta charset="UT ...

  9. MySQL实战45讲学习笔记:第三十四讲

    一.本节概述 在实际生产中,关于 join 语句使用的问题,一般会集中在以下两类: 1. 我们 DBA 不让使用 join,使用 join 有什么问题呢?2. 如果有两个大小不同的表做 join,应该 ...

  10. Paper | Residual Dense Network for Image Super-Resolution

    目录 Residual dense block & network 和DenseNet的不同 摘要和结论 发表在2018年CVPR. 摘要和结论都在强调方法的优势.我们还是先从RDN的结构看起 ...