JavaScript工厂函数怎么用

本文小编为大家详细介绍“JavaScript工厂函数怎么用”，内容详细，步骤清晰，细节处理妥当，希望这篇“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工厂函数怎么用”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。