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程序设计有所帮助。
相关文章
这篇文章主要介绍了详解用Webpack与Babel配置ES6开发环境，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
这篇文章主要为大家详细介绍了bootstrap模态框垂直居中效果的实现代码,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
js获取某月的最后一天日期的简单实例，需要的朋友可以参考一下2013-06-06
javascript 中 indexOf 是严格区分大小写的 如何才能忽略大小写呢?2008-08-08
sort是数组的一个排序方法。学习js的朋友可以参考下。2011-07-07
这篇文章主要介绍了javascript操作ul中li的方法,可实现鼠标经过li标签项对应改变背景色的功能,涉及javascript鼠标事件及页面元素属性的相关操作技巧,需要的朋友可以参考下2015-05-05
PS:这里列出的是常用的例子，而非研究之用，对一每个盒子，都没有设置margin,padding,boeder等属性！2008-04-04
这篇文章主要介绍了js正则表达式验证邮件地址，利用javaScript语言实现一下电子邮件地址验证程序，使用的是JavaScript语言的正则表达式库，感兴趣的小伙伴们可以参考一下2015-11-11
这篇文章主要介绍了javascript用rem来做响应式开发，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
这篇文章主要介绍了JavaScript获取网页关闭与取消关闭的事件，有需要的朋友可以参考一下2013-12-12
最新评论