ES6（三）：Iterator、Generator、async、类的用法、类的继承

一、迭代器Iterator

遍历器（Iterator）就是这样一种机制。它是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作（即依次处理该数据结构的所有成员）。

Iterator 的作用有三个：一是为各种数据结构，提供一个统一的、简便的访问接口；二是使得数据结构的成员能够按某种次序排列；三是 ES6 创造了一种新的遍历命令for...of循环，Iterator 接口主要供for...of消费。

遍历器（Iterator）是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作，其实遍历器就是一个用于遍历数据结构的指针。
一个数据结构只要具有Symbol.iterator属性，就说明有interator接口，就可以被for...of遍历。

原生具备 Iterator 接口的数据结构如下。

Array、Map、Set、String、TypedArray、函数的arguments对象、NodeList对象

每一次调用next方法，都会返回数据结构的当前成员的信息。具体来说，就是返回一个包含value和done两个属性的对象。其中，value属性是当前成员的值，done属性是一个布尔值，表示遍历是否结束。

利用Symbol.iterator属性创建一个新的迭代器：

        const items=['cgp','yhg','20'];
        const it=items[Symbol.iterator]();
        console.log(it.next());//Object { value: "cgp", done: false } //false代表还未遍历完
        console.log(it.next());//Object { value: "yhg", done: false }
        console.log(it.next());//Object { value: "20", done: false }
        console.log(it.next());//Object { value: undefined, done: true }

Iterator 的遍历过程是这样的。

（1）创建一个指针对象，指向当前数据结构的起始位置。也就是说，遍历器对象本质上，就是一个指针对象。

（2）第一次调用指针对象的next方法，可以将指针指向数据结构的第一个成员。

（3）第二次调用指针对象的next方法，指针就指向数据结构的第二个成员。

（4）不断调用指针对象的next方法，直到它指向数据结构的结束位置。

二、生成器Generator 

1、定义

形式上，Generator 函数是一个普通函数，但是有两个特征。一是，function关键字与函数名之间有一个星号；二是，函数体内部使用yield表达式，定义不同的内部状态。

Generator函数的写法：function* fn() {yield}，yield相当于return。

Generator 函数的调用方法与普通函数一样，也是在函数名后面加上一对圆括号。不同的是，调用 Generator 函数后，该函数并不执行，返回的也不是函数运行结果，而是一个指向内部状态的指针对象，也就是上一节介绍的遍历器对象（Iterator Object）。

2、yield

由于 Generator 函数返回的遍历器对象，只有调用next方法才会遍历下一个内部状态，所以其实提供了一种可以暂停执行的函数。yield表达式就是暂停标志。

遍历器对象的next方法的运行逻辑如下。

（1）遇到yield表达式，就暂停执行后面的操作，并将紧跟在yield后面的那个表达式的值，作为返回的对象的value属性值。

（2）下一次调用next方法时，再继续往下执行，直到遇到下一个yield表达式。

（3）如果没有再遇到新的yield表达式，就一直运行到函数结束，直到return语句为止，并将return语句后面的表达式的值，作为返回的对象的value属性值。

（4）如果该函数没有return语句，则返回的对象的value属性值为undefined。

需要注意的是，yield表达式后面的表达式，只有当调用next方法、内部指针指向该语句时才会执行，因此等于为 JavaScript 提供了手动的“惰性求值”（Lazy Evaluation）的语法功能。

function* fn() {
    console.log('start');
    yield 2;
    yield 'hello world';
    return 'end'
}
let gen = fn();
console.log(gen.next());  //{value: 2, done: false}
console.log(gen.next()); //{value: 'hello world', done: false}
console.log(gen.next());  //{value: 'end', done: true}
console.log(gen.next()); //{value: undefined, done: true}

Generator 函数可以不用yield表达式，这时就变成了一个单纯的暂缓执行函数：

function* f() {
  console.log('执行了！')
}

var generator = f();

setTimeout(function () {
  generator.next()
}, 2000);

上面代码中，函数f如果是普通函数，在为变量generator赋值时就会执行。但是，函数f是一个 Generator 函数，就变成只有调用next方法时，函数f才会执行.

3.Generator和Iterator接口的关系

之前说任何一个对象，只要有Symbol.iterator方法（iterator接口），就可以调用该方法生成一个遍历器（迭代器）对象，那么如果现在有一个对象，它没有iterator接口，如何给其添加？
有一种方法是使用普通函数写一个遍历器生成函数：

const obj = {
  [Symbol.iterator] : function () {
    return {
      next: function () {
        return {
          value: 1,
          done: true
        };
      }
    };
  }
};

但是其实 Generator 函数就是遍历器生成函数，因此可以把 Generator 函数赋值给对象的Symbol.iterator属性，从而使得该对象具有 Iterator 接口.

const obj = {};
obj[Symbol.iterator] = function* () {
    yield 1;
    yield 2;
    yield 3;
};
console.log([...obj]); //[1, 2, 3]

 4、next方法的参数

 

