What is a JavaScript factory function?

In JavaScript, a factory function is a function used to create objects. These built-in functions are all class objects. When called, a class instance is actually created, that is, an object is first created using the class, and then the object is returned. The created functions all have the same attributes.

The operating environment of this tutorial: Windows 10 system, JavaScript version 1.8.5, Dell G3 computer.

What is JavaScript factory function

So what exactly is a "factory function"? Let's take a look at the concept, "The so-called factory function means that these built-in functions are all class objects. When you call them, you actually create a class instance." This means that when I call this function, I actually create an object using the class and then return the object. Since Javascript itself is not a strict object-oriented language (does not contain classes), in fact, Javascript does not have a strict "factory function", but in Javascript, we can use functions to simulate classes.

We first create an object through the new keyword, and obj is equivalent to an instance of Object. We instantiate an object through the class, then give the object corresponding attributes, and finally return the object. We can create objects by calling this function. In this case, the factory function is actually easy to understand:

1, it is a function.

2, it is used to create objects.

3, it is like a factory, the functions "produced" are all "standard parts" (have the same attributes)

You can't become a JavaScript without learning functions and objects Programmers, and when used together, are building blocks, we need to start with a powerful object paradigm called composition. Today we look at some idiomatic patterns for using factory functions to compose functions, objects and Promises. The combination mode organizes a batch of sub-objects into a tree structure, and a top-level command will operate all objects in the tree. When a function returns an object, we call it a factory function.

Let’s look at a simple example.

function createJelly() {
 return {
 type: 'jelly',
 colour: 'red'
 scoops: 3
 };
 }

Let’s introduce it to you through some examples.

Every time we call this factory function, it will return a new jelly object instance. The important thing to note is that we don't have to preface the factory function name with create , but it makes the intent of the function more clear to others. The same is true for the type attribute, but generally it helps us differentiate between the objects of our program.​

1. Factory function with parameters

Like all functions, we can define our factory function (icecream ice cream) through parameters, which can be used to change the model of the returned object.

function createIceCream(flavour='Vanilla') {
 return {
 type: 'icecream',
 scoops: 3,
 flavour
 }
 }

In theory, you could use factory functions with hundreds of parameters to return very envoys of deeply nested objects, but as we'll see, that's not the essence of composition at all.

2. Combined factory function

Defining another factory function within a factory function can help us split complex factory functions into smaller, reusable fragments.

For example, we can create a dessert (dessert) factory function, defined by the previous jelly (jelly) and icecream (ice cream) factory functions.​

function createDessert() {
return {
type: 'dessert',
bowl: [
createJelly(),
createIceCream()
]
};
}

​ We can combine factory functions to build arbitrarily complex objects, which does not require us to use new or this in combination. Objects can be represented by a has-a (has) relationship instead of is-a (is). In other words, it can be implemented using composition rather than inheritance.​

​ For example, use inheritance.

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

We can express the same meaning using combination mode.

// 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. Asynchronous factory function

Not all factories will return data immediately. For example, some have to get the data first. In these cases, we can return Promises to define factory functions.

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

This deeply nested indentation can make asynchronous factories difficult to read and test. It's often helpful to break them up into multiple different factories, which can be written like this.

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

Of course, we can use callback functions, but we already have tools like Promise.all that return Promises to define factory functions.​

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

​ We use get instead of create as the naming convention to show that these factories do some asynchronous work and return promises.

Related recommendations: javascript learning tutorial

The above is the detailed content of What is a JavaScript factory function?. For more information, please follow other related articles on the PHP Chinese website!