快捷導(dǎo)航

JavaScript垃圾回收與閉包舉例詳解

更新時間：2025年04月03日 08:33:32 作者：weixin_45456477

閉包和垃圾回收機制常常作為前端學(xué)習開發(fā)中的難點,也經(jīng)常在面試中遇到這樣的問題,這篇文章主要介紹了JavaScript垃圾回收與閉包的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

垃圾回收

標記清除

當變量進入環(huán)境時，將其標記為“進入環(huán)境”。當變量離開環(huán)境時，則將其標記為“離開環(huán)境”。垃圾回收器會銷毀那些帶標記的值，并回收它們所占用的內(nèi)存空間。

function test() {
  var a = 1; // 函數(shù)調(diào)用時 被標記 進入上下文
}
test(); // 函數(shù)執(zhí)行完畢，a的標記去掉，被回收

引用計數(shù)

當聲明一個變量并將一個引用類型值賦給該變量時，則這個值的引用次數(shù)就是1。如果同一個值又被賦給另一個變量，則該值的引用次數(shù)加1。相反，如果包含對這個值引用的變量又取得了另外一個值，則這個值的引用次數(shù)減1。當這個值的引用次數(shù)變成0時，則說明沒有辦法再訪問這個值了，因而就可以將其占用的內(nèi)存空間回收回來。當垃圾回收器下次再運行時，它就會釋放那些引用次數(shù)為0的值所占用的內(nèi)存。

function test() {
  var a = {}; // a的引用次數(shù)為0，被回收
  var b = a; // a的引用次數(shù)加1，為1
  var c = a; // a的引用次數(shù)再加1，為2
  a = 1; // a的引用次數(shù)減1，為1
  b = 1; // a的引用次數(shù)減1，為0，可以被回收了
  c = 1; // a的引用次數(shù)減1，為0，可以被回收了
}

閉包

閉包是指有權(quán)訪問另一個函數(shù)作用域中的變量的函數(shù)。創(chuàng)建閉包的常見方式，就是在一個函數(shù)內(nèi)部創(chuàng)建另一個函數(shù)。閉包使得函數(shù)可以繼續(xù)訪問定義時的詞法作用域。

閉包的另一個用處，是封裝私有變量。

function createCounter() {
  let count = 0;
  return {
    increment: function () {
      count++;
    },
    getCount: function () {
      return count;
    },
  };
}

const counter = createCounter();
counter.increment();
console.log(counter.getCount()); // 1

閉包的缺點：

由于閉包會使得函數(shù)中的變量都被保存在內(nèi)存中，內(nèi)存消耗很大，所以不能濫用閉包，否則會造成網(wǎng)頁的性能問題，在IE中可能導(dǎo)致內(nèi)存泄露。解決方法是，在退出函數(shù)之前，將不使用的局部變量全部刪除。
閉包會在父函數(shù)外部，改變父函數(shù)內(nèi)部變量的值。所以，如果你把父函數(shù)當作對象（object）使用，把閉包當作它的公用方法（Public Method），把內(nèi)部變量當作它的私有屬性（private value），這時一定要小心，不要隨便改變父函數(shù)內(nèi)部變量的值。
閉包的缺點就是常駐內(nèi)存，會增大內(nèi)存使用量，并且使用不當很容易造成內(nèi)存泄露。

閉包的用途

創(chuàng)建私有變量

function createCounter() {
  let count = 0;
  return {
    increment: function () {
      count++;
    },
    getCount: function () {
      return count;
    },
  };
}

模擬塊級作用域

(function () {
  for (var i = 0; i < 10; i++) {
    console.log(i);
  }
})();

實現(xiàn)柯里化

function add(a, b, c) {
  return a + b + c;
}

function curry(fn) {
  return function curried(...args) {
    if (args.length >= fn.length) {
      return fn.apply(this, args);
    } else {
      return function (...args2) {
        return curried.apply(this, args.concat(args2));
      };
    }
  };
}

const curriedAdd = curry(add);
console.log(curriedAdd(1)(2)(3)); // 6

實現(xiàn)函數(shù)節(jié)流和防抖

function throttle(fn, delay) {
  let timer = null;
  return function (...args) {
    if (!timer) {
      timer = setTimeout(() => {
        fn.apply(this, args);
        timer = null;
      }, delay);
    }
  };
}

function debounce(fn, delay) {
  let timer = null;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}

實現(xiàn)單例模式

function Singleton(fn) {
  let instance = null;
  return function (...args) {
    if (!instance) {
      instance = new (fn.bind(this, ...args))();
    }
    return instance;
  };
}

function User(name) {
  this.name = name;
}

const createUser = Singleton(User);
const user1 = createUser('Alice');
const user2 = createUser('Bob');
console.log(user1 === user2); // true

實現(xiàn)模塊化開發(fā)

const module = (function () {
  let privateVar = 0;
  function privateFunc() {
    console.log('privateFunc');
  }
  return {
    publicFunc: function () {
      console.log('publicFunc');
    },
  };
})();
module.publicFunc(); // publicFunc
module.privateFunc(); // TypeError: module.privateFunc is not a function