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下利用jsonp跨域访问实现方法
Jul 29 Javascript
Backbone.js的一些使用技巧
Jul 01 Javascript
轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮
Nov 30 Javascript
JS模拟简易滚动条效果代码(附demo源码)
Apr 05 Javascript
Javascript中的对象和原型(二)
Aug 12 Javascript
jQuery拖拽通过八个点改变div大小
Nov 29 Javascript
详解Vue生命周期的示例
Mar 10 Javascript
详解angular中通过$location获取路径(参数)的写法
Mar 21 Javascript
实例详解JavaScript中setTimeout函数的执行顺序
Jul 12 Javascript
jquery自定义显示消息数量
Dec 19 jQuery
vue better-scroll插件使用详解
Jan 25 Javascript
详解使用mpvue开发github小程序总结
Jul 25 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正则
2006/07/07 PHP
php minixml详解
2008/07/19 PHP
jq的get传参数在utf-8中乱码问题的解决php版
2008/07/23 PHP
php地址引用(php地址引用的效率问题)
2012/03/23 PHP
PHP 验证登陆类分享
2015/03/13 PHP
WAF的正确bypass
2017/01/05 PHP
jquery实现div拖拽宽度示例代码
2013/07/31 Javascript
深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例
2014/08/04 Javascript
JavaScript中判断整字类型最简洁的实现方法
2014/11/08 Javascript
jquery实现文本框textarea自适应高度
2016/03/09 Javascript
浅谈javascript:两种注释,声明变量,定义函数
2016/09/29 Javascript
windows下vue-cli及webpack搭建安装环境
2017/04/25 Javascript
vue之数据交互实例代码
2017/06/20 Javascript
浅谈在vue项目中如何定义全局变量和全局函数
2017/10/24 Javascript
vue中的event bus非父子组件通信解析
2017/10/27 Javascript
微信小程序使用modal组件弹出对话框功能示例
2017/11/29 Javascript
Node.js使用MongoDB的ObjectId作为查询条件的方法
2019/09/10 Javascript
JavaScript实现横版菜单栏
2020/03/17 Javascript
[01:24]DOTA2上海特锦赛OG战队抵达 专车接机入驻总统套房
2016/02/23 DOTA
python模块之StringIO使用示例
2015/04/08 Python
Python 基础教程之闭包的使用方法
2017/09/29 Python
python 接口测试response返回数据对比的方法
2018/02/11 Python
python使用Paramiko模块实现远程文件拷贝
2019/04/30 Python
Python破解BiliBili滑块验证码的思路详解(完美避开人机识别)
2020/02/17 Python
python列表切片和嵌套列表取值操作详解
2020/02/27 Python
pandas数据处理之绘图的实现
2020/06/15 Python
Jmeter HTTPS接口测试证书导入过程图解
2020/07/22 Python
几款Python编译器比较与推荐(小结)
2020/10/15 Python
基于python模拟bfs和dfs代码实例
2020/11/19 Python
html5菜单折纸效果
2014/04/22 HTML / CSS
健康监测猫砂:Pretty Litter
2017/05/25 全球购物
简单的JAVA编程面试题
2013/03/19 面试题
雏鹰争章活动总结
2014/05/09 职场文书
公务员政审单位鉴定材料
2014/05/16 职场文书
迎国庆演讲稿
2014/09/15 职场文书
大学生各类奖学金申请书
2019/06/24 职场文书