JS学习笔记之闭包小案例分析
更新时间：2019年05月29日 10:41:07 作者：倪晓磊
这篇文章主要介绍了JS学习笔记之闭包,结合具体案例形式分析了javascript实现与使用闭包的相关操作技巧,需要的朋友可以参考下
本文实例讲述了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程序设计有所帮助。
相关文章
这篇文章主要为大家详细介绍了微信小程序实现留言功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-10-10
下面小编就为大家带来一篇IE下JS保存图片的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-07
图片懒加载,当图片出现在可视区域再进行加载,提升用户的体验,这篇文章主要为大家整理了三个常用的图片懒加载实现方法,希望对大家有所帮助2023-12-12
本文代码使用 JavaScript。 一些同学对递归的理解还停留在“是一种求阶乘比循环低效的方法”。但其实递归和循环处理的问题是不同。拿“遍历数组”这个问题来说：循环适合同一维度（单层长度不限）上的遍历，而递归则适合跨维度（层数不限）的遍历。2013-02-02
这是一篇译文，实例分析制作自定义的信息提示框的实现代码2009-01-01
这篇文章主要介绍了微信小程序select下拉框实现源码,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-11-11
这篇文章主要为大家详细介绍了微信小程序实现菜单左右联动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-05-05
在处理一些极端情况下的复杂数值计算时,我们可能会遇到这样的情况,就是运算结果丢失精度,下面这篇文章主要给大家介绍了关于JS精度丢失产生的原因以及解决方案的相关资料,需要的朋友可以参考下2024-01-01
用JavaScript隐藏控件的方法有两种，分别是通过设置控件的style的“display”和“visibility”属性。2009-09-09
今天小编就为大家分享一篇在Layui中实现开关按钮的效果实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
最新评论