JavaScript闭包详解


Posted in Javascript onFebruary 02, 2015

在上一篇文章我们对预解释作了概述,在写这篇博文前打算写几个经典案例,考虑到那些案例综合性比较强,也就循序渐进的有了这篇博文,这样对于学习和深入JavaScript也更加容易入手。

一同事去面试,面试官问了一道题:你写一个闭包我看下?于是同事火速写出如下代码:

function fn(){

    alert('Hello JavaScript Closure!!!');//妈蛋,E文本来就不好,找翻译才把闭包单词写出来

}

fn();

然后面试官摇摇头说道:“这怎么能叫闭包呢?”,最终两人争执不下,同事果断走人,面试官什么玩意儿?(本故事纯属虚构,如有雷同纯属巧合)

闭包可能在很多人眼中都是“高大不好上”的技术,可能在很多人眼中只有这样才算得上闭包:

示例1:

function fn() {

    return function () {

        alert('示例1');

    }

}

fn()();

示例1 PS:这个看起来不怎么高级,看样子这人水平不咋地哦!

示例2:

;(function () {

    alert('示例2');

})();

示例2 PS:这个看起来比上一个要高级,而且第一个括号前还加了一个分号,为何加一个分号,好吧我们先把这个疑问留这儿,后面会讲到。

示例3:

~function fn() {

    alert('示例3')

}();

示例3 PS:这个最高级了,简直吊炸天,我读书少,你们别骗我!

撸主读书不多,仅能写出这三种“闭包”,相信博友们能写出更多更优秀的“闭包”;到此请先暂停我的瞎掰,接下来研究下函数运行的机制,貌似有人已经知道了,肯定是作用域,我真的很不想在标题上再加上这个作用域,这样总感觉差点儿意思,这个几个东西本来都是一起的,为何要重复呢?老习惯,先上代码:

var n = 10;

function fn(){

    alert(n);

    var n = 9;

    alert(n);

}

fn();

好简单的说,我们画图(撸主只会用Windows自带的画图软件,若有更好的请博友推荐)来分析下:

JavaScript闭包详解

分析1

    从图中我们看到了两个作用域,一个是window作用域(顶级作用域),一个是fn调用的时候形成的一个私有作用域;那什么是作用域,作用域其实就是代码执行的环境。举个栗子,一个学生他的学习环境是学校,相当于他的作用域是学校,假如这个学生很调皮,晚上经常FanQiang去网吧打游戏,相当于形成了一个私有环境,这个作用域就是网吧。好吧!这个栗子太TM像撸主本人了,不由感叹一句:“少壮不努力,长大干挨踢”。还是回到正题,其实函数fn的定义就是指向一段代码的描述(图中红框),当这个fn调用(图中的绿框)的时候,就会形成一个作用域,当然这个作用域中的代码执行前也会预解释,我是不会告诉你这个作用域是当它执行完毕后会被销毁,这个fn再次调用也会形成一个新的作用域,然后执行前预解释,然后代码执行,最后执行完毕销毁。

理解闭包

    我们知道函数被调用在执行的时候会形成一个私有作用域(执行环境),这个私有作用域就是闭包。回头再看看闭包还是传说中的“高大不好上”吗?我们再回头看看第一个面试故事,还有我写的三个示例,它们其实都是闭包,确切的说那三个示例都是闭包的常用形式。

应用场景

现在有这样一个需求:HTML页面中有一个ul标签,ul下面有5个li标签,要求任意点击一个li,弹出被点击的这个li所在的索引(索引从0开始)位置,HTML结构如下:

<ul id="ul">

    <li>列表1</li>

    <li>列表2</li>

    <li>列表3</li>

    <li>列表4</li>

    <li>列表5</li>

</ul>

机智的我火速写出如下代码:
var lis = document.getElementById('ul').getElementsByTagName('li');

for (var i = 0, len = lis.length; i < len; i++) {

    lis[i].onclick = function () {

        alert(i);

    };

}

最终测试,看是否完美实现这个需求:

