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 相关文章推荐
Javascript+XMLHttpRequest+asp.net无刷新读取数据库数据
Aug 09 Javascript
extjs 学习笔记(三) 最基本的grid
Oct 15 Javascript
用jquery生成二级菜单的实例代码
Jun 24 Javascript
JavaScript结合AJAX_stream实现流式显示
Jan 08 Javascript
多功能jQuery树插件zTree实现权限列表简单实例
Jul 12 Javascript
JavaScript闭包_动力节点Java学院整理
Jun 27 Javascript
vue 里面使用axios 和封装的示例代码
Sep 01 Javascript
简单谈谈JS中的正则表达式
Sep 11 Javascript
JavaScript实现省市联动过程中bug的解决方法
Dec 04 Javascript
点击按钮弹出模态框的一系列操作代码实例
Mar 29 Javascript
解决ie11 SCRIPT5011:不能执行已释放Script的代码问题
May 05 Javascript
javascript设计模式 ? 解释器模式原理与用法实例分析
Apr 17 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
我的论坛源代码(八)
2006/10/09 PHP
一个可以找出源代码中所有中文的工具
2006/10/25 PHP
深入php中var_dump方法的使用详解
2013/06/24 PHP
php使用include 和require引入文件的区别
2017/02/16 PHP
php使用curl模拟多线程实现批处理功能示例
2019/07/25 PHP
document.designMode的功能与使用方法介绍
2007/11/22 Javascript
js判断IE6/IE7/FF的代码[XMLHttpRequest]
2011/02/16 Javascript
JQuery一种取同级值的方式(比如你在GridView中)
2012/03/15 Javascript
js 绑定键盘鼠标事件示例代码
2014/02/12 Javascript
js类型转换与引用类型详解(Boolean_Number_String)
2014/03/07 Javascript
js实现刷新iframe的方法汇总
2015/04/27 Javascript
jquery拖拽效果完整实例(附demo源码下载)
2016/01/14 Javascript
学习JavaScript设计模式之迭代器模式
2016/01/19 Javascript
详解微信小程序 template添加绑定事件
2017/06/23 Javascript
vue2使用keep-alive缓存多层列表页的方法
2018/09/21 Javascript
javascript判断一个变量是数组还是对象
2019/04/10 Javascript
jQuery实现判断滚动条滚动到document底部的方法分析
2019/08/27 jQuery
小程序实现长按保存图片的方法
2019/12/31 Javascript
javascript+css实现俄罗斯方块小游戏
2020/06/28 Javascript
[01:00:30]TFT vs VGJ.T Supermajor 败者组 BO3 第一场 6.5
2018/06/06 DOTA
python使用socket进行简单网络连接的方法
2015/04/29 Python
python requests 使用快速入门
2017/08/31 Python
Python排序算法之选择排序定义与用法示例
2018/04/29 Python
keras做CNN的训练误差loss的下降操作
2020/06/22 Python
深入理解css中vertical-align属性
2017/04/18 HTML / CSS
党委书记岗位职责
2013/11/24 职场文书
劳资人员岗位职责
2013/12/19 职场文书
房屋转让协议书
2014/04/11 职场文书
餐饮投资计划书
2014/04/25 职场文书
2015年女生节活动总结
2015/02/27 职场文书
党员转正党支部意见
2015/06/02 职场文书
幼儿园中班教育随笔
2015/08/14 职场文书
高中团支书竞选稿
2015/11/21 职场文书
古诗文之爱国名句(77句)
2019/09/24 职场文书
redis通过6379端口无法连接服务器(redis-server.exe闪退)
2021/05/08 Redis
世界无敌的ICOM IC-R9500宽频接收机
2022/03/25 无线电