3 篇文章含有標籤「async/await」

async/await 入門教學筆記 | 學習筆記

2021年1月16日 · 閱讀時間約 2 分鐘

kdchang

async 和 await 是 JavaScript 中處理非同步操作的語法糖，它們使得非同步代碼更加易讀和易寫，避免了傳統回調函數（callback）或 Promise 的 .then() 鏈式調用的冗長性。

1. `async` 關鍵字

async 是一個關鍵字，用來標記一個函數為「非同步函數」。非同步函數會隱式地返回一個 Promise，並且在函數內部，你可以使用 await 來等待非同步操作的結果。

語法

async function example() {
  // 可以在這裡使用 await
}

當你呼叫這個函數時，它會立即返回一個 Promise。如果函數內的代碼執行成功，這個 Promise 會被解析；如果有錯誤，Promise 會被拒絕。

2. `await` 關鍵字

await 必須在 async 函數內部使用，它會讓 JavaScript 等待某個 Promise 完成並返回結果。await 會使得後續代碼暫停，直到 Promise 被解決或拒絕（解決是指成功完成操作，拒絕則是發生錯誤）。

語法

const result = await promise; // 等待 Promise 完成並取得結果

如果 Promise 解決（成功），await 會返回結果。如果 Promise 被拒絕（失敗），會拋出錯誤，這通常需要使用 try...catch 來處理。

範例

// 模擬一個非同步操作
function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Data fetched!");
    }, 2000);
  });
}

// 使用 async/await
async function getData() {
  try {
    console.log("Fetching data...");
    const data = await fetchData();  // 等待 fetchData 完成
    console.log(data);  // 顯示結果
  } catch (error) {
    console.error("Error:", error);  // 處理錯誤
  }
}

getData();  // 呼叫 async 函數

3. `async/await` 的特點：

簡化非同步代碼：async/await 讓非同步代碼的寫法更像是同步代碼，避免了回調函數的「Callback hell 回調地獄」。
錯誤處理：你可以使用 try...catch 塊來捕獲非同步操作中的錯誤，這使得錯誤處理比傳統的 .catch() 更加簡單直觀。
非阻塞執行：儘管代碼看起來是同步執行的，但非同步操作並不會阻塞主執行線程，其他代碼可以繼續執行。

總結

async 將函數標記為非同步函數。
await 使代碼等待 Promise 的解決結果，並可以在 async 函數內使用。
使用 async/await 可以使非同步代碼更加簡潔且易於理解。

JavaScript let 閉包（Closure）入門教學筆記 | 學習筆記

2021年1月16日 · 閱讀時間約 4 分鐘

kdchang

什麼是閉包（Closure）？

閉包是 JavaScript 中的一個強大概念，它允許函式「記住」其外部作用域（lexical scope），即使該作用域已經執行完畢並離開了執行環境。閉包使得函式能夠存取其外部函式內部的變數，而這些變數通常在外部函式執行結束後仍然可以被存取。

在 JavaScript 中，每當一個函式被創建時，它都會自動獲得對其外部變數的存取權，這就是閉包的核心概念。

閉包的基本概念

閉包的最基本形式是函式內部返回另一個函式，而返回的函式仍然能夠存取外部函式的變數，即使外部函式已經執行完畢。例如：

function outerFunction() {
    let outerVariable = "我是外部變數";

    function innerFunction() {
        console.log(outerVariable);
    }

    return innerFunction;
}

const closureExample = outerFunction(); 
closureExample(); // 輸出: "我是外部變數"

在這個例子中：

outerFunction 內部定義了一個變數 outerVariable，並宣告了一個 innerFunction。
innerFunction 存取 outerVariable，然後被 outerFunction 返回。
當 closureExample 執行時，即使 outerFunction 已經執行完畢，它仍然可以存取 outerVariable，因為它形成了一個閉包。

閉包的實際應用

閉包在 JavaScript 中有許多實際用途，包括資料封裝、模擬私有變數、事件處理，以及避免全域變數污染等。

1. 資料封裝與模擬私有變數

在 JavaScript 中，沒有內建的 private 修飾符，但可以透過閉包來模擬私有變數：

function createCounter() {
    let count = 0; // 私有變數

    return {
        increment: function() {
            count++;
            console.log(`計數器值: ${count}`);
        },
        decrement: function() {
            count--;
            console.log(`計數器值: ${count}`);
        },
        getCount: function() {
            return count;
        }
    };
}

const counter = createCounter();
counter.increment(); // 計數器值: 1
counter.increment(); // 計數器值: 2
console.log(counter.getCount()); // 2
counter.decrement(); // 計數器值: 1

在這個例子中：

count 變數是 createCounter 的內部變數，外部無法直接存取。
increment、decrement 和 getCount 方法則形成閉包，允許我們操作 count。

這種方法可以防止外部直接修改 count，達到變數封裝的效果。

2. 事件處理中的閉包

閉包在事件處理中特別有用，例如當我們需要讓事件處理函式記住某些狀態時：

function attachEventListener() {
    let count = 0;

    document.getElementById("clickButton").addEventListener("click", function() {
        count++;
        console.log(`按鈕點擊次數: ${count}`);
    });
}