JavaScript闭包详解

发现无论点击多少次,最终都弹出这个结果,而需求期望的结果是:点击列表1弹出0,点击列表2弹出1,点击列表3弹出2……此时此刻只想用这幅图来形容现在的心情:

JavaScript闭包详解

(当原型在演示时没能按设计的要求运行时的样子)

这可如何才好,为何总是弹出5呢?理论上很正确呀!我们不妨画图来分析下:

JavaScript闭包详解

其实我们只是给每一个li的onclick其实就是保存的一段函数的描述字符串,这个字符串内容就是上图红框中的内容,如果您还是不信,我有图有真相:

JavaScript闭包详解

在Chrome控制台下输入:lis[4].onclick,其值就是函数的描述。当我们在点击第5个列表时,其实就是相当于lis[4].onclick(),调用了这段函数描述,我们知道函数在被调用执行的时会形成一个私有作用域,在这个私有作用域下也是先预解释,然后代码执行,此时会去找i,在当前私有作用域下没有i,然后去window作用域下找到了i,因此每次点击都弹出5。

显然上面的代码无法满足这个需求,我们代码那么写是不正确的,我们思考一下出现问题的原因是什么?其实原因就是每次点击的时候都是读取的window下的i,此时这个i的值已经是5了,于是有了如下代码:

方式一:

var lis = document.getElementById('ul').getElementsByTagName('li');

function fn(i) {

    return function () {

        alert(i);

    }

}

for (var i = 0, len = lis.length; i < len; i++) {

    lis[i].onclick = fn(i);

}

方式二:

var lis = document.getElementById('ul').getElementsByTagName('li');

 

for (var i = 0, len = lis.length; i < len; i++) {

    ;(function (i) {

        lis[i].onclick = function () {

            alert(i);

        };

    })(i);

}

方式三:

var lis = document.getElementById('ul').getElementsByTagName('li');

 

for (var i = 0, len = lis.length; i < len; i++) {

    lis[i].onclick = function fn(i) {

        return function () {

            alert(i);

        }

    }(i);

}

一口气写了三种方式,其思想都是一样的,就是将这个变量i用一个私有变量存储起来,这里我就只讲方式二,当然明白其中一个其余也就都明白了。按照惯例,我们画图来一步步分析下:

JavaScript闭包详解

我详细的对整个代码执行做了描述,需要注意的是:每个li的onclick属性都要占用(function(i){ … })(i)作用域,当这个函数执行完毕后不会被销毁,因为它被外面的li(这个li是window作用域下的)占用着,因此这个作用域不会被销毁。当点击任意一个li时,function(){ alert(i); }会被执行,也会形成一个作用域,这个作用域没有i,它会去(function(){ … })(i)作用域找i,最终在形参找到i,这个形参i的值就是for循环时传进去的;这个例子巧妙地使用闭包来贮存值,完美解决问题。

PS:刚刚说(function(i){ … })(i)为什么在前面加一个分号,其原因就是防止前面的语句忘记加分号,这样导致JavaScript在解析时出错,仅此而已。当然上面的一个应用场景就是Tabs实现原理,可以有其他实现方式,比如自定义属性方式、通过DOM节点关系找到索引,而撸主采用这样一种方式只是为了加深对闭包的理解。

总结

    闭包并不是传说中的高大不好上,其核心就是理解函数定义、调用,函数调用时会形成一个新的私有作用域,当某个作用域被外面占用,那么这个作用域将不会被销毁。撸主读书甚少,有说得不对的地方请博友们指正,同时也感谢大家对撸主文章的支持。

