閉包介紹
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<script>
//閉包
/*
* 閉包的概念:函數(shù)A中,有一個函數(shù)B,函數(shù)B中可以訪問函數(shù)A中定義的變量或者是數(shù)據(jù),此時形成了閉包(這句話暫時不嚴謹)
* 閉包的模式:函數(shù)模式的閉包,對象模式的閉包
* 閉包的作用:緩存數(shù)據(jù),延長作用域鏈
* 閉包的優(yōu)點和缺點:緩存數(shù)據(jù)
*
* 閉包的應用
*
*
* */
//函數(shù)模式的閉包:在一個函數(shù)中有一個函數(shù)
// function f1() {
// var num=10;
// //函數(shù)的聲明
// function f2() {
// console.log(num);
// }
// //函數(shù)調(diào)用
// f2();
// }
// f1();
//對象模式的閉包:函數(shù)中有一個對象
// 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>
//普通的函數(shù)
function f1() {
var num = 10;
num++;
return num;
}
console.log(f1());
console.log(f1());
console.log(f1());
//函數(shù)模式的閉包
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();
//閉包的方式,產(chǎn)生三個隨機數(shù),但是都是相同的
function f1() {
var num=parseInt(Math.random()*10+1);
return function () {
console.log(num);
}
}
var ff=f1();
ff();
ff();
ff();
//總結(jié):如果想要緩存數(shù)據(jù),就把這個數(shù)據(jù)放在外層的函數(shù)和里層的函數(shù)的中間位置
//閉包的作用:緩存數(shù)據(jù).優(yōu)點也是缺陷,沒有及時的釋放
//局部變量是在函數(shù)中,函數(shù)使用結(jié)束后,局部變量就會被自動的釋放
//閉包后,里面的局部變量的使用作用域鏈就會被延長
</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>
//獲取所有的按鈕
//根據(jù)標簽名字獲取元素
function my$(tagName) {
return document.getElementsByTagName(tagName);
}
//閉包緩存數(shù)據(jù)
function getValue() {
var value=2;
return function () {
//每一次點擊的時候,都應該改變當前點擊按鈕的value值
this.value="贊("+(value++)+")";
}
}
//獲取所有的按鈕
var btnObjs=my$("input");
//循環(huán)遍歷每個按鈕,注冊點擊事件
for(var i=0;i<btnObjs.length;i++){
//注冊事件
btnObjs[i].onclick=getValue();
}
// var btnObjs=my$("input");
// var value=1;
// //循環(huán)遍歷每個按鈕
// 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>
//沙箱:環(huán)境,黑盒,在一個虛擬的環(huán)境中模擬真實世界,做實驗,實驗結(jié)果和真實世界的結(jié)果是一樣
//但是不會影響真實世界
// var num=10;
// console.log(num+10);
// //沙箱---小環(huán)境
// (function () {
// var num=10;
// console.log(num);
// })();
//
// //沙箱---小環(huán)境
// (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>
歡迎關(guān)注我的個人微信公眾號，免費送計算機各種最新視頻資源！你想象不到的精彩！
0.jpg
