闭包介绍
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<script>
//闭包
/*
* 闭包的概念:函数A中,有一个函数B,函数B中可以访问函数A中定义的变量或者是数据,此时形成了闭包(这句话暂时不严谨)
* 闭包的模式:函数模式的闭包,对象模式的闭包
* 闭包的作用:缓存数据,延长作用域链
* 闭包的优点和缺点:缓存数据
*
* 闭包的应用
*
*
* */
//函数模式的闭包:在一个函数中有一个函数
// 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 f1() {
// var num=10;
// return function () {
// console.log(num);
// return num;
// }
// }
//
// var ff= f1();
// var result= ff();
// console.log(result);
// function f2() {
// var num=100;
// return {
// age:num
// }
// }
//
// var obj= f2();
// console.log(obj.age);
</script>
</head>
<body>
</body>
</html>
闭包小案例(一)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<script>
//普通的函数
function f1() {
var num = 10;
num++;
return num;
}
console.log(f1());
console.log(f1());
console.log(f1());
//函数模式的闭包
function f2() {
var num = 10;
return function () {
num++;
return num;
}
}
var ff = f2();
console.log(ff());//11
console.log(ff());//12
console.log(ff());//13
</script>
</head>
<body>
</body>
</html>
闭包小案例（二）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<script>
function showRandom() {
var num=parseInt(Math.random()*10+1);
console.log(num);
}
showRandom();
showRandom();
showRandom();
//闭包的方式,产生三个随机数,但是都是相同的
function f1() {
var num=parseInt(Math.random()*10+1);
return function () {
console.log(num);
}
}
var ff=f1();
ff();
ff();
ff();
//总结:如果想要缓存数据,就把这个数据放在外层的函数和里层的函数的中间位置
//闭包的作用:缓存数据.优点也是缺陷,没有及时的释放
//局部变量是在函数中,函数使用结束后,局部变量就会被自动的释放
//闭包后,里面的局部变量的使用作用域链就会被延长
</script>
</head>
<body>
</body>
</html>
闭包小案例（三）--------模拟点赞
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>对自己狠点</title>
<style>
ul {
list-style-type: none;
}
li {
float: left;
margin-left: 10px;
}
img {
width: 200px;
height: 180px;
}
input {
margin-left: 30%;
}
</style>
<script>
//$永远都是24k纯帅的十八岁的杨哥$
</script>
</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 my$(tagName) {
return document.getElementsByTagName(tagName);
}
//闭包缓存数据
function getValue() {
var value=2;
return function () {
//每一次点击的时候,都应该改变当前点击按钮的value值
this.value="赞("+(value++)+")";
}
}
//获取所有的按钮
var btnObjs=my$("input");
//循环遍历每个按钮,注册点击事件
for(var i=0;i<btnObjs.length;i++){
//注册事件
btnObjs[i].onclick=getValue();
}
// var btnObjs=my$("input");
// var value=1;
// //循环遍历每个按钮
// for(var i=0;i<btnObjs.length;i++){
//
// //为每个按钮注册点击事件
// btnObjs[i].onclick=function () {
// console.log("哈哈");
// this.value="赞("+(value++)+")";
// };
// }
</script>
</body>
</html>
效果展示：
view.gif
沙箱
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<script>
//沙箱:环境,黑盒,在一个虚拟的环境中模拟真实世界,做实验,实验结果和真实世界的结果是一样
//但是不会影响真实世界
// var num=10;
// console.log(num+10);
// //沙箱---小环境
// (function () {
// var num=10;
// console.log(num);
// })();
//
// //沙箱---小环境
// (function () {
// var num=20;
// console.log(num+10);
// }());
// var num=100;
// (function () {
// var num=10;
// console.log(num);//10
// }());
//
//
// console.log(num);//100
</script>
</head>
<body>
</body>
</html>
欢迎关注我的个人微信公众号，免费送计算机各种最新视频资源！你想象不到的精彩！
0.jpg
网友评论