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

2017-07-21  本文已影响0人  一点红3340

学习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

需要注意的东西:

学习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

要点总结:

上一篇 下一篇

猜你喜欢

热点阅读