JavaScript工廠函數是什麼

WBOY
發布: 2022-03-10 11:14:33
原創
3106 人瀏覽過

在JavaScript中,工廠函數是用來建立物件的一個函數。這些內建函數都是類別對象,呼叫時其實是創建了一個類別實例,也就是先利用類別創建一個對象,然後返回這個對象,而創建的函數都有相同的屬性。

JavaScript工廠函數是什麼

本教學操作環境:windows10系統、javascript1.8.5版、Dell G3電腦。

JavaScript工廠函數是什麼

那麼究竟什麼是「工廠函數」呢?讓我們來看看概念,「所謂工廠函數,就是指這些內建函數都是類別對象,當你呼叫他們時,實際上是創建了一個類別實例」。意思是當我呼叫這個函數,實際上是先利用類別創建了一個對象,然後返回這個對象。由於Javascript本身不是嚴格的物件導向的語言(不包含類別),實際上來說,Javascript並沒有嚴格的“工廠函數”,但是在Javascript中,我們可以利用函數來模擬類別。

我們先透過new關鍵字創建了一個對象,obj就相當於Object的實例。我們透過類別實例化了一個對象,然後給這個對象相應的屬性,最後返回對象。我們可以透過呼叫這個函數來創建對象,這樣的話,實際上工廠函數也很好理解了:

1,它是一個函數。

2,它用來建立物件。

3,它像工廠一樣,「生產」出來的函數都是「標準零件」(擁有相同的屬性)

不學習函數和對象,你不可能成為一名JavaScript程式設計師,並且當他們一起使用時,是構建塊,我們需要從一個稱為 組合(composition) 的強大物件範例開始。今天我們來看一些慣用的模式,使用工廠函數來組成函數,物件和 Promises 。組合模式是將一批子物件組織為樹狀結構,一條頂層的命令會在操作樹中所有的物件。當一個函數回傳一個物件時,我們稱之他為 工廠函數(factory function) 。

讓我們來看一個簡單的例子。

function createJelly() { return { type: 'jelly', colour: 'red' scoops: 3 }; }
登入後複製

下面我們透過一些實例來跟大家介紹。

每次我們都呼叫這個工廠函數,它將傳回一個新的 jelly(果凍) 物件實例。要注意的重點是,我們不必在工廠函數名稱前面加上 create ,但它可以讓其他人更清楚函數的意圖。對於 type 屬性也是如此,但通常它可以幫助我們區分我們程式的物件。

1.具有參數的工廠函數

與所有函數一樣,我們可以透過參數定義我們的工廠函數 (icecream 冰淇淋),這可以用來改變返回物件的模型。

function createIceCream(flavour='Vanilla') { return { type: 'icecream', scoops: 3, flavour } }
登入後複製

理論上,您可以使用數百個參數的工廠函數來傳回非常特使的深層嵌套對象,但正如我們將看到的,這根本不是組合的精髓。

2.組合的工廠函數

在一個工廠函數中定義另一個工廠函數,可以幫助我們把複雜的工廠函數分割成較小的,可重複使用的碎片。

例如,我們可以創建一個 dessert(甜點)工廠函數,透過前面的 jelly(果凍)和 icecream(冰淇淋)工廠函數來定義。

function createDessert() { return { type: 'dessert', bowl: [ createJelly(), createIceCream() ] }; }
登入後複製

我們可以結合工廠函數來建構任意複雜的對象,這不需要我們結合使用 new 或 this 。物件可以用 has-a (具有) 關係而非 is-a (是) 來表示。也就是說,可以用組合而不是繼承來實現。

例如,使用繼承。

// A trifle *is a* dessert 蛋糕*是*甜点 function Trifle() { Dessert.apply(this, arguments); } Trifle.prototype = Dessert.prototype; // 或者 class Trifle extends Dessert { constructor() { super(); } }
登入後複製

我們可以用組合模式表達相同的意思。

// A trifle *has* layers of jelly, custard and cream. It also *has a* topping. // 蛋糕 *有* 果冻层,奶酪层和奶油层,顶部还 *有* 装饰配料。 function createTrifle() { return { type: 'trifle', layers: [ createJelly(), createCustard(), createCream() ], topping: createAlmonds() }; }
登入後複製

3.非同步的工廠函數

並非所有工廠都會立即回傳資料。例如,有些必須先取得數據。在這些情況下,我們可以回到 Promises 來定義工廠函數。

function getMeal(menuUrl) { return new Promise((resolve, reject) => { fetch(menuUrl) .then(result => { resolve({ type: 'meal', courses: result.json() }); }) .catch(reject); }); }
登入後複製

這種深度嵌套的縮排會使非同步工廠難以閱讀和測試。將它們分解成多個不同的工廠通常是有幫助的,可以使用如下編寫。

function getMeal(menuUrl) { return fetch(menuUrl) .then(result => result.json()) .then(json => createMeal(json)); } function createMeal(courses=[]) { return { type: 'meal', courses }; }
登入後複製

當然,我們可以使用回呼函數,但我們已經有了 Promise.all 這樣的工具回傳 Promises 定義工廠函數。

function getWeeksMeals() { const menuUrl = 'jsfood.com/'; return Promise.all([ getMeal(`${menuUrl}/monday`), getMeal(`${menuUrl}/tuesday`), getMeal(`${menuUrl}/wednesday`), getMeal(`${menuUrl}/thursday`), getMeal(`${menuUrl}/friday`) ]); }
登入後複製

我們使用 get 而不是 create 作為命名約定來顯示這些工廠做一些非同步工作和返回promise。

相關推薦:javascript學習教學

以上是JavaScript工廠函數是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!