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

前言

在 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 奇怪的部分

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

前言

Function Factories

圖源

你的支持會直接轉換成更多技術筆記

Terminal

相關文章

分享這篇文章

留言

前言

Function Factories

圖源

你的支持會直接轉換成更多技術筆記

Terminal

相關文章

[JS奇怪的世界]No.? 閉包番外篇

[JS奇怪的世界]No.68 JavaScript奇怪的部分

[JS奇怪的世界]No.67 增加jQuery的支援

[JS奇怪的世界]No.66 屬性與可鏈結方法

分享這篇文章

留言