Generator函数和yield的说明

Generator函数的用途:

Generator函数是ES6引入的,主要是用于异步编程。最大的特点是可以交出函数的执行权(即暂停执行)。

yield只能存在与Generator函数中。

Generator函数可以通过next方法,去分阶段的注入数据,让函数分阶段的给出不同的返回值。

Generator函数和普通函数的区别:

主要有两个不同。

  1. function关键字与函数名之间有一个星号,不同于普通函数,是可以暂停执行的,所以函数名之前要加星号,以示区别。
  2. Generator函数体内使用yield语句,可以定义不同的内部状态。

状态:就是数据(内部的状态,就是函数内部的值,它在不同的时候,是不一样的。)

本质上:整个Generator函数就是一个封装的异步任务,或者说是异步任务的容器。

yield命令是异步不同阶段的分界线。

所有,有时也会把yield当成是return。但是,yield与return有本质的不同。

执行Generator函数(next方法):

next()方法的作用:分阶段的执行Generator函数。

next方法的使用:

  1. 无参数
  2. 有参数:
    1. 传入的参数:其实就是把上一个yield语句的返回值给覆盖了。
    2. 第一个.next()方法其实就是启动器
      1. 在它之前没有yield语句,所以给第一个.next()方法,是没有意义的。
      2. 给next函数传值不会修改之前的声明的变量的值。
// 定义Generator函数
function* xxfn(){
    var _n = 1;
    var _v = yield _n + 22;
    console.log('aa---:' + _v);
    yield ++_n;
    yield ++_n;
    yield ++_n;
}
var _xxfn = xxfn();
// 第一个 { value: 23, done: false } 
/**
 * 简单的赋值操作语句
 * 还没有到运行到_v赋值的阶段,到第一个yield的时候就停止了
 */
console.log(_xxfn.next());
// 第二个next aa---:abc { value: 2, done: false }
/**
 * 传入的参数把之前上一个yield语句的返回值给覆盖了。
 * 上一个yield语句:_n + 22
 * 传入了 abc :yield  _n + 22 ===> yield abc ,然后又赋值给了 _v 
 * 然后遇见了下一个yield 就停止了
 */
console.log(_xxfn.next("abc"));
console.log(_xxfn.next());// { value: 2, done: false }

next方法的返回值:

每次调用.next()方法,会返回一个对象。表示当前阶段的信息:

  • value属性:
  • done属性:(是否执行结束)
    • true:表示函数执行完成
    • false:表示函数执行未完成
// 定义Generator函数
function* xxfn(){
    yield 'a';
    yield 'b';
    yield 'c';
    return 'd';
}
var _xxfn = xxfn();
console.log(_xxfn.next());// { value: 'a', done: false }
console.log(_xxfn.next());// { value: 'b', done: false }
console.log(_xxfn.next());// { value: 'c', done: false }
console.log(_xxfn.next());// { value: 'd', done: true }
console.log(_xxfn.next());// { value: undefined, done: true 

迭代器的引用:

每个迭代器之间是相互独立的,作用域独立。

每当你调用了一个迭代器内部的.next()方法,

Generator函数内部的指针,会从上一次停下来的地方,继续运行,直到遇见下一个yield语句。

// 定义Generator函数
function* xxfn(){
    var _n = 1;
    yield ++_n;
    yield ++_n;
    yield ++_n;
}
var aa = xxfn();
var bb = xxfn();
console.log(aa.next());// { value: 2, done: false }
console.log(aa.next());// { value: 3, done: false }
console.log(bb.next());// { value: 2, done: false }

为什么说是迭代器对象?

要把所有的yield语句都走上一遍。

yield:就像录音机的暂停键。

next:就像录音机的继续键。

你可能感兴趣的:(javascript,前端,开发语言)