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 相关文章推荐
js 数组实现一个类似ruby的迭代器
Oct 27 Javascript
javascript动画浅析
Aug 30 Javascript
js写一个字符串转成驼峰的实例
Jun 21 Javascript
Lua表达式和控制结构学习笔记
Dec 15 Javascript
简介JavaScript中toUpperCase()方法的使用
Jun 06 Javascript
javascript实现抽奖程序的简单实例
Jun 07 Javascript
第九篇Bootstrap导航菜单创建步骤详解
Jun 21 Javascript
AngularJS实现单独作用域内的数据操作
Sep 05 Javascript
使用vue构建移动应用实战代码
Aug 02 Javascript
基于node.js的fs核心模块读写文件操作(实例讲解)
Sep 10 Javascript
vue使用ajax获取后台数据进行显示的示例
Aug 09 Javascript
分享15个Webpack实用的插件!!!
Mar 31 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
Mysql的GROUP_CONCAT()函数使用方法
2008/03/28 PHP
php数组函数序列之array_pop() - 删除数组中的最后一个元素
2011/11/07 PHP
解析curl提交GET,POST,Cookie的简单方法
2013/06/29 PHP
PHP获取文件行数的方法
2015/06/10 PHP
js 模拟实现类似c#下的hashtable的简单功能代码
2010/01/24 Javascript
基于JQuery的简单实现折叠菜单代码
2010/09/15 Javascript
jquery.qrcode在线生成二维码使用示例
2013/08/21 Javascript
jquery配合css简单实现返回顶部效果
2013/09/30 Javascript
Jquery之Bind方法参数传递与接收的三种方法
2014/06/24 Javascript
js实现点击后将文字或图片复制到剪贴板的方法
2014/08/04 Javascript
JavaScript将一个数组插入到另一个数组的方法
2015/03/19 Javascript
jquery中val()方法是从最后一个选项往前读取的
2015/09/06 Javascript
JavaScript在网页中画圆的函数arc使用方法
2015/11/13 Javascript
全面解析jQuery $(document).ready()和JavaScript onload事件
2016/06/08 Javascript
JavaScript自定义文本框光标
2017/03/05 Javascript
php简单数据库操作类的封装
2017/06/08 Javascript
用React-Native+Mobx做一个迷你水果商城APP(附源码)
2017/12/25 Javascript
vue-cli扩展多模块打包的示例代码
2018/04/09 Javascript
vue实现同一个页面可以有多个router-view的方法
2018/09/20 Javascript
微信小程序自定义导航栏
2018/12/31 Javascript
Python中的startswith和endswith函数使用实例
2014/08/25 Python
从头学Python之编写可执行的.py文件
2017/11/28 Python
Python基础教程之内置函数locals()和globals()用法分析
2018/03/16 Python
浅述python2与python3的简单区别
2018/09/19 Python
win10下tensorflow和matplotlib安装教程
2018/09/19 Python
pandas 层次化索引的实现方法
2019/07/06 Python
python opencv调用笔记本摄像头
2019/08/28 Python
python selenium操作cookie的实现
2020/03/18 Python
python RSA加密的示例
2020/12/09 Python
伦敦一家领先的精品零售商:IRIS Fashion
2019/05/24 全球购物
个人找工作自荐信格式
2013/09/21 职场文书
数控个人求职信范文
2014/02/03 职场文书
开展批评与自我批评发言材料
2014/10/17 职场文书
总经理聘用协议书
2015/09/21 职场文书
Kubernetes关键组件与结构组成介绍
2022/03/31 Servers
Win11无法访问设备和打印机 如何解决页面空白
2022/04/09 数码科技