Shulou(Shulou.com)06/01 Report--

In this article Xiaobian for you to introduce in detail "JavaScript factory function how to use", the content is detailed, the steps are clear, the details are handled properly, I hope this article "JavaScript factory function how to use" article can help you solve doubts, following the editor's ideas slowly in-depth, together to learn new knowledge.

In JavaScript, the factory function is a function used to create objects. These built-in functions are all class objects, and when they are called, they actually create an instance of the class, that is, first create an object using the class, and then return the object, and all the created functions have the same properties.

The operating environment of this tutorial: windows10 system, javascript1.8.5 version, Dell G3 computer.

What is the JavaScript factory function?

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

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

1, which is a function.

2, which is used to create objects.

3, it is like a factory, the "production" functions are all "standard parts" (with the same properties)

You can't be a JavaScript programmer without learning functions and objects, and when they are used together, they are building blocks, and we need to start with a powerful object paradigm called composition. Today we'll look at some of the usual patterns that use factory functions to make up functions, objects, and Promises. The combination mode is to organize a group of sub-objects into a tree structure, and a top-level command will manipulate all the 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 returns a new instance of the jelly object. The important thing to note is that we don't have to precede the factory function name with create, but it gives others a better idea of what the function means. The same is true for the type property, but it usually helps us distinguish between the objects of our program.

1. Factory function with parameters

Like all functions, we can define our factory function (icecream ice cream) by 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 a factory function with hundreds of parameters to return deeply nested objects for special envoys, but as we'll see, this is not the essence of composition at all.

two。 Combined factory function

Defining another factory function in one 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 together. Objects can be represented as has-a relationships rather than is-a. That is, it can be implemented by composition rather than inheritance.

For example, use inheritance.

/ / A trifle * is a * dessert cake * is * dessert function Trifle () {Dessert.apply (this, arguments);} Trifle.prototype = Dessert.prototype;// or class Trifle extends Dessert {constructor () {super ();}}

We can express the same meaning in a combinatorial pattern.

/ A trifle * has* layers of jelly, custard and cream. It also * has a * topping.// cake * has * jelly layer, cheese layer and cream layer, with * * decorative ingredients at the top. Function createTrifle () {return {type: 'trifle',layers: [createJelly (), createCustard (), createCream ()], topping: createAlmonds ()};}

3. Asynchronous factory function

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

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

This deeply nested indentation makes asynchronous factories difficult to read and test. It is often helpful to break them down into different factories, which can be written as follows.

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 these factories do some asynchronous work and return promise.

After reading this, the article "how to use the JavaScript factory function" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself to understand it. If you want to know more about related articles, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.