yield表达式本身没有返回值，或者说总是返回undefined。next方法可以带一个参数，该参数就会被当作上一个yield表达式的返回值。
如果不传参， 第二次不带参数，那么y = 2 * undefined = NaN，z = undefined / 3 = NaN，第三次不带参数，那么z = undefined, 返回5 + NaN + undefined = NaN
如果传参，那么第二次参数传给上一个yield也就是y = 2 * 12 = 24, value: 24 /3 = 8，第三次参数传给上一个yield也就是z = 13, value: 5 + 24 + 13 = 42

function* foo(x) {
    var y = 2 * (yield (x + 1));
    var z = yield (y / 3);
    return (x + y + z);
}

var a = foo(5);
a.next() // Object{value:6, done:false}
a.next() // Object{value:NaN, done:false}  第二次不带参数，那么y=2*undefined=NaN，z=undefined/3 =NaN
a.next() // Object{value:NaN, done:true}   第三次不带参数，那么z=undefined, 返回5+NaN+undefined=NaN

var b = foo(5);
b.next() // { value:6, done:false }
b.next(12) // { value:8, done:false } //第二次参数传给上一个yield也就是y=2*12=24,value:24/3=8
b.next(13) // { value:42, done:true } //第三次参数传给上一个yield也就是z=13,value:5+24+13=42

举例2

function* dataConsumer() {
  console.log('Started');
  console.log(`1. ${yield}`);
  console.log(`2. ${yield}`);
  return 'result';
}

let genObj = dataConsumer();
genObj.next();
// Started
genObj.next('a')
// 1. a
genObj.next('b')
// 2. b

5、应用场景案例 

 （1）给对象添加iterator接口

const o = { name: 'zzy', age: 18 };

//给对象o添加iterator接口
o[Symbol.iterator] = function* (obj) {
    let keys = Object.keys(o);
    for (const key of keys) {
        yield [key, obj[key]];  //['name','zzy']  [age,18]
    }
};
console.log(o);  //{name: 'zzy', age: 18, Symbol(Symbol.iterator): ƒ}
console.log(o[Symbol.iterator](o).next());  //{value: ['name', 'zzy'], done: false}
console.log(o[Symbol.iterator](o).next());  //{value: ['name', 'zzy'], done: false}？？？？？？？

for (let [key, value] of o[Symbol.iterator](o)) {  //？？？？这啥东西
    console.log(`${key}:${value}`); //name:zzy   age:18
} 

（2）让异步代码同步化

这个案例有点儿意思，比如我要1s加载一个页面，加载成功后立即隐藏
1.首先我先定义好三个函数，分别是加载中、加载完成、页面隐藏
2.如果直接按顺序调用三个函数，你会发现页面加载完成最后才弹出来，这是因为加载完成是一个异步操作
3.这时我们就可以用到Generator函数，先调用一次next，使用yield暂停函数，然后在定时器里用next再调用

function loadUI() {
    console.log('页面加载中Loading……');
}

function showData() {
    setTimeout(() => {
        console.log('页面加载完成');
        genLoad.next();  //2.页面加载完成后就立即隐藏
    }, 1000);
}

function hideUI() {
     console.log('页面隐藏啦');
}

function* load() {
    loadUI();
    yield showData();
    hideUI();
}

let genLoad = load();
genLoad.next();  //1.加载页面，加载完成的时候停止

三、async（不太熟）

这里先简单记一下，后面用的多了再回来总结完整的，包括async、generator、promise的区别，要好好理解
async函数是 Generator 函数的语法糖

1.async函数对 Generator 函数的改进，体现在以下四点。

（1）内置执行器。

Generator 函数的执行必须靠执行器，所以才有了co模块，而async函数自带执行器。也就是说，async函数的执行，与普通函数一模一样，只要一行。

asyncReadFile();
上面的代码调用了asyncReadFile函数，然后它就会自动执行，输出最后结果。这完全不像 Generator 函数，需要调用next方法，或者用co模块，才能真正执行，得到最后结果。

（2）更好的语义。

async和await，比起星号和yield，语义更清楚了。async表示函数里有异步操作，await表示紧跟在后面的表达式需要等待结果。

（3）更广的适用性。

co模块约定，yield命令后面只能是 Thunk 函数或 Promise 对象，而async函数的await命令后面，可以是 Promise 对象和原始类型的值（数值、字符串和布尔值，但这时会自动转成立即 resolved 的 Promise 对象）。

（4）返回值是 Promise。

async函数的返回值是 Promise 对象，这比 Generator 函数的返回值是 Iterator 对象方便多了。你可以用then方法指定下一步的操作。

进一步说，async函数完全可以看作多个异步操作，包装成的一个 Promise 对象，而await命令就是内部then命令的语法糖。

2.使用注意点

1.await命令后面的Promise对象，运行结果可能是rejected，（如果await后面的异步操作出错，那么等同于async函数返回的 Promise 对象被reject）。所以最好把await命令放在try…catch代码块中，然后catch里面不写东西，如果出现错误，就会自动跳过当前await

async function fn2() {
    try {
        // throw new Error('出错了');
        await Promise.reject('出错了');
    } catch (error) {
        /* 忽略错误，继续执行 */
    }
    return await Promise.resolve('hello');
}
fn2().then(v => console.log(v)).catch(e => console.log(e));

