Syntax of generator function (state machine)

1、 Basic concepts

Generator function ( Generator function ) yes ES6 An asynchronous programming solution provided by , The grammatical behavior is completely different from traditional functions .

• Grammatically ： First of all, it can be understood as a State machine , Encapsulates multiple internal states .
• Returns the traverser object ： perform Generator The function returns one Traverser object , The returned iterator object can traverse in turn Generator Every state inside a function .
• Formally ：Generator Function is a normal function , There are two characteristics ：①function There is a between the command and the function name asterisk ;② Function body internal use yield Statement defines different internal states （yield Meaning of output ）

function main() 
{
   var hw = DayGenerator();// Returns the traverser object 
   for(let i=0;i<3;i++)
   {
      console.log(hw.next().value);
   }
}
function* DayGenerator()
{
   // Code block 1
   yield 'sunday';

   // Code block 2
   yield 'monday';

   // Code block 3
   return 'saturday';  
}

Running results ：

 

• Calling method ：Generator The call method of a function is the same as that of a normal function , Also add a pair of parentheses after the function name .
• Whether to execute immediately , Return value ： call Generator After the function , This function Not implemented . And it's not the result of the function , It is a pointer object that executes the internal state . namely Traverser object .

Every time you call next Method , The internal pointer is executed from the function header or the last stop , Until I hit the next one yield sentence （ or return sentence ）. In other words ,Generator The function is Execute in sections Of ,yield Statement is a flag to pause execution , and next Method can resume execution .

2、yield expression

because Generator The only traverser object returned by the function is to call next Method to traverse the next internal state , So it actually provides A function that can pause execution .yield Statements are pause flags .

Of the traverser object next The operation logic of the method is as follows ：

• encounter yield Statement pauses the execution of subsequent operations , And will follow closely yield After the expression as the return object value Property value .
• Next call next Method, and then continue to execute , Until I hit the next one yield sentence .
• If there is no new yield sentence , It runs until the end of the function , until return The statement so far , And will return The value of the expression after the statement is used as the value of the return object value Property value .
• If the function doesn't have return sentence , Returns the value The property value is undefined.

yield and return The difference between ：

Similarities ： Can return the value of the expression immediately after the statement .

The difference ： encounter yield Function pause , Next time, it will continue to execute backward from this position ; and return The sentence does not have the function of location memory , A function can only be executed once return sentence , But it can be done many times yield sentence .

 yeild Expression if used in another expression , Must be in parentheses

function* demo(){
    console.log('Hello'+yield);//SyntaxError Grammar mistakes 
    console.log('Hello'+yield 123);//SyntaxError

    console.log('Hello'+(yield));//ok
    console.log('Hello'+(yield 123));//ok 
}

yield An expression is used as a function parameter or placed to the right of an assignment expression , I don't have to put in parentheses .

function* demo(){
    foo(yield 'a',yield 'b');//ok
    let input = yield;
}