JS闭包经典实例详解


Posted in Javascript onDecember 20, 2018

本文实例讲述了JS闭包。分享给大家供大家参考,具体如下:

之前花了很多时间看书上对闭包的介绍,也看了很多人的写的关于闭包的博客,然后我就以为自己懂了。

结果,下午在一个QQ群里,有人问了这道经典的闭包问题,如下图:

JS闭包经典实例详解

我告诉他去看书上的闭包介绍。告诉他之后,我想我自己要不也写一下,反正花不了多少时间,结果花了好久怎么写也不对..............

后来看了看书上的,然后自己总结了下,觉得这次应该懂了。下次还不理解我就可以去跳楼了............

-----------------------------------分割线-----------------------------------分割线--------------------------

首先我们来了解几个概念:

立即执行函数:形如 (function(){})();的一类函数;

闭包:闭包是指有权访问另一函数作用域中的变量的函数。

作用域链:当代码执行的时候,会创建变量对象的一个作用域链....(具体百度)

我们再来看这个问题,我重新写了一个,源码如下:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>闭包经典例子详解——huansky</title>
</head>
<body>
  <div id="ttt">
    <p >000000000000000000</p>
      <br>
    <p >111111111111111111</p>
    <br>
    <p >222222222222222222</p>
  </div>
</body>
<script>
var dom=document.getElementsByTagName("p");
for(var i=0;i<dom.length;i++){
    dom[i].onclick=function(){
      console.log(i);//3
    };
}
</script>
</html>

首先,代码中的匿名函数没有变量 i,所以它必须向上查找,在全局环境中找到了 i。

for循环运行后,全局变量中的 i 变成了3。此时当你点击文字的时候,会调用其绑定的函数,而该函数运行的时候,发现自己没有 i,就会取得全局环境中的 i。

所以,最后的结果是,不管你点击那段文字,最后结果都是3。

PS:感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码,看看运行效果。

那怎么办呢?你可以用立即执行函数,看代码:

for(var i=0;i<dom.length;i++){
    dom[i].onclick=function(i){
      return function( ){
      console.log(i);
      };
    }(i);
}

我们把参数 i 作为传给立即执行函数,这样,i 的值就传给了立即执行函数的局部变量 i 了。立即执行函数会直接执行,但是其活动不会销毁,因为里面有个匿名函数。执行后局部变量 i 与全局变量 i 联系就切断了,也就是执行的时候,传进去的变量 i 是多少,立即执行函数的局部变量 i  就是多少,并且该局部变量 i 仍然没有消失,因为匿名函数的存在。

这时候,return中的匿名函数的作用域链中会有两个变量 i。当点击文本的时候,它向上搜索 i 的时候,它找到立即执行函数的局部变量 i ,就停止向上查找了,因此最后的结果就不会是全局变量 i 的值3了。

有一个方法可以检验你们有没有真的理解上面所说的,看上面的变体,代码:

for(var i=0;i<dom.length;i++){
    dom[i].onclick=function(t){
      return function( ){
      console.log(t);//1
      console.log(i);//3
      };
    }(i);
}

其实return中的匿名函数中的 t 就是立即执行函数的局部变量 i,而 i 就是 指全局变量 i,因为立即执行函数中没有变量i,只能继续向上搜索,然后就找到全局变量的 i 了。

如果看到这里,你还没有理解,有两个原因:一个原因是我表达的不够好,另一个原因是你没有完全理解前面提到的这些概念,还要继续看书。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript 版本自动生成文章摘要
Jul 23 Javascript
JAVASCRIPT style 中visibility和display之间的区别
Jan 22 Javascript
js点击事件链接的问题解决
Apr 25 Javascript
js 采用delete实现继承示例代码
May 20 Javascript
js使用栈来实现10进制转8进制与取除数及余数
Jun 11 Javascript
js实现的捐赠管理完整实例
Jan 20 Javascript
JavaScript实现获取dom中class的方法
Feb 09 Javascript
javascript 面向对象function详解及实例代码
Feb 28 Javascript
JavaScript实现移动端轮播效果
Jun 06 Javascript
Node.js 的 GC 机制详解
Jun 03 Javascript
json 带斜杠时如何解析的实现
Aug 12 Javascript
ES11新增的这9个新特性,你都掌握了吗
Oct 15 Javascript
JS闭包原理与应用经典示例
Dec 20 #Javascript
Mint UI组件库CheckList使用及踩坑总结
Dec 20 #Javascript
从零开始在NPM上发布一个Vue组件的方法步骤
Dec 20 #Javascript
微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例
Dec 20 #Javascript
微信小程序实现的点击按钮 弹出底部上拉菜单功能示例
Dec 20 #Javascript
vue+Vue Router多级侧导航切换路由(页面)的实现代码
Dec 20 #Javascript
微信小程序module.exports模块化操作实例浅析
Dec 20 #Javascript
You might like
PHP用strstr()函数阻止垃圾评论(通过判断a标记)
2013/09/28 PHP
jquery 插件之仿“卓越亚马逊”首页弹出菜单效果
2008/12/25 Javascript
JS的replace方法详细介绍
2012/11/09 Javascript
JS实现的省份级联实例代码
2013/06/24 Javascript
JS写的贪吃蛇游戏(个人练习)
2013/07/08 Javascript
JQuery分别取得每行最后一列和最后一行的示例代码
2013/08/18 Javascript
原生JavaScript实现异步多文件上传
2015/12/02 Javascript
微信小程序 wxapp内容组件 icon详细介绍
2016/10/31 Javascript
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
2017/03/09 Javascript
js实现音频控制进度条功能
2017/04/01 Javascript
JS自定义滚动条效果简单实现代码
2020/10/27 Javascript
jQueryUI Sortable 应用Demo(分享)
2017/09/07 jQuery
vue使用rem实现 移动端屏幕适配
2018/09/26 Javascript
vue组件中的样式属性scoped实例详解
2018/10/30 Javascript
JointJS流程图的绘制方法
2018/12/03 Javascript
layuiAdmin循环遍历展示商品图片列表的方法
2019/09/16 Javascript
webpack4 optimization使用总结
2019/11/10 Javascript
浅谈Webpack4 Tree Shaking 终极优化指南
2019/11/18 Javascript
centos 下面安装python2.7 +pip +mysqld
2014/11/18 Python
Django中更新多个对象数据与删除对象的方法
2015/07/17 Python
Python获取央视节目单的实现代码
2015/07/25 Python
Python实现将HTML转换成doc格式文件的方法示例
2017/11/20 Python
Python selenium的基本使用方法分析
2019/12/21 Python
pytorch实现建立自己的数据集(以mnist为例)
2020/01/18 Python
python代码实现TSNE降维数据可视化教程
2020/02/28 Python
使用pytorch实现论文中的unet网络
2020/06/24 Python
详解用Python爬虫获取百度企业信用中企业基本信息
2020/07/02 Python
萨克斯第五大道的折扣店:Saks Fifth Avenue OFF 5TH
2016/08/25 全球购物
惠普加拿大在线商店:HP加拿大
2017/09/15 全球购物
好书伴我成长演讲稿
2014/05/14 职场文书
学校节能减排倡议书
2014/05/16 职场文书
工地质量标语
2014/06/12 职场文书
解除聘用合同证明书范本
2014/09/11 职场文书
标准版离职证明书
2014/09/12 职场文书
Redis分布式锁Redlock的实现
2021/08/07 Redis
使用MybatisPlus打印sql语句
2022/04/22 SQL Server