理解異步編程：Promise與async/await的應用

在
0

進階JavaScript技巧：閉包與高階函數

在

1. 引言

JavaScript 是現代前端與後端開發不可或缺的程式語言，擁有強大的靈活性與功能。隨著應用程式的複雜度提高，開發者需要更高效的程式設計模式來維護與擴展程式碼。閉包（Closure）與高階函數（Higher-Order Functions）是 JavaScript 進階開發的核心概念，不僅可以提升代碼的可讀性，還能讓開發變得更加靈活與高效。

本篇文章將深入探討閉包的作用，如何利用閉包解決作用域問題，並介紹高階函數如何提升函數的靈活性。我們還會結合實例，探討這些技術如何應用於實際開發中，讓讀者能夠更加熟練地運用這些 JavaScript 高級技巧。

2. 閉包（Closure）深入解析

2.1 閉包的基本概念

閉包是指函數在執行時，能夠「記住」並存取其外部函數的變數，即使外部函數已經執行完畢並返回。這樣的特性讓閉包成為 JavaScript 中強大的工具，能夠解決許多作用域相關的問題。

閉包的基本範例

function outerFunction() {
    let count = 0;
    return function innerFunction() {
        count++;
        console.log(`Count: ${count}`);
    };
}

const counter = outerFunction();
counter(); // Count: 1
counter(); // Count: 2
counter(); // Count: 3

在這個範例中，innerFunction 形成了一個閉包，它「記住」了 count 變數，即使 outerFunction 已經執行完畢，count 依然可以被 innerFunction 訪問與修改。

2.2 閉包的作用域與特性

JavaScript 作用域規則

  • 全域作用域（Global Scope）：變數可在整個程式中存取。

  • 函數作用域（Function Scope）：變數僅能在函數內部存取。

  • 塊級作用域（Block Scope）：let 和 const 定義的變數只在 {} 內部可用。

閉包能夠解決作用域的問題，允許內部函數「捕獲」外部函數的變數，避免變數被外部意外修改。

2.3 閉包的應用場景

1. 資料封裝與私有變數

閉包可用來模擬私有變數，避免外部直接修改內部狀態：

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

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

這樣的設計確保 count 只能透過 getCount() 取得，而無法被直接修改。

2. 記憶函數（Memoization）

透過閉包來儲存計算結果，避免重複計算，提高效能：

function memoize(fn) {
    let cache = {};
    return function (key) {
        if (cache[key]) {
            return cache[key];
        } else {
            cache[key] = fn(key);
            return cache[key];
        }
    };
}

const square = memoize(x => x * x);
console.log(square(4)); // 計算 16
console.log(square(4)); // 從快取中取出 16

3. 迴圈與 setTimeout 陷阱

閉包能夠解決 setTimeout 迴圈變數共享的問題：

for (var i = 0; i < 3; i++) {
    setTimeout((function(i) {
        return function() {
            console.log(i);
        };
    })(i), 1000);
}
// 正確輸出：0, 1, 2

這樣的設計確保 i 值在每次迴圈中正確封閉。

3. 高階函數（Higher-Order Functions）詳解

3.1 什麼是高階函數？

高階函數指的是接受函數作為參數或返回函數的函數，這種設計能讓程式更加靈活且具有可重用性。

3.2 常見的高階函數應用

1. 陣列方法：map()、filter()、reduce()

const numbers = [1, 2, 3, 4, 5];

// map - 每個元素都乘以2
const doubled = numbers.map(num => num * 2);

// filter - 取出偶數
const evens = numbers.filter(num => num % 2 === 0);

// reduce - 計算總和
const sum = numbers.reduce((acc, num) => acc + num, 0);

2. 函數組合（Composition）與柯里化（Currying）

const add = x => y => x + y;
const addFive = add(5);
console.log(addFive(3)); // 8

4. 綜合實戰：閉包與高階函數結合應用

4.1 建立計數器（私有變數）

function counter() {
    let count = 0;
    return () => ++count;
}

const myCounter = counter();
console.log(myCounter()); // 1
console.log(myCounter()); // 2

4.2 限制函數執行頻率（Debounce & Throttle）

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

Debounce 避免短時間內重複觸發事件，如搜尋框輸入。

5. 最佳實踐與程式設計模式

  • 使用閉包來保護私有變數，避免不必要的變數暴露

  • 避免過度使用閉包，可能導致記憶體洩漏

  • 善用高階函數提高代碼的可讀性與模組化程度

6. 結論與未來展望

閉包與高階函數是 JavaScript 進階開發的核心概念，能夠提升程式的可讀性與維護性。透過閉包，我們可以建立私有變數，避免作用域污染；透過高階函數，我們能提高函數的靈活性，撰寫更具可重用性的程式碼。

如果想進一步提升 JavaScript 能力，可以深入學習函數式編程、RxJS、Lodash 等進階技術，將這些技巧應用到大型專案中，打造更具彈性的應用程式。


留言

發佈留言