Javascript 相关文章推荐
JavaScript 捕获窗口关闭事件
Jul 26 Javascript
js性能优化 如何更快速加载你的JavaScript页面
Mar 17 Javascript
JS中改变this指向的方法(call和apply、bind)
Mar 26 Javascript
利用React-router+Webpack快速构建react程序
Oct 27 Javascript
JS实现本地存储信息的方法(基于localStorage与userData)
Feb 18 Javascript
详解wow.js中各种特效对应的类名
Sep 13 Javascript
vue 运用mock数据的示例代码
Nov 07 Javascript
Vue模拟数据,实现路由进入商品详情页面的示例
Aug 31 Javascript
js自定义input文件上传样式
Oct 26 Javascript
基于Vue和Element-Ui搭建项目的方法
Sep 06 Javascript
viewer.js实现图片预览功能
Jun 24 Javascript
手写实现JS中的new
Nov 07 Javascript
js实现浏览器窗口大小被改变时触发事件的方法
Feb 02 #Javascript
javascript的switch用法注意事项分析
Feb 02 #Javascript
jQuery实现长按按钮触发事件的方法
Feb 02 #Javascript
jQuery实现跟随鼠标运动图层效果的方法
Feb 02 #Javascript
JavaScript针对网页节点的增删改查用法实例
Feb 02 #Javascript
jQuery通过控制节点实现仅在前台通过get方法完成参数传递
Feb 02 #Javascript
jQuery循环动画与获取组件尺寸的方法
Feb 02 #Javascript
You might like
生成静态页面的php函数,php爱好者站推荐
2007/03/19 PHP
用mysql内存表来代替php session的类
2009/02/01 PHP
php 抽象类的简单应用
2011/09/06 PHP
php使用Jpgraph绘制复杂X-Y坐标图的方法
2015/06/10 PHP
php实现微信分享朋友链接功能
2019/02/18 PHP
laravel 输出最后执行sql 附:whereIn的使用方法
2019/10/10 PHP
PHP 进程池与轮询调度算法实现多任务的示例代码
2019/11/26 PHP
js innerHTML 的一些问题的解决方法
2008/06/22 Javascript
javascript 用记忆函数快速计算递归函数
2010/03/15 Javascript
jQuery Select(单选) 模拟插件 V1.3.62 改进版
2010/07/17 Javascript
JavaScript高级程序设计 阅读笔记(十七) js事件
2012/08/14 Javascript
Javascript中3种实现继承的方法和代码实例
2014/08/12 Javascript
javascript中局部变量和全局变量的区别详解
2015/02/27 Javascript
基于jQuery实现左侧菜单栏可折叠功能
2016/12/27 Javascript
echarts3 使用总结(绘制各种图表,地图)
2017/01/05 Javascript
微信小程序 开发之滑块视图容器(swiper)详解及实例代码
2017/02/22 Javascript
JavaScript原型对象、构造函数和实例对象功能与用法详解
2018/08/04 Javascript
vue.js 图片上传并预览及图片更换功能的实现代码
2018/08/27 Javascript
bootstrap-table formatter 使用vue组件的方法
2019/05/09 Javascript
vue cli3.0 引入eslint 结合vscode使用
2019/05/27 Javascript
一篇文章带你使用Typescript封装一个Vue组件(简单易懂)
2020/06/05 Javascript
解决vue2中使用elementUi打包报错的问题
2020/09/22 Javascript
python 2.6.6升级到python 2.7.x版本的方法
2016/10/09 Python
Python编程生成随机用户名及密码的方法示例
2017/05/05 Python
python生成随机图形验证码详解
2017/11/08 Python
基于pandas数据样本行列选取的方法
2018/04/20 Python
Django和Ueditor自定义存储上传文件的文件名
2021/02/25 Python
澳大利亚正品化妆品之家:Cosmetic Capital
2017/07/03 全球购物
美国酒店控股公司:Choice Hotels
2018/06/15 全球购物
Etam德国:内衣精品店
2019/08/25 全球购物
大专毕业生简历的自我评价
2013/10/20 职场文书
公司财务总监岗位职责
2013/12/14 职场文书
餐厅采购员岗位职责
2014/03/06 职场文书
大学生学年个人总结
2015/02/15 职场文书
企业财务经理岗位职责
2015/04/08 职场文书
Java存储没有重复元素的数组
2022/04/29 Java/Android