JS学习笔记之闭包小案例分析
2019-05-29 18:02
2281 查看
本文实例讲述了JS学习笔记之闭包小案例。分享给大家供大家参考,具体如下:
直接上代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <style type="text/css"> *{ list-style:none; } ul{ display:flex; flex-wrap:wrap; } li{ width: 20%; text-align: center; } img{ width: 90%; padding:5%; border:1px solid #ccc; border-radius:5px; } </style> <body> <ul> <li><img src="http://www.nixiaolei.com/pizza/dist/pizza.jpg" alt=""><p><button>赞(1)</button></p></li> <li><img src="http://www.nixiaolei.com/pizza/dist/pizza.jpg" alt=""><p><button>赞(1)</button></p></li> <li><img src="http://www.nixiaolei.com/pizza/dist/pizza.jpg" alt=""><p><button>赞(1)</button></p></li> <li><img src="http://www.nixiaolei.com/pizza/dist/pizza.jpg" alt=""><p><button>赞(1)</button></p></li> </ul> </body> <script type="text/javascript"> function my$(tagName){ return document.getElementsByTagName(tagName); } var btnObjs=my$("button"); function bb(){ var value=2; return function(){ var target=event.target console.log(this) this.innerHTML="赞("+(value++)+")"; } } for(var i=0;i<btnObjs.length;i++){ btnObjs[i].onclick=bb() } </script> </html>
函数被返回后 其中的value 并未被释放,所以累加
闭包后,作用域链会被延长
闭包的作用,缓存数据,是缺点也是优点
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
您可能感兴趣的文章:
相关文章推荐
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第24讲_js案例讲解_js自定义函数_学习笔记_源代码图解_PPT文档整理
- Hadoop学习笔记—20.网站日志分析项目案例(三)统计分析
- 基于R语言的Kaggle案例分析学习笔记(三)
- 统计分析学习笔记——图像处理中的统计应用案例
- node.js学习笔记(3)--Express创建的项目分析
- js学习笔记之闭包
- 关于原型。闭包的学习计划(JavaScript高级进阶)js高级第一天笔记
- Hadoop学习笔记—20.网站日志分析项目案例(二)数据清洗
- js的小案例的实现效果学习笔记
- JS闭包学习笔记(1):什么是闭包
- 课程笔记-深度学习之逻辑回归(Regression)pokemon案例分析
- 基于R语言的Kaggle案例分析学习笔记(一)
- 【学习笔记】深入理解js原型和闭包(16)——完结
- js学习笔记-第五章函数表达式-闭包和模仿块级作用域
- 学习笔记8:《大型网站技术架构 核心原理与案例分析》之 固若金汤:网站的安全架构
- sizzle.js学习笔记利用闭包模拟实现数据结构:字典(Map)
- Hadoop学习笔记—20.网站日志分析项目案例(三)统计分析
- Hadoop学习笔记—20.网站日志分析项目案例(一)项目介绍
- JavaScript学习笔记(九)—— JS 理解闭包
- Hadoop学习笔记—20.网站日志分析项目案例(二)数据清洗