js閉包的應用

• 一、阻止垃圾回收機制
• 二、建立私有變量
• 三、避免污染全局變量
• 四、防抖的應用

一、阻止垃圾回收機制

在js中，閉包可以了解為能夠通路其他函數内部變量的函數，常見的閉包如下

function fn() {
  let a = 0;

  return function () {
    console.log(++a);
  }
}

let f = fn();
f(); // 1
f(); // 2
           

其中，被包含在fn函數中，并被傳回的函數就是一個閉包函數。由于作用域鍊的特性，内層函數可以通路外層函數的變量，是以閉包函數通路了fn中的變量a，并被全局變量f引用。js的垃圾回收器會在函數執行結束之後清除不再被引用的變量，而在fn執行之後，由于變量a在全局作用域中被引用，是以垃圾回收機制不會作用于變量a，即如果我們不手動清除，a會一直存在記憶體中。這就是閉包的特性之一，可以阻止垃圾回收機制。

二、建立私有變量

function privateValue() {
    var value;
 
    this.set = function(v) {
        value= v;
    };
 
    this.get = function() {
        return value;
    };
}
var x = new privateValue();
x.set("haha");
 
console.log(x.value); // undefined
console.log(x.get()); // haha
           

在js中，外層函數是無法讀取内層函數的變量的。利用閉包的特性，我們可以實作設定并擷取函數内部變量，以此達到建立私有變量的效果。

三、避免污染全局變量

在寫原生js或者jQuery代碼時，可能會遇到變量重複命名導緻沖突的情況，我們可以利用閉包來避免。

var a = 0;

(function() {
  var a = 1;
  
  console.log(a); // 1
})()

console.log(a); // 0
           

四、防抖的應用

function debounce(fn, delay = 500) {
  let timer = null;
  
  return function() {
    if (timer) {
      clearTimeout(timer);
      timer = null;
    }
    
    timer = setTimeout(() => {
      fn();
    }, delay);
  }
}

function fn() {
  console.log('哈哈哈');
}

setInterval(debounce(fn), 1000)
           

防抖是使用者快速操作的情況下，對性能的優化的一種方案，它規定隻能在使用者停止操作的一段時間後才執行，也是利用了閉包的特性，将定時器存儲在記憶體中。