ES6知识库汇总三

Iterator

1.Iterator接口的目的，就是为所有数据结构，提供了一种统一的访问机制，即for…of循环。当使用for…of循环遍历某种数据结构时，该循环会自动去寻找Iterator接口。

generator

1.下面是一个利用Generator函数和for…of循环，实现斐波那契数列的例子。

function* fibonacci() {
  let [prev, curr] = [0, 1];
  for (;;) {
    [prev, curr] = [curr, prev + curr];
    yield curr;
  }
}

for (let n of fibonacci()) {
  if (n > 1000) break;
  console.log(n);
}

2.需要用到yield*语句，用来在一个 Generator 函数里面执行另一个 Generator 函数。

function* bar() {
  yield 'x';
  yield* foo();
  yield 'y';
}

// 等同于
function* bar() {
  yield 'x';
  yield 'a';
  yield 'b';
  yield 'y';
}

3.Ajax是典型的异步操作，通过Generator函数部署Ajax操作，可以用同步的方式表达。

function* main() {
  var result = yield request("http://some.url");
  var resp = JSON.parse(result);
    console.log(resp.value);
}

function request(url) {
  makeAjaxCall(url, function(response){
    it.next(response);
  });
}

var it = main();
it.next();

async

1.普通的 async 函数返回的是一个 Promise 对象，而异步 Generator 函数返回的是一个异步Iterator对象。基本上，可以这样理解，async函数和异步 Generator 函数，是封装异步操作的两种方法，都用来达到同一种目的。区别在于，前者自带执行器，后者通过for await…of执行，或者自己编写执行器。
2.而async函数的await命令后面，可以是Promise 对象和原始类型的值（数值、字符串和布尔值，但这时等同于同步操作）。
3.async函数的返回值是 Promise 对象，这比 Generator 函数的返回值是 Iterator 对象方便多了。你可以用then方法指定下一步的操作。

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

async进行异步操作时，一定要返回promise对象，否则执行同步，包括then方法，需要await返回promise，才会等待执行。否则立即输出。

function time1(i) {
    return new Promise((resolve)=> {
        setTimeout(()=> {
            console.log('first');
            i = i + 1;
            resolve(i);
        }, 1000)
    })
}
function time2(i) {
    return new Promise((r)=> {
        setTimeout(()=> {
            console.log('second');
            r(i);
        }, 500)
    })
}

class loginCtrl {
    async test() {
        let a = await time1(1);
        let b = await time2(a);
        return b
    }
}

loginCtrl.prototype.test().then((i)=> {
    console.log(i + 1)// 返回first,second,3
});

class

1.不存在变量提升。
2.这里需要注意，由于super指向父类的原型对象，所以定义在父类实例上的方法或属性，是无法通过super调用的。
3.ES6 规定，通过super调用父类的方法时，super会绑定子类的this。

 class A {
  constructor() {
    this.x = 1;
  }
  print() {
    console.log(this.x);
  }
}

class B extends A {
  constructor() {
    super();
    this.x = 2;
  }
  m() {
    super.print();
  }
}

let b = new B();
b.m() // 2

4.如果super作为对象，用在静态方法之中，这时super将指向父类，而不是父类的原型对象。

class Parent {
  static myMethod(msg) {
    console.log('static', msg);
  }

  myMethod(msg) {
    console.log('instance', msg);
  }
}

class Child extends Parent {
  static myMethod(msg) {
    super.myMethod(msg);
  }

  myMethod(msg) {
    super.myMethod(msg);
  }
}

Child.myMethod(1); // static 1

var child = new Child();
child.myMethod(2); // instance 2

5.Class 的静态方法
类相当于实例的原型，所有在类中定义的方法，都会被实例继承。如果在一个方法前，加上static关键字，就表示该方法不会被实例继承，而是直接通过类来调用，这就称为“静态方法”。

class Foo {
  static classMethod() {
    return 'hello';
  }
}

Foo.classMethod() // 'hello'

var foo = new Foo();
foo.classMethod()
// TypeError: foo.classMethod is not a function