前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >ES6知识库汇总三

ES6知识库汇总三

作者头像
j_bleach
发布2019-07-02 11:20:10
3410
发布2019-07-02 11:20:10
举报
文章被收录于专栏:前端加油站

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/j_bleach/article/details/70833357

Iterator

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

generator

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

代码语言:javascript
复制
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 函数。

代码语言:javascript
复制
function* bar() {
  yield 'x';
  yield* foo();
  yield 'y';
}

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

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

代码语言:javascript
复制
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,才会等待执行。否则立即输出。

代码语言:javascript
复制
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。

代码语言:javascript
复制
 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将指向父类,而不是父类的原型对象。

代码语言:javascript
复制
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关键字,就表示该方法不会被实例继承,而是直接通过类来调用,这就称为“静态方法”。

代码语言:javascript
复制
class Foo {
  static classMethod() {
    return 'hello';
  }
}

Foo.classMethod() // 'hello'

var foo = new Foo();
foo.classMethod()
// TypeError: foo.classMethod is not a function
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017年04月26日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Iterator
  • generator
  • async
  • class
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档