美文网首页
简单总结ES6中的类定义语法和ES7的async/await

简单总结ES6中的类定义语法和ES7的async/await

作者: 一点红3340 | 来源:发表于2017-07-21 17:59 被阅读0次

    学习ES6的类定义语法

    基本知识点:

    ES6中定义类的方式, 就是ES5中定义类的语法糖,但虽然是语法糖,但是整体定义类的方式更加简洁,类的继承更加方便,让我们可以根据语言习惯简化对象构造函数的创建过程。
    每一个使用class方式定义的类默认都有一个constructor函数, 这个函数是构造函数的主函数, 该函数体内部的this指向生成的实例, 如下,say() {}为原型上的方法 :

    class Person {
        //构造函数的主函数
        constructor(name) {
            this.name = name;
        }
        //定义原型方法
        say () {
            console.log("say hi");
        }
    };
    new Person().say(); //控制台会输出say hi
    

    函数的静态方法:

    如果定义函数的时候, 大括号内部, 函数名前声明了static, 那么这个函数就为静态函数, 就为静态方法, 和原型就没关系了:

    class Person {
        constructor(name) {
            this.name = name;
        }
        static say () {
            console.log("say hi");
        }
    };
    Person.say();
    

    只能在类定义完毕以后再定义静态属性:

    class Person {
        constructor(name) {
            this.name = name;
        }
    };
    Person.hands = 2;
    console.log(Person.hands);
    

    类的继承:

    class Person {
        constructor(name) {
            this.name = name;
        }
        say () {
            console.log("say hi");
            return this;
        }
    };
    class SMan extends Person {
        constructor (name, power) {
            super(name);
            this.superPower = power;
        }
        show () {
            console.log(this.superPower);
            return this;
        }
    }
    console.log( new SMan("Clark", "pee").show().say().name ); //输出:  pee  say    hi    Clark
    

    需要注意的东西:

    • ES6中声明的类不存在函数声明提前的问题, 类必须先声明再使用,否则会出现异常,如果用ES5中的思维去理解的话, 声明的类没有声明提前, 通过class 类名{} 声明的类,就是var 类名 = function(){}

    学习ES7的async/await

    实例代码:

    var wait = function (time) {
         return new Promise(function (resolve, reject) { 
             setTimeout(function () { 
                 resolve("OK"); }, time); 
         }) 
    }; 
    (async () => { 
        try{console.log('start'); 
            let status = await wait(1000);//这里可以取到promise的返回结果 
            console.log(status); }
        catch (err){ 
            console.log(err); //可以直接使用try-catch捕获错误,而不用.catch(...) 
        } }
    )(); 
    //先输出start,1秒钟之后输出OK
    

    要点总结:

    • async 表示这是一个async函数,await只能用在这个函数里面。
    • await 表示在这里等待promise返回结果了,再继续执行。
    • await 后面跟着的应该是一个promise对象
    • await 可以写在for循环里面(不像之前这种需求需要闭包才能解决)
    • async函数的返回值是一个promise对象:
    • 如果async函数通过return('OK'),则是修改promise状态为:promise.resolve('OK')
    • 如果async函数内部有error被抛出,则修改promise状态为:promise.reject(error);
    • 如果async函数没有返回值,则修改promise状态为:promise.resolve()
    • 如果希望async里面的N个promsie对象顺序执行,按顺序往下写await就行了
    • 如果希望并发执行,await Promise.all(N个promsie对象)即可
    • node7.7版本以上已经完全支持async/await

    相关文章

      网友评论

          本文标题:简单总结ES6中的类定义语法和ES7的async/await

          本文链接:https://www.haomeiwen.com/subject/isiekxtx.html