什么是闭包 (Closure)?

2023年1月7日

💎 加入 E+ 成長計畫 與超過 300+ 位軟體工程師一同在社群中成長,並且獲得更多的軟體工程學習資源

闭包 (closure) 是程式语言的一种特性,在 JavaScript 中也扮演相当重要的角色,被广泛应用在 JavaScript 程式库中。许多被开发者大量使用的重要功能,也都看得到闭包的身影,举例来说最热门的 JavaScript 函式库 React 中的 useState 就是透过闭包来实作。

以面试的角度来说,不仅仅要了解什么是闭包,同时也要知道闭包会有什么应用的情景。假如你目前仍不熟闭包的概念,或不确定可以怎么应用,千万要在面试前弄熟。

什么是闭包?

MDN 文件中,闭包被定义为函式以及该函式被宣告时所在的作用域环境(lexical environment) 的组合。白话一点说,闭包就是内部函式能够取得函式外部的变数,并且记住这个变数。因为能够记住这个外部变数,闭包很常被用来做状态保存。

以下是一个最简单的例子,在下方代码中的 inner 函式,能拿到外部函式 outer 的 a 变数,并将其保存在记忆体中。当我们呼叫inner 时,之所以不是每次都回传1 ,而是回传123 不断加上去,正是因为之前的a 的状态被记住了。

function outer() {
  let a = 0;
  function inner() {
    a += 1;
    console.log(a);
  }
  return inner;
}

const inner = outer();

inner(); // 1
inner(); // 2
inner(); // 3

我们可以理解成:闭包这种特性,可以让我们在一个内层函式中(这边的inner),访问到外部函式的作用域(这边的outer),并且会记住外部函式的变数(这边的a)。

在了解闭包是什么后,接着我们来看看闭包的实际用途。

闭包的应用 1 — 状态保存

在写程式时,我们很常会需要记住某个状态,JavaScript 的热门函式库 React 就有提供一个 useState 让开发者来管理状态。以下我们模拟一个简化版的useState ,可以在下方的代码看到,getStatesetState 作为内部函式,可以取得外部函式当中的 state,在实际呼叫后,如果这个 state 有改变,getState 可以持续取得最新改变的值。

// 因为闭包的关系,getState 与 setState 可以取得与记得 state
function useState(initialState) {
  let state = initialState;

  function getState() {
    return state;
  }

  function setState(updatedState) {
    state = updatedState;
  }
  return [getState, setState];
}

const [count, setCount] = useState(0);

count(); // 0
setCount(1);
count(); // 1
setCount(500);
count(); // 500

又或者先前 React 核心团队成员 Sebastian Markbåge 分享的一段程式码,在说 React 的 Server Actions 中,可以运用闭包来做版本检查。下面这段程式码 verifiedVersion 记住的是在首次渲染时拿到的版本,因为闭包的关系,内部的函式 publish 函式,能取得 verifiedVersion

这时,如果要做版本检查,可以在 publish 里面再呼叫一次 await getVersion,拿到当下的版本。这时就可以比较首次渲染时的版本,以及当下的版本,并当版本不同时,可以做处理 (这边是返回一个错误讯息)

image

闭包的应用 2:缓存机制

因为闭包可以让内部函式记住外部的变数,我们可以依照这个特性,透过闭包来实现缓存机制。以下面的例子来说,因为闭包原理,cache 变数可以被回传的箭头函式取得与记得,所以我们能够重复用 cache 来放想要缓存的东西。关于这题的详细解说可以见《手写函式缓存 (cache function)》

function cached(fn) {
  const cache = {};

  // 被回传的箭头函式,可以取得外面的 cache 变数,同时记住这个变数
  // 因此可以把这个 cache 拿来存已经计算的结果
  return (...args) => {
    // 把输入字符串化并当成 key
    const key = JSON.stringify(args);

    // 如果 key 已经在 cache 中,则不用重复算,直接回传之前存的运算结果
    // 如果 key 还不在,则运算完后,把 key 与运算结果放到 cache 中,未来可以避免重复运算
    if (key in cache) {
      return cache[key];
    } else {
      const val = fn(...args);
      cache[key] = val;
      return val;
    }
  };
}

闭包的应用 3:模拟私有变数

许多程式语言有宣告私有方法的语法,这些私有变数对于外部来讲是隐藏的,这是一项很重要的特性,因为有时候我们在开发的代码内部细节,并不想让外部来获取。 JavaScript 并不支援私有变数,但我们可以透过闭包做出类似的功能。如下方代码范例:

// privateCounter 没被法被外部修改,
// 因为闭包的关系 increment 与 decrement 可以存取到 privateCounter
// 因此 privateCounter 只能够透过 increment 与 decrement 来改,这能有效避免被误触到
var counter = (function () {
  var privateCounter = 0;
  function changeBy(val) {
    privateCounter += val;
  }
  return {
    increment: function () {
      changeBy(1);
    },
    decrement: function () {
      changeBy(-1);
    },
    value: function () {
      return privateCounter;
    },
  };
})();

console.log(counter.value()); // logs 0
counter.increment();
counter.increment();
console.log(counter.value()); // logs 2
counter.decrement();
console.log(counter.value()); // logs 1

闭包缺点 — 内存泄漏

虽然说闭包很好用,但也不是没有缺点。从记忆体的角度来看,闭包的缺点是显而易见的,由于闭包会让内部函式记得外部的变数,这可能会造成变数常驻在记忆体当中,如果使用过多可能会造成内存泄露(memory leak) ,需要小心使用。

以下面的例子来说,longArray 没有被使用到,但是因为闭包的原因会一直被 addNumbers 记住。假如今天 longArray 有被使用,那就没问题,但因为它没有被用到但仍存在于记忆体中没被清除,这种情况就是典型的内存泄漏。

function outer() {
  const longArray = [];
  return function inner(num) {
    longArray.push(num);
  };
}
const addNumbers = outer();

for (let i = 0; i < 100000000; i++) {
  addNumbers(i);
}
🧵 如果你想收到最即時的內容更新,可以在 FacebookInstagram 上追蹤我們