JS学习笔记之闭包小案例分析


Posted in Javascript onMay 29, 2019

本文实例讲述了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.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
疯掉了,尽然有js写的操作系统
Apr 23 Javascript
FireFox JavaScript全局Event对象
Jun 14 Javascript
javascript图像处理—仿射变换深度理解
Jan 16 Javascript
js设置cookie过期及清除浏览器对应名称的cookie
Oct 24 Javascript
jQuery中last()方法用法实例
Jan 06 Javascript
javascript运动效果实例总结(放大缩小、滑动淡入、滚动)
Jan 08 Javascript
Jquery插件仿百度搜索关键字自动匹配功能
May 11 Javascript
关于session和cookie的简单理解
Jun 08 Javascript
Node.js读写文件之批量替换图片的实现方法
Sep 07 Javascript
JavaScript获取URL中参数querystring的方法详解
Oct 11 Javascript
JavaScript:ES2019 的新特性(译)
Aug 08 Javascript
微信小程序中网络请求缓存的解决方法
Dec 29 Javascript
JS学习笔记之贪吃蛇小游戏demo实例详解
May 29 #Javascript
elementUI select组件value值注意事项详解
May 29 #Javascript
elementUI select组件使用及注意事项详解
May 29 #Javascript
通过vue手动封装on、emit、off的代码详解
May 29 #Javascript
el-select数据过多懒加载的解决(loadmore)
May 29 #Javascript
JS学习笔记之原型链和利用原型实现继承详解
May 29 #Javascript
vue读取本地的excel文件并显示在网页上方法示例
May 29 #Javascript
You might like
一键删除顽固的空文件夹 软件下载
2007/01/26 PHP
用JS实现一个TreeMenu效果分享
2011/08/28 Javascript
javascript中判断一个值是否在数组中并没有直接使用
2012/12/17 Javascript
jQuery控制元素显示、隐藏、切换、滑动的方法总结
2015/04/16 Javascript
使用Raygun来自动追踪AngularJS中的异常
2015/06/23 Javascript
JS禁用页面上所有控件的实现方法(附demo源码下载)
2015/12/17 Javascript
jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】
2016/07/19 Javascript
JavaScript cookie详解及简单实例应用
2016/12/31 Javascript
利用Vue.js实现checkbox的全选反选效果
2017/01/18 Javascript
基于JavaScript实现本地图片预览
2017/02/08 Javascript
vue实现简单表格组件实例详解
2017/04/16 Javascript
vue2.0多条件搜索组件使用详解
2020/03/26 Javascript
解决bootstrap下拉菜单点击立即隐藏bug的方法
2017/06/13 Javascript
Vue递归实现树形菜单方法实例
2018/11/06 Javascript
JavaScript实现的级联算法示例【省市二级联动功能】
2018/12/25 Javascript
jQuery与原生JavaScript选择HTML元素集合用法对比分析
2019/11/26 jQuery
python用10行代码实现对黄色图片的检测功能
2015/08/10 Python
全面解析Python的While循环语句的使用方法
2015/10/13 Python
Python通过TensorFlow卷积神经网络实现猫狗识别
2019/03/14 Python
python常用函数与用法示例
2019/07/02 Python
Python 实现将数组/矩阵转换成Image类
2020/01/09 Python
Python要如何实现列表排序的几种方法
2020/02/21 Python
python实现拼图小游戏
2020/02/22 Python
Jupyter notebook 启动闪退问题的解决
2020/04/13 Python
python使用Thread的setDaemon启动后台线程教程
2020/04/25 Python
python pandas dataframe 去重函数的具体使用
2020/07/20 Python
CSS3实现文本垂直排列的方法
2018/07/10 HTML / CSS
使用css3 属性如何丰富图片样式(圆角 阴影 渐变)
2012/11/22 HTML / CSS
丝芙兰法国官网:SEPHORA法国
2016/09/01 全球购物
Notino希腊:购买香水和美容产品
2019/07/25 全球购物
中国跨镜手机配件批发在线商店:TVC-Mall
2019/08/20 全球购物
金融学专科生自我鉴定
2014/02/21 职场文书
人事部岗位职责范本
2014/03/05 职场文书
幼儿园中班开学寄语
2014/04/03 职场文书
2014红色之旅心得体会
2014/10/07 职场文书
离婚协议书范文2016
2016/03/18 职场文书