attachEventListener();

這裡：

click 事件處理函式記住了 count 變數，即使 attachEventListener 已執行完畢，每次點擊按鈕時，count 仍然會被持續累加。

3. 立即函式（IIFE, Immediately Invoked Function Expression）

立即函式是一種使用閉包的技術，可用於模擬私有作用域，避免變數污染全域空間：

const counter = (function() {
    let count = 0;

    return {
        increment: function() {
            count++;
            console.log(`計數器值: ${count}`);
        },
        decrement: function() {
            count--;
            console.log(`計數器值: ${count}`);
        },
        getCount: function() {
            return count;
        }
    };
})();

counter.increment(); // 計數器值: 1
counter.increment(); // 計數器值: 2
console.log(counter.getCount()); // 2
counter.decrement(); // 計數器值: 1

這裡：

(function() {...})() 是一個立即執行函式，它執行後返回了一個對象，該對象內部的函式形成閉包，能夠存取 count。

這種技術在早期 JavaScript 程式設計中常被用來創建模組化的程式碼，避免全域變數污染。

4. 用於函式工廠（Function Factory）

閉包可以用來創建不同的函式行為，例如建立不同的乘法器：

function createMultiplier(multiplier) {
    return function(number) {
        return number * multiplier;
    };
}

const double = createMultiplier(2);
const triple = createMultiplier(3);

console.log(double(5)); // 10
console.log(triple(5)); // 15

這裡：

createMultiplier 接受 multiplier 作為參數，返回一個新的函式。
該函式形成閉包，記住 multiplier，即使 createMultiplier 已經執行完畢。

這種模式在高階函式設計中非常常見。

閉包的注意事項

雖然閉包提供了強大的功能，但如果不當使用，可能會導致記憶體洩漏。例如：

function createLargeClosure() {
    let largeArray = new Array(1000000).fill("資料");
    return function() {
        console.log(largeArray.length);
    };
}

const closure = createLargeClosure();
// 如果 closure 持續存在，largeArray 也不會被回收

largeArray 變數被閉包記住，無法被垃圾回收機制（GC）回收，可能導致記憶體洩漏。
解決方案是確保不再使用閉包時，讓變數參考變為 null 或適時使用 WeakMap 來管理記憶體。

結論

閉包是 JavaScript 的核心概念之一，理解閉包有助於寫出更靈活、可維護的程式碼。它主要用於：

變數封裝（模擬私有變數）
事件處理（記住狀態）
函式工廠（創建可重複使用的函式）
IIFE（避免變數污染）

掌握閉包後，可以更進一步學習 JavaScript 中的函式式程式設計（Functional Programming），提升程式的模組化與可讀性。

JavaScript var 閉包（Closure）入門教學筆記 | 學習筆記

2021年1月16日 · 閱讀時間約 4 分鐘

kdchang

什麼是閉包（Closure）？

閉包是 JavaScript 中的一個重要概念，指的是函式在創建時，能夠記住並存取其外部作用域的變數，即使該作用域已經執行完畢。這種特性使得 JavaScript 的函式可以擁有「記憶」的能力，允許函式保持對外部變數的存取權。

閉包的概念建立在 JavaScript 的**詞法作用域（Lexical Scope）**之上，也就是函式可以存取其被定義時所在的作用域中的變數，而不是函式執行時的作用域。

1. 基本範例

function outerFunction() {
    var outerVariable = "我是外部變數";

    function innerFunction() {
        console.log(outerVariable);
    }

    return innerFunction;
}

var closureExample = outerFunction(); 
closureExample(); // 輸出: "我是外部變數"

解析

outerFunction 內部宣告了一個變數 outerVariable，並定義了一個 innerFunction。
innerFunction 存取 outerVariable，並被 outerFunction 返回。
當 closureExample 執行時，即使 outerFunction 早已執行完畢，innerFunction 仍然能存取 outerVariable，這就是閉包的作用。

2. `var` 變數與閉包的問題

JavaScript 在 ES6 之前使用 var 來宣告變數，但 var 具有函式作用域（Function Scope），這可能會導致閉包相關的陷阱。

問題：`for` 迴圈與 `var`

function varClosureExample() {
    var functions = [];

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

    return functions;
}

var closures = varClosureExample();
closures[0](); // 輸出: 3
closures[1](); // 輸出: 3
closures[2](); // 輸出: 3

為什麼會這樣？

var 是函式作用域，它在整個 varClosureExample 內部是共享的。
當 closures[0]()、closures[1]() 和 closures[2]() 執行時，它們都參考同一個 i，但 i 已經變成 3（因為 for 迴圈已經執行完畢）。
所有函式都會輸出 3，而不是 0, 1, 2。

3. 如何修正 `var` 的問題

解決方案 1：使用 `let`（區塊作用域）

function letClosureExample() {
    var functions = [];

    for (let i = 0; i < 3; i++) {
        functions.push(function() {
            console.log(i);
        });
    }

    return functions;
}