下面这个案例虽然有几个地方看不懂，但是有点意思：如果await操作成功，就会使用break语句退出循环；如果失败，会被catch语句捕捉，然后进入下一轮循环

const superagent = require('superagent');

async function test() {
  let i;
  for (i = 0; i < 3; ++i) {
    try {
      await superagent.get('http://google.com/this-throws-an-error');
      break;
    } catch(err) {/* 忽略错误，继续执行 */}
  }
  console.log(i); // 3
}

test();

3.await命令只能用在async函数之中，如果用在普通函数，就会报错
剩下的看文档吧，这个东西等我promise学熟练了再回来理解。

3.使用Generator实现async/await

const p1 = () => {
  return new Promise((resolve) => {
    console.log('1')
    setTimeout(() => {
      resolve(2)
    }, 1000)
  })
}

function* autoAwait(p1) {
  const x = yield p1()
  console.log(x)
}

// 生成生成器的迭代器对象
const a1 = autoAwait(p1)
//调用next方法会返回一个对象，包括yeild后的表达式结果{value: promise对象, done: false}
a1.next().value.then((res) => {
  a1.next(res) //在暂停执行后，next的参数作为上一个yeild的返回结果，最终输出res
})

 这里autoAwait其实就是一个async/await，内部就是加了一个内置的执行器，不需要手动操作：

async function autoAwait(p1) {
  const x = await p1()
  console.log(x)
}

四、类的用法

ES6中的class其实就类似于ES5中的构造函数
比如下面两个写法是等价的：

function Point(x, y) {
  this.x = x;
  this.y = y;
}

Point.prototype.sum = function () {
  return this.x + this.y ;
};

var p = new Point(1, 2);
p.sum();

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  sum() {
    return this.x + this.y ;
  }
}

var p = new Point(1, 2);
p.sum();

定义sum()方法的时候，前面不需要加上function这个关键字，直接把函数定义放进去了就可以了。另外，方法与方法之间不需要逗号分隔，加了会报错。
constructor()方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。一个类必须有constructor()方法，如果没有显式定义，一个空的constructor()方法会被默认添加。

class Point {
}

// 等同于
class Point {
  constructor() {}
}

五、类的继承

1.extends关键字

Class 可以通过extends关键字实现继承，让子类继承父类的属性和方法。

class Father {
}

class Son extends Father {
}

2.super关键字

（1）super关键字调用父类中的构造函数

其实super在这里的作用就是改变父类中的this指向，让父类中的this指向子类。这样我们在通过子类继承，调用父类中的方法时，就可以直接通过子类传值使用

   class Father {
        constructor(x, y) {
            this.x = x;
            this.y = y;
        }

        sum() {
            console.log(this.x + this.y);
        }
    }

    class Son extends Father {
        constructor(x, y) {
            super(x, y); //调用了父类中的构造函数
        }
    }

    let son = new Son(1, 2);
    son.sum();

（2）super关键字调用父类中的普通函数

通过super.函数名() 调用。
如果子类继承父类，子类和父类中有同名方法，那么子类中的实例调用时优先调用子类中的方法，如果子类没有该方法，才去调用父类的该方法。

class Father1 {
    say() {
        return '我是爸爸';
    }
}

class Son1 extends Father1 {
    say() {
        console.log(super.say() + '的儿子');
    }
}

let son1 = new Son1();
son1.say();  //我是爸爸的儿子    就近原则，如果子类有方法，优先调用子类，子类没有才去调用父类里的

（3）子类在继承父类的方法后，可以重写父类的方法，也可以添加其他方法，super必须在子类的this之前调用（先改变this指向）。

class Father2 {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }

    sum() {
        console.log(this.x + this.y);
    }
}

class Son2 extends Father2 {
    constructor(x, y) {
        super(x, y，age); //调用了父类中的构造函数，让this指向子类
        //如果要添加子类的属性，super必须在子类的this之前调用
        this.age = age;
    }
    //1.重写父类的方法
    sum() {
        console.log(this.x + this.y + 1000);
    }
    //2.在继承父类的方法后，添加了新的方法
    substract() {
        console.log(this.x - this.y);
    }
}
let son2 = new Son2(5, 3，18);
son2.sum();
son2.substract();

（4）类中this的指向问题

永远记住，谁调用函数，this就指向谁。不过下面这个如果我要调用公共方法，用箭头函数怎么解决this的问题？奇怪。其实可以用bind也行， this.btn.onclick = this.sing.bind(this)。这样调用的话，sing里面的this指向的就是constructor里面的this

<button>点击</button>
1

let that;
class Father3 {
    constructor(uname, uage) {
        that = this;
        this.name = uname;
        this.age = uage;
        // this.sing();
        this.btn = document.querySelector('button');
        this.btn.onclick = this.sing;  //这个this指向的是btn
        //谁调用方法，this就指向谁
    }

    sing() {
        console.log(this);  //<button>点击</button>
        console.log(that.name);  //zzy
    }
}

let f = new Father3('zzy', 18);
f.sing();