[JS奇怪的世界]No.40 框架小叮嚀:Function Factories

發表於 2019-05-20 分類於克服JS奇怪的部分系列

Google AD

撰寫一篇文章其實真的很花時間，如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話，我會非常感謝你ヽ(・∀・)ﾉ

Liker 讚賞

這篇筆記文章如果對你有幫助，
你可以考慮花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與鼓勵我。
或者你可以也可以請我「喝一杯咖啡(Donate)」。

｜

在 JavaScript 中閉包有許多好用的地方，所以這堂課將會來講解如何利用閉包來做一些特別特殊的東西甚至是一些看起來不可能的模式。

前言

在 JavaScript 中閉包有許多好用的地方，所以這堂課將會來講解如何利用閉包來做一些特別特殊的東西甚至是一些看起來不可能的模式。

Function Factories

在這邊我們將試著去利用閉包寫出更有威力更有彈性的程式。

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');
console.log(greetEnglish);
console.log(greetSpanish);

由上面範例我們可以看到 greetEnglish、greetSpanish 會指向回傳函數。

greetSpanish

但是這邊我們要注意到一件事情 greetEnglish 與 greetSpanish 執行環境的 language 都是獨一無二的，不信?我們可以試著用console.log() 來看。

function makeGreeting (language) {
  console.log(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');
console.log(greetEnglish);
console.log(greetSpanish);

makeGreeting

所以我們可以知道，每次執行 makeGreeting 就會產生一個獨一無二的執行環境，那我們也就可以試著去呼叫 greetEnglish 與 greetSpanish。

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('Jack', 'Tom');
greetSpanish('Mary', 'Jude');

那經過前面的觀念瞭解想必我們已經大概知道結果了。

但是這邊要注意一件事情，我們並沒有辦法直接取用 language 變數，因為這被藏起來再全域環境了，但是函數內是沒有問題的。

讓我們盡可能白話瞭解一下 Function Factories，就是 makeGreeting 類似每一個都是一間房子，然後每一間都有獨立空間，所以我們用圖片來講會更清楚。

獨立空間

圖源

JavaScript 全攻略:克服 JS 奇怪的部分