美文网首页让前端飞
js闭包的实例展示

js闭包的实例展示

作者: 强哥科技兴 | 来源:发表于2018-11-16 11:53 被阅读6次

准确来说,闭包是基于正常的垃圾回收处理机制下的。也就是说,一般情况一个函数(函数作用域)执行完毕,里面声明的变量会全部释放,被垃圾回收器回收。但闭包利用一个技巧,让作用域里面的变量,在函数执行完之后依旧保存没有被垃圾回收处理掉。

闭包

定义

MDN定义

javascriptkit

词法作用域

作用域链

函数在执行的过程中,先从自己内部找变量如果找不到,再从创建当前函数所在的作用域(词法作用域)去找, 以 此往上注意找的是变量的当前的状态

作用域链的博客

函数连同它作用域链上的要找的这个变量,共同构成闭包

一般情况下使用闭包主要是为了

封装数据

暂存数据

一个典型的闭包案例

当函数内部没有执行以下的代码时

在代码执行完成后,函数内部的局部变量speed就会被销毁,由于全局标量speedUp一直存在(除非关闭当前页面,否则全局变量一直存在),那么函数内部的作用域就没有办法被销毁,里面有东西一直被使用,这点与浏览器的垃圾回收机制相仿,当我们执行speedUp(),他会在函数的词法作用域下去寻找,函数里面又返回了一个fn,因而形成闭包,简单的理解为

这一段代码形成一个闭包,如果不return fn,那函数内部的局部变量就会被销毁。

我们可以看看上述代码利用立即执行语句和立即执行函数可以怎么演变:

闭包的相关案例

如下代码输出多少?如果想输出3,那如何改造代码?

同等演变

假设只有两层循环:

改造后(立即执行语句,演变过程)

封装一个 Car 对象

如下代码输出多少?如何连续输出 0,1,2,3,4

输出结果为:delayer:5(连续输出5个),执行setTimeout时,代码会挂到任务队列中区,待i遍历完成之后执行,而此时i = 5,所以输出delayer:5(连续输出5个)

修改后

或者

如下代码输出多少?

补全代码,实现数组按姓名、年纪、任意字段排序

写一个 sum 函数,实现如下调用方式

最后,“相信有很多想学前端的小伙伴,今年年初我花了一个月整理了一份最适合2018年学习的web前端干货,从最基础的HTML+CSS+JS到移动端HTML5等都有整理,送给每一位前端小伙伴,53763,1707这里是小白聚集地,欢迎初学和进阶中的小伙伴。”

祝大家早日学有所成,拿到满意offer,快速升职加薪,走上人生巅峰。

相关文章

  • js闭包的实例展示

    准确来说,闭包是基于正常的垃圾回收处理机制下的。也就是说,一般情况一个函数(函数作用域)执行完毕,里面声明的变量会...

  • php之闭包函数(Closure)

    php闭包函数(Closure) JS闭包 js和php闭包使用和区别

  • JS闭包

    JS闭包 闭包练习

  • JavaScript解析机制与闭包原理实例详解

    本文实例讲述了JavaScript解析机制与闭包原理。分享给大家供大家参考,具体如下: js解析机制: js代码解...

  • JS闭包问题(二)

    在之前的JS闭包问题(一)文章中大概介绍了一下JS闭包,同时讲了闭包与变量之间的问题,今天我们继续聊闭包,聊聊闭包...

  • 学习JS笔记(第七章-闭包,作用域)

    闭包的概念## 闭包实例## 数据传递更加灵活### 常见错误之循环闭包### 封装变量### 闭包小结## 作用...

  • Swift 之闭包

    闭包1.闭包表达式语法 2.闭包和类的强引用 当将一个闭包赋值给一个类实例的属性,并且闭包体捕获这个实例时,也可能...

  • JS闭包大结局(JS闭包系列3)

    在上一篇中再谈JS闭包(JS闭包系列2),我详细的介绍了JS中的变量作用域相关的概念,结合第一节关于JS闭包(JS...

  • JS闭包入门

    最近有看到朋友的面经里提到的JS闭包的问题,就想研究研究,以下是我对JS闭包的简单理解。 到底什么是JS闭包? 定...

  • 闭包实例

    标签: 实例 正文/* 例子1 */ /* 例子2 */ /* 例子3 */ /* 例子4 */ /* 例子5 *...

网友评论

    本文标题:js闭包的实例展示

    本文链接:https://www.haomeiwen.com/subject/monpfqtx.html