Closure 是函數(shù)與其詞法作用域的組合，使函數(shù)能訪問並記住其外部變量。 1. Closure 由函數(shù)及其定義時的環(huán)境共同構(gòu)成，如inner 函數(shù)記住outer 中的count；2. 常用於數(shù)據(jù)封裝，如createCounter 創(chuàng)建私有變量；3. 用作函數(shù)工廠，如makeGreeting 生成不同語言問候函數(shù)；4. 在事件回調(diào)中保留上下文，如setTimeout 捕獲循環(huán)變量；5. 注意內(nèi)存佔用、性能影響及避免過度使用，可選用class 或模塊替代。

Closure 是JavaScript 中一個強(qiáng)大但常被誤解的概念。簡單來說，閉合（closure）是指函數(shù)能夠訪問並記住其詞法作用域，即使該函數(shù)在其作用域外執(zhí)行。

這聽起來有點抽象，但其實它在我們?nèi)粘＞幋a中經(jīng)常出現(xiàn)，比如事件處理、模塊模式、數(shù)據(jù)封裝等場景。理解closure 的工作機(jī)制，能幫助你寫出更高效、結(jié)構(gòu)更清晰的代碼。

什麼是Closure？

Closure 並不是一種特別的語言特性，而是函數(shù)和它所處環(huán)境共同作用的結(jié)果。

舉個例子：

 function outer() {
  let count = 0;
  return function inner() {
    count ;
    console.log(count);
  };
}

const counter = outer();
counter(); // 輸出1
counter(); // 輸出2

在這個例子中， inner函數(shù)就是一個closure。它“記住了” outer函數(shù)作用域中的變量count ，即使outer已經(jīng)執(zhí)行完畢， count依然沒有被垃圾回收機(jī)制清除。

關(guān)鍵點在於：函數(shù)它的詞法作用域= closure

Closure 的常見用途

Closure 在實際開發(fā)中有不少用武之地，下面列舉幾個常見的使用場景。

數(shù)據(jù)封裝與私有變量

JavaScript 沒有像其他語言那樣原生支持私有變量，但我們可以利用closure 來模擬私有性。

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

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

這裡count就是私有的，外部無法直接修改，只能通過暴露的方法操作。

函數(shù)工廠

closure 可以用來創(chuàng)建具有特定行為的函數(shù)，這些函數(shù)共享某些配置或狀態(tài)。

 function makeGreeting(language) {
  return function(name) {
    if (language === 'en') {
      console.log(`Hello, ${name}`);
    } else if (language === 'zh') {
      console.log(`你好，${name}`);
    }
  };
}

const greetEn = makeGreeting('en');
const greetZh = makeGreeting('zh');

greetEn('Alice'); // Hello, Alice
greetZh('張三'); // 你好，張三

這種寫法讓函數(shù)復(fù)用變得更靈活。

事件回調(diào)與異步操作

closure 在事件監(jiān)聽或異步編程中非常有用，因為它可以保留上下文信息。

 for (var i = 1; i <= 3; i ) {
  setTimeout(function() {
    console.log(i);
  }, 1000);
}
// 輸出三個4

這是經(jīng)典問題，因為var 沒有塊級作用域。如果我們想輸出1、2、3，可以這樣改：

 for (let i = 1; i <= 3; i ) {
  setTimeout(function() {
    console.log(i);
  }, 1000);
}
// 輸出1、2、3

這是因為let聲明的變量會為每次循環(huán)創(chuàng)建一個新的作用域，而setTimeout內(nèi)部的函數(shù)形成了closure，捕獲了當(dāng)前的i 。

Closure 使用時的注意事項

雖然closure 很強(qiáng)大，但也有一些需要注意的地方：

• 內(nèi)存佔用：closure 會保留外部函數(shù)的作用域鏈，可能導(dǎo)致內(nèi)存洩漏，特別是當(dāng)引用大型對象時。
• 性能影響：頻繁創(chuàng)建closure 可能會影響性能，尤其是在循環(huán)或高頻調(diào)用中。
• 避免過度使用：有些情況下可以用class 或模塊替代closure，代碼可讀性更好。

如果不確定是否需要closure，可以先考慮是否有更好的結(jié)構(gòu)化方式來實現(xiàn)相同功能。

基本上就這些。 Closure 是JavaScript 中自然存在的一種現(xiàn)象，而不是一個複雜的概念。只要你在函數(shù)里用了外部變量，你就已經(jīng)用到了closure。只是理解和善用它，才能真正發(fā)揮它的威力。

以上是了解JavaScript關(guān)閉及其用例的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！