首页 博客列表 精选博客 每日焦点 关于我
关于Javascript闭包的理解(二)
发布日期：2021-05-13 07:41:51 浏览次数：14 分类：博客文章

本文共 1741 字，大约阅读时间需要 5 分钟。

先看看闭包的科学的定义：闭包是可以包含自由（未绑定）变量的代码块；这些变量不是在这个代码块或者任何全局上下文中定义的，而是在定义代码块的环境中定义。“闭包” 一词来源于以下两者的结合：要执行的代码块（由于自由变量的存在，相关变量引用没有释放）和为自由变量提供绑定的计算环境（作用域）。

听上去有点晕，我说说我的理解。闭包是一个受到了保护的变量空间，由内嵌函数生成。用到闭包通常是为了解决变量的作用域问题。我举两个使用闭包的例子，也许看例子比什么都明白。

例子1：循环对多个按钮绑定click事件。

不用闭包的情况：

  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. function OnLoad()
  5. {
  6.     var arr = document.getElementsByTagName("input");
  7.     for(var i=0;i<arr.length;i++)
  8.     {
  9.         arr[i].onclick=function(){
  10.             alert(i);
  11.         }
  12.     }
  13. }
  14. </script>
  15. </head>
  16. <body onload="OnLoad()">
  17. <input type="button" name="button" value="button1" />
  18. <input type="button" name="button" value="button2" />
  19. <input type="button" name="button" value="button3" />
  20. <input type="button" name="button" value="button4" />
  21. <input type="button" name="button" value="button5" />
  22. <input type="button" name="button" value="button6" />
  23. <input type="button" name="button" value="button7" />
  24. </body>
  25. </html>

测试结果,你发现不管点哪个按钮，都会弹出7。原因是当你点击buttun时，循环已经执行完毕，这时候i就等于7.

再看看使用闭包的情况

  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. function OnLoad()
  5. {
  6.     var arr = document.getElementsByTagName("input");
  7.     for(var i=0;i<arr.length;i++)
  8.     {
  9.         arr[i].onclick=closureTest(i);
  10.     }
  11. }
  12. function closureTest(i)
  13. {
  14.     return function(){
  15.         alert(i);
  16.     }
  17. }
  18. </script>
  19. </head>
  20. <body onload="OnLoad()">
  21. <input type="button" name="button" value="button1" />
  22. <input type="button" name="button" value="button2" />
  23. <input type="button" name="button" value="button3" />
  24. <input type="button" name="button" value="button4" />
  25. <input type="button" name="button" value="button5" />
  26. <input type="button" name="button" value="button6" />
  27. <input type="button" name="button" value="button7" />
  28. </body>
  29. </html>

测试结果,你发现会像你想象的那样，button按钮一次会弹出0、1、2、3、4、5、6。这就是典型的利用闭包来影响变量的作用域的示例。当然，闭包能做很多不同的事情，但究其原理，还是通过影响变量的作用域来实现的。

 

转载：

上一篇：关于Javascript闭包的理解(三)
下一篇：关于Javascript闭包的理解(一)

发表评论

最新留言

网站不错 人气很旺了 加油
[***.192.178.218]2025年04月30日 17时26分07秒

关于作者

    喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！
-- 愿君每日到此一游！

推荐文章

小程序提交新数据后如何返回上一页并刷新数据？ 2019-03-11
qt c++实现的ai贪吃蛇吃满屏幕，超详细！(二)ai的具体实现 2019-03-11
linux 查看log日志相关命令 2019-03-11
IDEA 2019 安装 mybatis-plus插件 2019-03-11
div 实现光标悬停变成手型 2019-03-11
layer.confirm 无效 2019-03-11
Java 回调机制 2019-03-11
7、回归和特征选择 2019-03-11
测试tensorflow是否安装成功 出现 SyntaxError: invalid syntax的错误 2019-03-11
pycharm使用（新建工程、字体修改、调试） 2019-03-11
什么是Numpy、Numpy教程 2019-03-11
Python学习笔记——元组 2019-03-11
异常声音检测 2019-03-11
PCB学习笔记——AD17如何添加新的封装 2019-03-11
numpy版本问题 2019-03-11
打造自己的图像识别模型1— 数据准备-将图像数据转为tfrecord形式——【何之源-21个项目玩转深度学习】 2019-03-11
无法打开文件“opencv_world330d.lib”的解决办法 2019-03-11
maven项目出现 Missing artifact jdk.tools:jdk.tools:jar:1.7 2019-03-11
maven项目通过Eclipse上传到svn上面，再导入到本地出现指定的类找不到的问题 2019-03-11
maven 项目部署到tomcat下 没有class文件 2019-03-11
白红宇的个人博客 - 记录点点滴滴的事 - 您是第 461258231 位访客
访问时间: 2025-05-05 08:18:55 访问IP: 3.143.221.185     Copyright © 2020 - 2025 css8.cn 京ICP备2021015314号-1 手机版