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

This article mainly explains "how to understand Generator and collaborative process in JS". The content of the explanation in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to understand Generator and collaborative process in JS".

Generator execution flow

What is a generator function?

The generator is an asterisked "function" (note: it is not a real function) and can be paused and resumed by the yield keyword

For example:

Function* gen () {console.log ("enter"); let a = yield 1; let b = yield (function () {return 2}) (); return 3;} var g = gen () / / blocked and will not execute any statement console.log (typeof g) / / object. See? Not "function" console.log (g.next ()) / / enter / / {value: 1, done: false} / / {value: 2, done: false} / / {value: 3, done: true} / / {value: undefined, done: true}

As you can see, there are several key points in the execution of the generator:

Hongmeng official Strategic Cooperation to build HarmonyOS Technology Community

After calling gen (), the program blocks and does not execute any statements.

After calling g.next (), the program continues execution until it encounters a pause in the yield program.

The next method returns an object with two properties: value and done. Value is the result of the current yield. Done indicates whether the execution is finished. When a return is encountered, the done will change from false to true.

Yield* syntax

Using yield* becomes very convenient when one generator wants to call another generator. For example, the following example:

Function* gen1 () {yield 1; yield 4;} function* gen2 () {yield 2; yield 3;}

We want to execute in the order of 1234, how do we do it?

In gen1, modify as follows:

Function* gen1 () {yield 1; yield* gen2 (); yield 4;}

After this modification, you can call next in turn.

Implementation Mechanism of Generator-- Cooperative Program

You may be curious about how the generator paused the function and how it was restored. Next, let's take a look at the implementation mechanism-- Xiecheng.

What is a cooperative journey?

The co-program is a more lightweight existence than the thread, the co-program is in the environment of the thread, a thread can have multiple co-programs, and the co-program can be understood as a task in the thread. Unlike processes and threads, collaborative programs are not managed by the operating system, but are controlled by specific application code.

The operation process of the cooperative process

Then you may have to ask, isn't JS executed in a single thread? can it be executed together with so many programs?

The answer is: no. A thread can only execute one collaborator at a time. For example, if you want to execute the task of B, you must transfer the control of the JS thread to the B program in the A program, so now B executes, An is in a paused state.

To give a specific example:

Function* A () {console.log ("I am A"); yield B (); / / A stop and transfer thread execution power to B console.log ("over");} function B () {console.log ("I am B"); return 100 bounce / return and return thread execution power to A} let gen = A (); gen.next (); gen.next () / / I am A / / I am B / / it's over

In this process, A gives the execution power to B, that is, A starts B, and we also say that An is the parent of B. So the last return 100 in B actually passed it to the parent.

It should be emphasized that for the co-program, it is not controlled by the operating system and is completely user-defined, so there is no overhead of process / thread context switching, which is an important reason for high performance.

Thank you for reading, the above is the content of "how to understand Generator and Cooperative process in JS". After the study of this article, I believe you have a deeper understanding of how to understand Generator and Cooperative process in JS, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.