技術標籤：閉包函式javascript

系列文章目錄

讓外部函式訪問內部變數成為可能。閉包概念、閉包示例、閉包案例、閉包應用

文章目錄

• 系列文章目錄
• 前言
• 一、變數作用域
• 二、閉包
• 三、閉包示例
• 四、閉包案例
• 五、閉包應用-計算打車價格
• 總結

前言

提示：大家好，今天學習了閉包函式，一起再瞭解一下吧

提示：以下是本篇文章正文內容，下面案例可供參考

一、變數作用域

示例：變數根據作用域分為兩種：全域性變數和區域性變數
區域性訪問全域性但是全域性訪問不了區域性。但是向讓外部訪問區域性該怎麼辦？—>閉包

二、閉包

三、閉包示例

程式碼如下（示例）：
1：

function fun(){
		//定義區域性變數
​		var a = “我是區域性變數”;
​		return function(){
​		alert(a);//內部函式中呼叫區域性變數
​	}
}
var b = fun();
b(); //"我是區域性區域性變數"

2：

var  num = 10
 
;
function addNumber (num1,num2){
	function sum(){
		alert(num1+num2+num)
	}
	return sum();
}
addNumber(1,2);//13

3：

 function outer(){
     var n=200
     function inner(){
         console.log(n);
     }
     return inner
 }
var fn=outer() // outer 函式執行完畢，其內部變數應該銷燬，但由於 inner 函式使用了此變數給，所以此變數一直被保留
fn()

4：

function fn(){
	var a = 3;
	return function (){
		return ++a;
	}
}
alert (in()());//4
alert(fun()());//4

四、閉包案例

利用閉包獲取索引(頁面上有四個li 獲取他們的索引)：

for (var i = 0;i<lis.length;++){
	(function(j){
		lis[j].onclick = function (){
			console.log(j)
		}
	})(i)
}

閉包應用-5秒之後，列印完所有li元素的innerHTML

	<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <script>
        var lis = document.getElementsByTagName('li');
        for (var i = 0 ; i<lis.length;i++){
            (function(j){
            //開啟定時器
            setTimeout(function () {
                console.log(lis[j].innerHTML)//輸出li裡的值
            },5000)//5s
            })(i)
        }
    </script>

五、閉包應用-計算打車價格

var car = (function() {
     var start = 13; // 起步價  區域性變數
     var total = 0; // 總價  區域性變數
     return {
       // 正常的總價
       price: function(n) {
         if (n <= 3) {
           total = start;
         } else {
           total = start + (n - 3) * 5
         }
         return total;
       },
       // 擁堵之後的費用
       yd: function(flag) {
         return flag ? total + 10 : total;
       }
    }
 })();
console.log(car.price(5)); // 23
console.log(car.yd(true)); // 33

總結

提示：這裡對文章進行總結：
```````````````````````````````

以上就是今天要講的內容，本文僅僅簡單介紹了閉包的使用，閉包函式提供了使我們快速便捷地處理資料的方法。