var closures = letClosureExample();
closures[0](); // 輸出: 0
closures[1](); // 輸出: 1
closures[2](); // 輸出: 2

為什麼 let 有效？

let 具有區塊作用域（Block Scope），每次迴圈執行時，i 都是一個新的變數，因此閉包綁定的 i 值不會變化。

解決方案 2：使用 IIFE（立即執行函式）

如果只能使用 var，可以使用 IIFE（Immediately Invoked Function Expression）：

function varClosureFixedExample() {
    var functions = [];

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

    return functions;
}

var closures = varClosureFixedExample();
closures[0](); // 輸出: 0
closures[1](); // 輸出: 1
closures[2](); // 輸出: 2

為什麼 IIFE 有效？

IIFE 會立即執行，並建立一個新的作用域，確保每次迭代時 i 都是獨立的。

4. 閉包的實際應用

(1) 模擬私有變數

function createCounter() {
    var count = 0; // 外部變數

    return {
        increment: function() {
            count++;
            console.log(`計數器值: ${count}`);
        },
        decrement: function() {
            count--;
            console.log(`計數器值: ${count}`);
        },
        getCount: function() {
            return count;
        }
    };
}

var counter = createCounter();
counter.increment(); // 計數器值: 1
counter.increment(); // 計數器值: 2
console.log(counter.getCount()); // 2
counter.decrement(); // 計數器值: 1

解析

count 是 createCounter 內部變數，外部無法直接存取，只能透過 increment 和 decrement 方法修改，形成了私有變數的概念。

(2) 函式工廠（Function Factory）

function createMultiplier(multiplier) {
    return function(number) {
        return number * multiplier;
    };
}

var double = createMultiplier(2);
var triple = createMultiplier(3);

console.log(double(5)); // 10
console.log(triple(5)); // 15

解析

double 變數是一個閉包，記住了 multiplier 為 2。
triple 變數是一個閉包，記住了 multiplier 為 3。
這種模式可以用來建立彈性的函式生成器。

(3) 延遲執行與事件處理

function delayedMessage(message, delay) {
    setTimeout(function() {
        console.log(message);
    }, delay);
}

delayedMessage("Hello, JavaScript!", 2000); // 2 秒後輸出 "Hello, JavaScript!"

解析

setTimeout 內部的函式形成閉包，記住 message 變數，即使 delayedMessage 已經執行完畢。

5. 總結

閉包的核心概念

函式可以存取其外部函式的變數，即使外部函式已經執行完畢。
var 變數的作用域為函式作用域，可能導致閉包內變數的值不如預期。
使用 let 或 IIFE 可以避免 var 造成的閉包問題。

閉包的應用

私有變數（避免全域變數污染）
函式工廠（建立可重複使用的函式）
事件處理與回調函式
延遲執行與計時器

閉包是 JavaScript 的核心概念之一，它允許函式記住外部變數，即使作用域已經離開。var 宣告的變數可能會導致作用域問題，例如 for 迴圈內的閉包錯誤，而 let 或 IIFE 可以解決這個問題。

掌握閉包後，可以更進一步學習 JavaScript 的函式式程式設計（Functional Programming），提升程式的模組化與可讀性。

1. async 關鍵字​

語法​

2. await 關鍵字​

語法​

範例​

3. async/await 的特點：​

總結​

什麼是閉包（Closure）？​

閉包的基本概念​

閉包的實際應用​

1. 資料封裝與模擬私有變數​

2. 事件處理中的閉包​

3. 立即函式（IIFE, Immediately Invoked Function Expression）​

4. 用於函式工廠（Function Factory）​

閉包的注意事項​

結論​

什麼是閉包（Closure）？​

1. 基本範例​

解析​

2. var 變數與閉包的問題​

問題：for 迴圈與 var​

為什麼會這樣？​

3. 如何修正 var 的問題​

解決方案 1：使用 let（區塊作用域）​

解決方案 2：使用 IIFE（立即執行函式）​

為什麼 IIFE 有效？​

4. 閉包的實際應用​

(1) 模擬私有變數​

(2) 函式工廠（Function Factory）​

(3) 延遲執行與事件處理​

5. 總結​

閉包的核心概念​

閉包的應用​

1. `async` 關鍵字

語法

2. `await` 關鍵字

語法

範例

3. `async/await` 的特點：

總結

什麼是閉包（Closure）？

閉包的基本概念

閉包的實際應用

1. 資料封裝與模擬私有變數

2. 事件處理中的閉包

3. 立即函式（IIFE, Immediately Invoked Function Expression）

4. 用於函式工廠（Function Factory）

閉包的注意事項

結論

什麼是閉包（Closure）？

1. 基本範例

解析

2. `var` 變數與閉包的問題

問題：`for` 迴圈與 `var`

為什麼會這樣？

3. 如何修正 `var` 的問題

解決方案 1：使用 `let`（區塊作用域）

解決方案 2：使用 IIFE（立即執行函式）

為什麼 IIFE 有效？

4. 閉包的實際應用

(1) 模擬私有變數

(2) 函式工廠（Function Factory）

(3) 延遲執行與事件處理

5. 總結

閉包的核心概念

閉包的應用