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 相关文章推荐
jquery $.ajax入门应用一
Nov 19 Javascript
JavaScript设计模式之外观模式实例
Oct 10 Javascript
Javascript实现div的toggle效果实例分析
Jun 09 Javascript
javascript 动态样式添加的简单实现
Oct 11 Javascript
jQuery上传插件webupload使用方法
Aug 01 jQuery
vue-cli 使用axios的操作方法及整合axios的多种方法
Sep 12 Javascript
vue使用echarts图表的详细方法
Oct 22 Javascript
webpack 代码分离优化快速指北
May 18 Javascript
javascript实现图片轮播代码
Jul 09 Javascript
解决Vue在Tomcat8下部署页面不加载的问题
Nov 12 Javascript
Javascript Web Worker使用过程解析
Mar 16 Javascript
vue路由切换时取消之前的所有请求操作
Sep 01 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类与对象中的private访问控制的疑问
2012/11/01 PHP
一个简洁的PHP可逆加密函数(分享)
2013/06/06 PHP
php短址转换实现方法
2015/02/25 PHP
php实现随机显示图片方法汇总
2015/05/21 PHP
PHP目录与文件操作技巧总结(创建,删除,遍历,读写,修改等)
2016/09/11 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
javascript据option的value值快速设定初始的selected选项
2007/08/13 Javascript
JavaScript的9个陷阱及评点分析
2008/05/16 Javascript
JS正则中的RegExp对象对象
2012/11/07 Javascript
A标签中通过href和onclick传递的this对象实现思路
2013/04/19 Javascript
JS禁用浏览器退格键实现思路及代码
2013/10/29 Javascript
jquery 隐藏与显示tr标签示例代码
2014/06/06 Javascript
AngularJs实现ng1.3+表单验证
2015/12/10 Javascript
javascript三种代码注释方法
2016/06/02 Javascript
canvas学习之API整理笔记(二)
2016/12/29 Javascript
javascript、php关键字搜索函数的使用方法
2018/05/29 Javascript
vue.js实现的绑定class操作示例
2018/07/06 Javascript
[52:05]EG vs OG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
进一步探究Python中的正则表达式
2015/04/28 Python
Python list操作用法总结
2015/11/10 Python
解决python3中自定义wsgi函数,make_server函数报错的问题
2017/11/21 Python
Python爬虫中urllib库的进阶学习
2018/01/05 Python
python爬虫自动创建文件夹的功能
2018/08/01 Python
Flask框架模板渲染操作简单示例
2019/07/31 Python
Jupyter Notebook折叠输出的内容实例
2020/04/22 Python
pyspark给dataframe增加新的一列的实现示例
2020/04/24 Python
Django怎么在admin后台注册数据库表
2020/11/14 Python
使用css实现android系统的loading加载动画
2019/07/25 HTML / CSS
印度在线内衣和时尚目的地:Zivame
2017/09/28 全球购物
C语言笔试题回忆
2015/04/02 面试题
大学旷课检讨书
2014/01/28 职场文书
环保建议书作文
2014/03/12 职场文书
高中教师个人总结
2015/02/10 职场文书
Python办公自动化之Excel(中)
2021/05/24 Python
P站美图推荐——变身女主角特辑
2022/03/20 日漫
Python基本的内置数据类型及使用方法
2022/04/13 Python