ES6 语法学习(二)

1、类的建立与继承

constructor方法是类的构造函数是默认方法，通过new命令生成对象实例时，自动调用该方法。一个类必须有constructor方法，如果没有显式定义，一个默认的constructor方法会被添加。所以即使你没有添加构造函数,也是有默认的构造函数的。一般constructor方法默认返回实例对象this，但是也可以指定constructor方法返回一个全新的对象,让返回的实例对象不是该类的实例

<script>
//注意，在书写ES6的类的时候，方法与方法之间是不能添加逗号的。
class Test {
    //constructor方法是类的构造函数是默认方法，通过new命令生成对象实例时，自动调用该方法。一个类必须有constructor方法，如果没有显式定义，一个默认的constructor方法会被添加。
    constructor(name, age) {
        //new.target 在类中返回的是test这个类，而不是实例化的类，可以通过new.target对静态方法的调用,在类里面也可以通过this.constructor对静态方法调用
        // console.log(new.target.say);
        //也可以判断是否是实例化后的实例
        console.log(this instanceof new.target);
        this.name = name;
        this.age = age;
    }

    //通过返回this实现链式调用
    asw() {
        console.log(`my name is ${this.name},my age is ${this.age}`);
        return this;
    }

    //静态方法前面要添加static进行修饰，同时里面的this表示test这个对象而不是实例化后的类
    //目前ES6未实现静态变量的定义，可以通过test.变量的形式进行定义
    static say() {
        console.log(this.other);
    }

    static other(name, age) {
        if (!(this instanceof Test)) {
            return new Test(name, age);
        }
    }
}

//在继类的时候用extends字实现子类对父类的继承
class Person extends Test {
    constructor(name, age, sex) {
        //调用super关键字实现属性的继承
        super(name, age);
        this.sex = sex;
    }

    ask() {
        //通过super关键字调用父类的方法
        super.asw();
        console.log('are you ok???');
    }
}

//静态属性的调用
Test.say();
//利用静态方法实现类的实例化
Test.other('ccc', 36).asw();
// new Test('aaa', 30).asw();
// new Person('bbb', 20).asw().ask();

 2、async...await的简单使用

　　只要函数名之前加上async关键字，就表明该函数内部有异步操作。该异步操作应该返回一个Promise对象，前面用await关键字注明。当函数执行的时候，一旦遇到await就会先返回，等到触发的异步操作完成，再接着执行函数体内后面的语句

//实现自动调用
(async function () {
    try {
        let m = await $.get('./url');
        console.log(m);
    } catch (err) {
        console.log(err);
    }
})();

//用函数的形式调用
async function test() {
    try {
        let m = await $.get('./url');
        console.log(m);
    } catch (err) {
        console.log(err);
    }
}

捕获错误的方法

let fn = () => {    //异步函数
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            reject(100)
        }, 3000)
    })
}

//方法一
// let exe = async () => {
//     console.log('执行中...')
//     try{
//         let val = await fn()
//         console.log(val)
//     } catch(err) {
//         console.error(err)
//     }

// }

//方法二
let exe = async () => {
    console.log('执行中...')
    try{
        let val = await fn().catch(err => { console.err(err)})
        console.log(val)        //这个时候就会返回undefined
    } catch(err) {
        console.error(err)
    }

}

exe()

3、symbol与作用域

　　ES6的新增类型，值是由系统提供的symbol函数调用产生的，相同的symbol函数返回的的值是唯一的

　　作用： 属性私有化 - 数据保护

let a = Symbol('aaa');
let b = Symbol('aaa');
console.log(a, b, a == b, a === b)
//打印 Symbol(aaa) Symbol(aaa) false false

未使用Symbol时通过闭包实现

