<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>閉包</title>
</head>
<body>
<li>零</li>
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
<script>
//jS閉包
//概念：簡單的說就是一個函式外部變數被該函式呼叫，這樣這個函式就形成了一個閉包
//demo1：
// function out() {
// var a = 100;
// }
// out()
// console.log(a); //輸出：a is not defined，
//out()函式執行之后函式執行空間被銷毀，因為此時a已經不存在了，無法被外部訪問
//demo2：
// function out() {
// var a = 100;
// return function () {
// a++
// console.log(a);
// }
// }
// var b = out();
// b(); //輸出：101
// b(); //輸出：102 此時的a是區域變數，但是被其內部匿名函式呼叫,所以在out()執行之后，回傳匿名函式被變數b接收
// //因為匿名函式呼叫了out函式里面的a，所以out的記憶體空間并沒有被銷毀，b每次執行a在原有基礎上++
//demo3:
// var li = document.getElementsByTagName("li")
// function out() {
// for (var i = 0; i < 5; i++) {
// li[i].onclick = function () {
// console.log(i);
// }
// }
// }
// out(); //輸出：不管點哪個，輸出都是5，li在回圈的時候已經分別系結匿名函式0-4，
//匿名函式里面的i就是out函式的內部變數i，在out()執行完之后已經回圈到5了，所以不管點哪個都是5
//稍作修改
//demo4:
// var li = document.getElementsByTagName("li")
// function out() {
// for (var i = 0; i < 5; i++) {
// li[i].onclick = (function (j) {
// return function () {
// console.log(j);
// }
// })(i)
// }
// }
// out(); //點幾輸出幾，li系結了立即執行函式的回傳值(也是個匿名函式)，把i傳入匿名函式形參j，這樣
//立即執行函式執行完之后形參j不會被銷毀,而是被它的內部函式呼叫，所以每次點擊li就能呼叫相應的j，回傳0,1,2,3,4
//但是let關鍵字可以很好的代替這個功能
//demo5:
// var li = document.getElementsByTagName("li")
// function out() {
// for (let i = 0; i < 5; i++) {
// li[i].onclick = function () {
// console.log(i);
// }
// }
// }
// out(); //效果同上，點幾顯示幾
//總結：
//閉包的作用：1.呼叫函式區域變數給外部使用
//缺點:1.由于一個函式區域變數被其他函式呼叫，所以這個區域變數就會一直存在，占用較大記憶體
// 2.有記憶體泄漏風險
//如有錯誤，歡迎指正
***如果你知道身上肩負著多少希望,你就能面對任何事***
</script>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/146313.html
標籤：JavaScript
上一篇：前端的一些性能提升