闭包

//函数模式的闭包,在一个函数中有一个函数
function f1() {
var num=10;
function f2() {
console.log(num);
}
f2();
}
f1();

//对象模式的闭包,函数中有一个对象
function f3() {
var num=10;
var obj={
age:num
};
console.log(obj.age);//10
}
f3();


//案例
function f4() {
var num=10;
return function () {
num++;
return num;
}
}
var ff=f4();
console.log(ff());//11
console.log(ff());//12
console.log(ff());//13

//案例:产生多个相同的随机数===数字是相同的
function f1() {
var num=parseInt(Math.random()*10+1);
return function () {
console.log(num);
}
}
var fg=f1();
fg();
fg();
fg();

/*
* 总结:
* 如果想要缓存数据,就把这个数据放在外层的函数和里层的函数的中间位置
*
* 闭包的作用:
* 缓存数据,优点也是缺陷,没有及时释放
*
* 局部变量是在函数中,函数使用结束后,局部变量就会被自动的释放
* 闭包后,里面的局部变量的使用作用域链就会被延长
*
* */


闭包案例,点赞
<style>
ul {
list-style-type: none;
}

li {
float: left;
margin-left: 10px;
}

img {
width: 200px;
height: 180px;
}

input {
margin-left: 30%;
}
</style>
</head>
<body>
<ul>
<li><img src="images/ly.jpg" alt=""><br/><input type="button" value="赞(1)"></li>
<li><img src="images/lyml.jpg" alt=""><br/><input type="button" value="赞(1)"></li>
<li><img src="images/fj.jpg" alt=""><br/><input type="button" value="赞(1)"></li>
<li><img src="images/bd.jpg" alt=""><br/><input type="button" value="赞(1)"></li>
</ul>
<script>
//获取所有标签
//根据标签名字获取元素
function ver(tagName) {
return document.getElementsByTagName(tagName);
}
//闭包缓存数据
function getValue() {
var value=2;
return function () {
//每次点击的时候,都应该改变当前点击按钮的value值
this.value="赞("+(value++)+")";
}
}
//获取所有按钮
var btnObj=ver("input");
//循环遍历每个按钮,注册点击事件
for(var i=0;i<btnObj.length;i++){
//注册事件
btnObj[i].onclick=getValue();
}
posted @ 2018-12-07 13:43  lujieting0  阅读(207)  评论(0编辑  收藏  举报