JavaScript 閉包的使用場景

更新時間：2020年09月17日 11:10:46 作者：guoqi

這篇文章主要介紹了JavaScript 閉包的使用場景，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下

一、閉包

　　由于在Javascript語言中，只有函數(shù)內部的子函數(shù)才能讀取局部變量，閉包就是能夠讀取其他函數(shù)內部變量的函數(shù)。所以，在本質上，閉包就是將函數(shù)內部和函數(shù)外部連接起來的一座橋梁。

　　比如下面的代碼：

function f1() {
 var n = 999;
 function f2() {
 console.log(n);
 }
 return f2;
}
var result = f1();
result();//999

　　函數(shù)f2就被包括在函數(shù)f1內部，這時f1內部的所有局部變量，對f2都是可見的。但是反過來就不行，f2內部的局部變量，對f1就是不可見的。

　　這就是Javascript語言特有的"鏈式作用域"結構（chain scope），子對象會一級一級地向上尋找所有父對象的變量。所以，父對象的所有變量，對子對象都是可見的，反之則不成立。

　　既然f2可以讀取f1中的局部變量，那么只要把f2作為返回值，就可以在f1外部讀取它的內部變量了。

二、閉包的使用場景

1.setTimeout

　　原生的setTimeout傳遞的第一個函數(shù)不能帶參數(shù)，通過閉包可以實現(xiàn)傳參效果。

function f1(a) {
 function f2() {
  console.log(a);
 }
 return f2;
}
var fun = f1(1);
setTimeout(fun,1000);//一秒之后打印出1

2.回調

　　定義行為，然后把它關聯(lián)到某個用戶事件上（點擊或者按鍵）。代碼通常會作為一個回調（事件觸發(fā)時調用的函數(shù)）綁定到事件。

　　比如下面這段代碼：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>測試</title>
</head>
<body>
 <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="size-12">12</a>
 <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="size-20">20</a>
 <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="size-30">30</a>

 <script type="text/javascript">
  function changeSize(size){
   return function(){
    document.body.style.fontSize = size + 'px';
   };
  }

  var size12 = changeSize(12);
  var size14 = changeSize(20);
  var size16 = changeSize(30);

  document.getElementById('size-12').onclick = size12;
  document.getElementById('size-20').onclick = size14;
  document.getElementById('size-30').onclick = size16;

 </script>
</body>
</html>

　　當點擊數(shù)字時，字體也會變成相應的大小。

3.函數(shù)防抖

　　在事件被觸發(fā)n秒后再執(zhí)行回調，如果在這n秒內又被觸發(fā)，則重新計時。

　　實現(xiàn)的關鍵就在于setTimeOut這個函數(shù)，由于還需要一個變量來保存計時，考慮維護全局純凈，可以借助閉包來實現(xiàn)。

　　如下代碼所示：

/*
* fn [function] 需要防抖的函數(shù)
* delay [number] 毫秒，防抖期限值
*/
function debounce(fn,delay){
 let timer = null //借助閉包
 return function() {
  if(timer){
   clearTimeout(timer) //進入該分支語句，說明當前正在一個計時過程中，并且又觸發(fā)了相同事件。所以要取消當前的計時，重新開始計時
   timer = setTimeOut(fn,delay) 
  }else{
   timer = setTimeOut(fn,delay) // 進入該分支說明當前并沒有在計時，那么就開始一個計時
  }
 }
}

4.封裝私有變量

　　如下面代碼：用js創(chuàng)建一個計數(shù)器

　　方法1:

function f1() {
 var sum = 0;
 var obj = {
  inc:function () {
   sum++;
   return sum;
  }
};
 return obj;
}
let result = f1();
console.log(result.inc());//1
console.log(result.inc());//2
console.log(result.inc());//3

　　在返回的對象中，實現(xiàn)了一個閉包，該閉包攜帶了局部變量x，并且，從外部代碼根本無法訪問到變量x。

　　方法2:

function f1() {
 var sum = 0;
 function f2() {
  sum++;
  return f2;
 }
 f2.valueOf = function () {
  return sum;
 };
 f2.toString = function () {
  return sum+'';
 };
 return f2;
}
//執(zhí)行函數(shù)f1，返回的是函數(shù)f2
console.log(+f1());//0
console.log(+f1()())//1
console.log(+f1()()())//2

所有js數(shù)據(jù)類型都擁有valueOf和toString這兩個方法，null除外
valueOf()方法：返回指定對象的原始值。
toString()方法：返回對象的字符串表示。
在數(shù)值運算中，優(yōu)先調用了valueOf，字符串運算中，優(yōu)先調用toString
sum+' '是一個字符串類型的數(shù)據(jù)

以上就是JavaScript 閉包的使用場景的詳細內容，更多關于JavaScript 閉包的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: