1.應用

以下這幾個方面是我們開發(fā)中最為常用到的，同時也是面試中回答比較穩(wěn)的幾個方面。

1.1 模擬私有變量

我們都知道JS是基于對象的語言，JS強調的是對象，而非類的概念，在ES6中，可以通過class關鍵字模擬類，生成對象實例。

通過class模擬出來的類，仍然無法實現傳統面向對象語言中的一些能力 —— 比如私有變量的定義和使用。

我們通過看這樣一個User類來了解私有變量（偽代碼，不能直接運行）

class User{
  constructor(username,password){
  // 用戶名
  this.username = username
  // 密碼
  this.password = password
  }
  
  login(){
    // 使用axious進行登錄請求
    axios({
      method: 'GET',
      url: 'http://127.0.0.1/server', 
      params: {
        username,
        password
      },
    }).then(response => {
      console.log(response);
    });
  }
}

在這個User類里，我們定義了一些屬性，和一個login方法，我們嘗試輸出password這個屬性。

  let user = new User('小明',123456)
  user.password  // 123465

我們發(fā)現，登錄密碼這么關鍵敏感的信息，竟然可以通過一個簡單的屬性就可以拿到，這就意味著，后面人只有拿到user這個對象，就可以非常輕松的獲取，甚至改寫他的密碼。 在實際的業(yè)務開發(fā)中，這是一個非常危險的操作，我們需要從代碼的層面保護password。

像password這樣變量，我們希望它只在函數內部，或者對象內部方法訪問到，外部無法觸及。 這樣的變量，就是私有變量，私有變量一般使用 _ 或雙 _ 定義。

在類里聲明變量的私有性，我們可以借助閉包實現，我們的思路就是把我們把私有變量放在最外層立即執(zhí)行函數中，并通過立即執(zhí)行User這個函數，創(chuàng)造了一個閉包作用域的環(huán)境。

// 利用IIFE生成閉包，返回user類
const User = (function () {
    // 定義私有變量_password
    let _password

    class User {
        constructor(username, password) {
            // 初始化私有變量_password
            _password = password
            this.username = username
        }

        login() {
            console.log(this.username, _password)

        }
    }

    return User
})()

let user = new User('小明',123465)
console.log(user.username); // 小明
console.log(user.password); // undefined
console.log(user._password); //undefined
user.login(); // 小明 undefined

在這段代碼中，私有變量_password被好好的保護在User這個立即執(zhí)行函數內部，此時實例暴露的屬性已經沒有_password，通過閉包，我們成功利用了自由變量模擬私有變量的效果。

1.2 柯里化

定義一個函數，該函數返回一個函數。 柯里化是把接收 n個參數的1個函數改造為只接收1個參數的n個互相嵌套的函數的過程。也就是從fn(a,b,c)變成fn(a)(b)(c)。

我們通過以下案例進行深入理解：以慕課網為例，我們使用site（站點）、type（課程類型）、name（課程名稱）三個字符串拼接的方式為課程生成一個完整版名稱。對應方法如下：

function generateName(site,type,name){
  return site + type + name
}

我們看到這個函數需要傳遞三個參數，此時如果我是課程運營負責人，如我只負責“體系課”的業(yè)務，那么我每次生成課程時，都會固定傳參site，像這樣傳參：

generateName('體系課',type,name)

如果我是細分工種的前端助教，我僅僅負責“體系課”站點下的“前端”課程，那么我進行傳參就是這樣：

generateName('體系課','前端',name)

我們不難發(fā)現，調用generateName時，真正的變量只有一個，但是我每次不得不把前兩個參數手動傳一遍。此時，我們的柯里化就出現了，柯里化可以幫助我們在必要情況下，記住一部分參數。

function generateName(site){
  // var site = '體系課'
  return function(type){
    // var type = '前端'
    return function(name){
      // var name = '零基礎就業(yè)班'
      return prefix + type + name
    }
  }
}

// 生成體系課專屬函數
var salesName = generateName('體系課');

// “記住”site，生成體系課前端課程專屬函數
var salesBabyName = salesName('前端')

// 輸出 '體系課前端零基礎就業(yè)班'
res = salesBabyName('零基礎就業(yè)班')
console.log(res)

我們可以看到，在生成體系課專屬函數中，我們將site作為實參傳遞給generateName函數中，將site的值保留在generateName內部作用域中。

在生成體系課前端課程函數中，將type的值保留在salesBabyName函數中，最終調用salesBabyName函數，輸出。

這樣一來，原有的generateName (site, type, name)函數經過柯里化變成了generateName(site)(type)(name)。通過后者這種形式，我們可以記住一部分形參，選擇性的傳遞參數，從而編寫出更符合預期，復用性更高的函數。

function generateName(site){
   // var site = '實戰(zhàn)課'
   return function(type){
     // var type = 'Java'
     return function(name){
       // var name = '零基礎'
       return site + type + name
      }
    }
}
  
// "記住“site和type，生成實戰(zhàn)課java專屬函數
var shiZhanName = generateName('實戰(zhàn)課')('Java')
console.log(shiZhanName);

// 輸出 '實戰(zhàn)課java零基礎'
var res = shiZhanName('零基礎')
console.log(res)

 // 啥也不記，直接生成一個完整課程
var itemFullName = generateName('實戰(zhàn)課')('大數據')('零基礎')
console.log(itemFullName);

1.3 偏函數

偏函數和柯里化類似，如果理解了柯里化，那么偏函數就小菜一碟了。

柯里化是將一個n個參數的函數轉化成n個單參數函數，這里假如你有三個入參，你得嵌套三層函數，且每層函數只能有一個入參?？吕锘哪繕耸前押瘮挡鸾鉃榫珳实膎部分。

偏函數相比之下就比較隨意了，偏函數是固定函數中的某一個或幾個參數，然后返回一個新的函數。假如你有三個入參，你可以只固定一個入參，然后返回另一個入參函數。也就是說，偏函數應用是不強調 “單參數” 這個概念的。

仍然是上面的例子，原函數形式調用：

function generateName(site,type,name){
  return site + type + name;
}

// 調用時傳入三個參數
var itemFullName = generateName('體系課', '前端', '2022')

偏函數改造：

function generateName(site){
    return function(type,name){
      return site + type + name
    }
}
// 把3個參數分兩部分傳入
var itemFullName = generateName('體系課')('前端', '2022')

1.4 防抖

在瀏覽器的各種事件中，有一些容易頻繁觸發(fā)的事件，比如scroll、resize、鼠標事件（比如 mousemove、mouseover）、鍵盤事件（keyup、keydown ）等。頻繁觸發(fā)回調導致大量的計算會引發(fā)頁面抖動甚至卡頓，影響瀏覽器性能。防抖和節(jié)流就是控制事件觸發(fā)的頻率的兩種手段。

防抖的中心思想是：在某段時間內，不管你觸發(fā)了多少次回調，我都只執(zhí)行最后一次。

// fn是我們需要包裝的事件回調, delay是每次推遲執(zhí)行的等待時間
function debounce(fn, delay) {
  // 定時器
  let timer = null
  
  // 將debounce處理結果當作函數返回
  return function () {
    // 保留調用時的this上下文
    let context = this
    // 保留調用時傳入的參數
    let args = arguments
    // 每次事件被觸發(fā)時，都去清除之前的舊定時器
    if(timer) {
        clearTimeout(timer)
    }
    // 設立新定時器
    timer = setTimeout(function () {
      fn.apply(context, args)
    }, delay)
  }
}
// 用debounce來包裝scroll的回調
const better_scroll = debounce(() => console.log('觸發(fā)了滾動事件'), 1000)
document.addEventListener('scroll', better_scroll)

1.5 節(jié)流

節(jié)流的中心思想是：在某段時間內，不管你觸發(fā)了多少次回調，我都只認第一次，并在計時結束時給予響應，也就是隔一段時間執(zhí)行一次。

// fn是我們需要包裝的事件回調, interval是時間間隔的閾值
function throttle(fn, interval) {
  // last為上一次觸發(fā)回調的時間
  let last = 0
  
  // 將throttle處理結果當作函數返回
  return function () {
      // 保留調用時的this上下文
      let context = this
      // 保留調用時傳入的參數
      let args = arguments
      // 記錄本次觸發(fā)回調的時間
      let now = +new Date()
      
      // 判斷上次觸發(fā)的時間和本次觸發(fā)的時間差是否小于時間間隔的閾值
      if (now - last >= interval) {
      // 如果時間間隔大于我們設定的時間間隔閾值，則執(zhí)行回調
          last = now;
          fn.apply(context, args);
      }
    }
}
// 用throttle來包裝scroll的回調
const better_scroll = throttle(() => console.log('觸發(fā)了滾動事件'), 1000)
document.addEventListener('scroll', better_scroll)

2.性能問題

以上我們講解了閉包的常見應用，可見閉包是一個非常強大的特性，但人們對其也有諸多誤解。一種聳人聽聞的說法是閉包會造成內存泄露，所以要盡量減少閉包的使用。真的是這樣嗎？

2.1 內存泄漏

該釋放的變量沒有釋放，依然占據著內存空間，導致內存占用不斷攀高，帶來性能惡化，系統崩潰等一系列問題，這種現象叫做內存泄漏。

閉包里的變量是我們需要的變量本就不該釋放，而又怎么稱之為內存泄漏呢？

所以有關內存泄露問題，是謠言，是誤傳。

這個誤傳來源于IE，IE在我們使用完閉包之后，依然會受不了里面的變量，而這是IE的bug，不是閉包問題。

如果還不放心，我們來看以下例子：

function f1(){
    var num  = Math.randon();
    function f2(){
      return num
    } 
    return f2
}

var f = f1();
f();

上面這段代碼，f2函數中存在對變量num的引用，所以num變量并不會回收，我們可以，在函數調用后，可以把外部引用關系置空，如下：

function f1(){
    var num  = Math.randon();
    function f2(){
      return num
    } 
    return f2
}

var f = f1();
f();
f = null;

事實上，閉包導致的內存泄漏是誤傳，閉包中引用的變量，其實也就相當于一個全局變量，并不會構成內存泄漏問題，內存泄漏大多原因是由于代碼不規(guī)范導致。

2.2 常見的內存泄漏

2.21 不必要的全局變量

function f1() {
  name = '小明'
}

在非嚴格模式下引用未聲明的變量，會在全局對象中創(chuàng)建一個新變量，在瀏覽器中，全局對象是window，這就意味著name這個變量將泄漏到全局。全局變量是在網頁關閉時才會釋放，這樣的變量一多，內存壓力也會隨之增高。

2.22 遺忘清理的計時器

程序中我們經常會用到計時器，也就是setInterval和setTimeout

var timeId = setInterval(function(){
  // 函數體
},1000)

在計時器中，定時器內部邏輯是是無窮無盡的，當定時器囊括的函數邏輯不再被需要、而我們又忘記手動清除定時器時，它們就會永遠保持對內存的占用。因此當我們使用定時器時，一定要明確計時器在何時會被清除，并使用 clearInterval(timeId)手動清除定時器。

2.23 遺忘清理的dom元素引用

var divObj = document.getElementById('mydiv')

// dom刪除myDiv
document.body.removeChild(divObj);
console.log(divObj);
// 能console出整個div 說明沒有被回收，引用存在

// 移出引用
divObj = null;
console.log(divObj) 
// null

3.閉包與循環(huán)體

閉包和循環(huán)體的結合，是閉包最為經典的一種考察方式。

3.1 這段代碼輸出啥

我們來看一個大家非常熟悉的題目，以上6行代碼輸出什么？

for(var i=0; i<5; i++){
  setTimeout(function(){
    console.log(i)
  },1000)
}
console.log(i)

如果你是剛入門的新手，你可能會給出這樣的答案：

0 1 2 3 4 5  

給出這樣答案的同學，內心一般都是這樣想：for循環(huán)輸出了0-4個i的值，最后一行打印5，setTimeout這個好像在哪見過，但具體咋回事印象不深了，干脆直接忽略好了。

對于基礎還不錯的同學，對于setTimeout函數用法特性還有印象，很快就給出了“進化版”答案：

5 0 1 2 3 4  

這一部分的同學是這樣想的：for循環(huán)逐個輸出0-4的值，但是setTimeout把輸入延遲了1s，所以最后一行先執(zhí)行，先輸出5，然后過了1000ms，0-4會逐個輸出。

如果你對JS中的for循環(huán)、同步與異步區(qū)別、變量作用域、閉包有正確理解，就知道正確答案應該是：

5 5 5 5 5 5 

我們試著分析一下正確答案，seTimeout內函數延遲1000ms后執(zhí)行，最后一行console先輸出，最后一行輸出5，所以第一個值是5。

for(var i =0;i<5;i++){
  // 5<5? 不滿足 
}
console.log(i) // 5

for循環(huán)里setTimeout執(zhí)行了5次，函數延遲1000ms執(zhí)行，大家看這個函數，它自身作用域壓根就沒有i這個變量，根據作用域鏈查找規(guī)則，要想輸出i，需要去上層查找。

setTimeout(function() {
   console.log(i);
}, 1000);

但是，這個函數第一次被執(zhí)行也是1000ms以后的事情了，此時它試圖向上一層作用域（這里也就是全局作用域）去找一個叫i的變量，此時for循環(huán)已執(zhí)行完畢，i也進入了最終狀態(tài)5。所以當1000ms后，這個函數真正被執(zhí)行的時候，引用到的i值已經是5了。 此時，這段代碼的作用域狀態(tài)示意如下：

對應的作用域關系如下：

接下來的連續(xù)四次，都會有一個一模一樣的setTimeout回調被執(zhí)行，它輸出的也是同一個全局的i，所以說每一次輸出都是5。

3.2 改造方法

循環(huán)了五次，每次卻輸出一個值，這種輸出效果顯然不好。如果我們希望讓i從0-4依次被輸出，我們改如何改造呢？

方案一：利用setTimeout中第三個參數

開頭我們先復習一下setTimeout參數用法：

setTimeout(function(arg1,arg2){
  console.log(arg1);
  console.log(arg2);
},delay,arg1,arg2)

• function（必須）：調用函數執(zhí)行的代碼塊
• delay（可選）：函數調用延遲的毫秒值，默認是0，意味著馬上執(zhí)行
• arg1,...arg2（可選）：附加參數，當計時器啟動時，會作為參數傳遞給function

我們來看例子：

setTimeout(function(a,b){
  console.log(a);  // 1
  console.log(b);  // 2
},1000,1,2)

需要注意的一點是，附加參數只支持在ie9及以上瀏覽器，如要兼容，需要引入一段MDN提供的兼容舊IE代碼。

利用setTimeout的第三個參數，i作為形參傳遞給setTimeout的j，由于每次傳入的參數是從for循環(huán)里面取到的值，所以會依次輸出0~4：

for(var i=0; i<5; i++){
  setTimeout(function(j){
    console.log(j) // 0 1 2 3 4 
  },1000,i)
}

方案二：使用閉包

使用閉包，我們往往會用到匿名函數。匿名函數也叫一次性函數，在函數定義時執(zhí)行，且只執(zhí)行一次。我們在setTimeout外面套一個匿名函數，利用匿名函數的實參來緩存每一個循環(huán)的i值。

for(var i= 0; i<5; i++){
  (function(j){
    setTimeout(function(){
      console.log(j)
    },1000)
  })(i)
}

當輸出j時，引用的是外部函數傳遞的變量i，這個i是根據循環(huán)來的，執(zhí)行setTimeout時已經確定了里面i的值，進而確定了j的值。

方案三：使用let

for(let i= 0; i<5; i++){
  setTimeout(function(){
    console.log(i)
  },1000)
 }

for循環(huán)每次循環(huán)產生一個新的塊級作用域，每個塊級作用域的變量是不同的。函數輸出的是自己的上一級（循環(huán)產生的塊級作用域）下i的值。

4.總結

• 作用：模擬私有變量、柯里化、偏函數、防抖、節(jié)流、實現緩存。
• 模擬私有變量：將私有變量放在外在的立即執(zhí)行函數中，并通過立即執(zhí)行U這個函數，創(chuàng)造一個閉包環(huán)境（私有變量：只允許函數內部，或對象方法訪問的變量）。
• 柯里化：把接受n個參數的一個函數轉化成只接受一個參數n個函數互相嵌套的函數過程，目標是把函數拆解為精準的n部分，也就是將fn(a,b,c)轉化成fn(a)(b)(c)的過程。
• 偏函數：固定函數中的某一個或幾個參數，然后返回一個新的函數，不強調但函數。
• 防抖：只執(zhí)行最后一次。
• 節(jié)流：隔一段時間執(zhí)行一次。
• 緩存變量：計時器打印問題。
• 閉包造成內存泄露問題是誤傳，誤傳來源于IE瀏覽器bug，可以放心大膽使用。

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