let Person = (function() {
    let _sex = ''
    let P = function(name, sex) {
        this.name = name;
        _sex = sex
    }
    P.prototype.getSex = function() {
        return _sex
    }
    return P
})()
console.log(new Person('aa', 12)

使用Symbol来实现

let Person = (function() {
    let _sex = Symbol('sex');    //通过Symbol实现唯一性
    let P = function(name, sex) {
        this.name = name;
        this[_sex] = sex
    }
    P.prototype.getSex = function() {
        return this[_sex]
    }
    return P

})()
console.log(new Person('aa', 12))

 4、promise对象

Promise是ES6中新增的异步编程解决方案，体现在代码中它是一个对象，可以通过Promise构造函数来实例化

Promise对象内部会维护一个状态

默认是：pending
成功：resolved
失败：rejected

Promise对象下有一个方法：then，该方法在Promise对象的状态发生改变的时候触发then的回调，如果发生异常会捕获异常到catch中

两个原型方法

Promise.prototype.then()       Promise.prototype.catch()

两个常用的静态方法

Promise.all()          Promise.resolve()

Promise.all的用法

let fn = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            // resolve('ok')
            reject('no')
        }, 3000)
    })
}

//调用
fn().then(res => {    //resolve后会被调用
    console.log(res)
}).catch(err => {    //reject后会被调用
    console.log('err', err)
}).finally(() => {    //最终都会被调用
    console.log(arguments)
})

Promise.resolve的三种用法

let fn = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('ok')
            // reject('no')
        }, 3000)
    })
}

//用法一
Promise.resolve(fn()).then(res => {
    console.log(res)
}).catch(err => {
    console.log('err', err)
})

//用法二
Promise.resolve({
    then(resolve, reject) {
        setTimeout(() => {
            resolve('haha')
        }, 3000)
    }
}).then(res => {
    console.log('method2', res)
})

//用法三
Promise.resolve('str').then(res => {
    console.log(res)
})

 promise延伸

let fn = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('ok')
            // reject('no')
        }, 3000)
    })
}

fn().then(res => {
    console.log(1)
    return Promise.reject()
}, err =>{
    console.log(2)
}).then(res => {
    console.log(3)
}, err => {
    console.log(4)
return Promise.reject()
}).then(res => {
    console.log(5)
}, err => {
    console.log(6)
})
//通常来讲会依次执行下去，每一层的then依赖底层自动返回的new Promise对象，即使第一层失败，那么到第二层的时候是成功的
//如果需要返回失败，就需要在每一层阻断用return Promise.reject()，catch也和then一样，返回一个resolve对象的promise对象

promise对象初始化实现连调的写法

new Promise((resolve, reject) => {
    let chain = Promise.resolve()
    chain = chain.then(() => {
    throw new Error('this is second')
    })
    chain = chain.then(() => {
    console.log('this is first')
    })
    chain.catch((err) => {
    throw err
    })
})

5、generator函数

　　在形式上，Generator是一个普通的函数，但是有两个特征，一是，function命令与函数名之间有一个星号， 二是，function函数体内部使用yield语句，定义遍历器的每个成员，即不同的内部状态；

　　generator返回一个迭代函数，调用next方法才能执行generator函数中的每一个yield

<script>
    let fn = () => {    //异步函数
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve(100)
            }, 3000)
        })
    }

    let gFn = function* (){  //generator函数
        console.log(1)
        let res = yield fn()
        console.log(res)
        console.log(3)
    }

    //在generator函数中，需要其执行，需要先调用一次gFn.next(), 这个时候就会返回一个{value, done}的对象，value表示函数执行后的返回值，而done表示是否执行完成，再次调用的时候，把返回值value对象通过fn.next进行回传，那么在函数内部的yield就可以收到对应的结果了
    let exe = callBack => {        //自主封装的执行generator函数的方法
        let fn = callBack();    //需要保存的句柄
        
        let next = data => {
            let {value, done} = fn.next(data);
            if(done) return;
            value.then(res => {
                next(res)
            })

        }

        next()
    }

    exe(gFn)
</script>