[筆記] JavaScript 的基本觀念 – 13 – Closure 閉包 @地瓜大的飛翔旅程

章節連結

課程對應章節
內容
JavaScript 全攻略系列文章

函式可以存取的變數，有其內往外找的特性。換言之，若一個函式其變數在自己的{}(封包)內沒有找到，那就會往外尋找直到 Global Execution。縱使函式其所佔有的記憶體位置已經被回收，但在封包內的函數仍然會保留。

課程對應章節

Course 46 ～ Course 49 (全部一共有 85 Courses)

請注意：本系列文章為個人對應課程的消化吸收後，所整理出來的內容。換言之，並不一定會包含全部的課程內容，也有可能會添加其他資源來說明。課程連結網址：http://tinyurl.com/w7vrql6

內容

1. 閉包(Closure)的最主要目的，是讓 function 能夠有專有的變數，以免變數污染。
2. 縱使命名不同的變數，通通呼叫同一個函式。不過在 Execution Stack 上執行是各自獨立的，且變數都具有獨立的記憶體位置。當 function 於 execution stack 的環節結束了，變數並不會從記憶體中被清除。因此，當你在其他變數中呼叫此變數時，
3. 在 ES6 中，引入了 let 的概念。let 的變數作用域範圍都只會在 {} 閉包內，可以避免變數暴露在 global 環境中，而不小心被變更到而輸出意外的結果。

/*Example*/
/*1. "i" 會被影響*/
function buildFunctions() {
    var arr = [];
    for (var i = 0; i < 3; i++) {
        arr.push(
            function() {
                console.log(i);   
            }
        )   
    }
    return arr;
}

var fs = buildFunctions();

fs[0](); //3, 因為每次的 i 並不會被保存下來
fs[1](); //3
fs[2]();  //3

/*2. "i" 在存入array時立刻啟用函式*/
function buildFunctions() {
    var arr = [];
    for (var i = 0; i < 3; i++) {
        arr.push(
            (function() {
                console.log(i);   
            }(i))
        )   
    }
    return arr;
}

var fs = buildFunctions();

fs[0](); //0
fs[1](); //1
fs[2]();  //2

/*3.*/
function makeGreeting(language) {
    return function(firstname, lastname) {
        if (language === 'en') {
            console.log('Hello ' + firstname + ' ' + lastname);   
        }

        if (language === 'es') {
            console.log('Hola ' + firstname + ' ' + lastname);   
        }
    }
}

var greetEnglish = makeGreeting('en');
var greetSpanish = makeGreeting('es');
greetEnglish('John', 'Doe'); // 可輸出 Hello John Doe
greetSpanish('John', 'Doe'); // 可輸出 Hola John Doe