什麼是閉包 (Closure)？

當內部 (inner) 函式被回傳後，除了自己本身的程式碼外，也可以 穿越 取得了內部函式「當時環境」的變數值，記住了執行當時的環境，這就是「閉包」。

參考 Kuro 大這篇文章說明:重新認識 JavaScript: Day 19 閉包 Closure

舉個簡單的例子:

一個計數器的例子，每次調用內部函式時，count 增加，並返回當前的 count 值。

function createCounter() {
  let count = 0; // 外部函式中的變數

  return function () {
    // 內部函式，形成閉包
    count += 1; // 每次調用內部函式時，count 增加
    return count; // 返回當前的 count 值
  };
}

const counter = createCounter(); // 建立閉包

console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3

但是我今天建立不同的變數去儲存閉包，發現每個變數都是獨立的，不會互相影響。

function createCounter() {
  let count = 0; // 外部函式中的變數

  return function () {
    // 內部函式，形成閉包
    count += 1; // 每次調用內部函式時，count 增加
    return count; // 返回當前的 count 值
  };
}

const counter1 = createCounter(); // 建立閉包1
const counter2 = createCounter(); // 建立閉包2
const counter3 = createCounter(); // 建立閉包3

//測試閉包1
console.log(counter1()); // 1
console.log(counter1()); // 2
console.log(counter1()); // 3

//測試閉包2
console.log(counter2()); // 1
console.log(counter2()); // 2

//測試閉包3
console.log(counter3()); // 1

所以閉包是可以取得內部函式，並取得當前變數，並記住當時的上下文環境。且每個閉包是獨立的，不會互相影響。

嘗試模仿axios試做一個簡單的get請求

const url="https://randomuser.me/api/"

const axios ={

    get:function(url){
        return new Promise((reslove,reject)=>{
            const xhr = new XMLHttpRequest();
            xhr.open('GET',url);
            xhr.onload = ()=>reslove(xhr.responseText);
            xhr.onerror=()=>reject(xhr.statusText);
            xhr.send();
        })
    }
}
axios.get(url).then(data=>console.log(data)).catch(err=>console.log(err));