大家好，我是前端西瓜哥，今天我們做一道簡(jiǎn)單的前端面試題。

用 JavaScript 實(shí)現(xiàn)一個(gè) once 函數(shù)，要求傳入函數(shù)只能執(zhí)行一次。且第二次及以后再調(diào)用時(shí)，仍會(huì)返回第一次執(zhí)行的值。

效果要求如下：

const addOnce = once(function(a, b) {
  return a + b;
});

addOnce(1, 2);    // 3
addOnce(1, 2999); // 依舊是 3

思路和實(shí)現(xiàn)

這里涉及到一個(gè) 閉包 的概念。

什么是閉包?閉包是一種技術(shù)，它能讓 一個(gè)函數(shù)訪問(wèn)另一個(gè)函數(shù)內(nèi)的變量(或者叫關(guān)聯(lián)的環(huán)境)。

一種常見(jiàn)的方式就是調(diào)用一個(gè)函數(shù) a，然后這個(gè)函數(shù)返回了一個(gè)新創(chuàng)建的函數(shù) b。獲得的效果是：新的函數(shù) b 可以訪問(wèn)到 a 中聲明的變量。

once 函數(shù)就要借助閉包的力量，返回 一個(gè)綁定了作用域的新函數(shù)。

我們先看看實(shí)現(xiàn)。

function once(fn) {
  let ret; // 緩存結(jié)果用
  return function(...args) {
    if (!fn) return ret;
    ret = fn(...args);
    fn = undefined; // 表示已經(jīng)執(zhí)行過(guò)一次
    return ret;
  }
}

利用閉包，我們返回的新函數(shù)有兩個(gè) “私有” 的變量可以訪問(wèn)：

1. 傳入的 fn 函數(shù);
2. 額外聲明的用于緩存結(jié)果的 ret 變量

當(dāng)返回的新函數(shù)被調(diào)用時(shí)，我們先將參數(shù)傳給 fn，拿到返回值緩存到 ret。然后將 fn 設(shè)置為 undefined，用于標(biāo)識(shí)別已經(jīng)執(zhí)行了一次，最后返回 ret。

下次再調(diào)用時(shí)，我們通過(guò)判斷 fn 為 falsy，直接返回緩存的 ret。

另外，你貌似可以加多一個(gè)對(duì) fn 的類型校驗(yàn)：typeof fn === 'function'，來(lái)向面試官表達(dá)你的代碼的健壯性。

有一個(gè)比較有趣的地方：如果返回的是個(gè)對(duì)象，多次調(diào)用的返回值其實(shí)都是指向同一個(gè)。如果你希望每次返回的對(duì)象都是新的對(duì)象，可以考慮返回一個(gè)拷貝后的對(duì)象(如果可以拷貝的話)。

結(jié)尾

once 的實(shí)現(xiàn)并不復(fù)雜，只要利用閉包，用封閉的環(huán)境保存一個(gè)緩存的返回值，以及一個(gè)是否執(zhí)行過(guò)的狀態(tài)，就能控制函數(shù)的執(zhí)行走向。