JavaScript之ES中的类继承与Promise

类

ES5中的类及继承

javascript 复制代码

    //人
    function Person(name,age){
        this.name = name;
        this.age = age;
    }
    Person.prototype.eat = function () {
        console.log(this.name + "eat");
    }
    //程序员，继承，人
    function Programmer(name,age,language){
        //构造函数继承
        Person.call(this,name,age);
        //新属性
        this.language = language;
    }
    //继承，人，原型
    Programmer.prototype.__proto__ = Person.prototype;
    //设置原型上的新方法
    Programmer.prototype.code = function () {
        console.log(this.name + "code");
    }

ES6中的类及继承

javascript 复制代码

    class Person {
        //属性设置在构造函数中
        constructor(name, age) {
            this.name = name;
            this.age = age;
        }
        //设置原型上的方法
        //大括号中的就是原型
        eat() {
            console.log(this.name + "eat");
        }
    }
    //声明Programmer类，继承Person类
    //通过关键字继承父类
    class Programmer extends Person {
        //extends关键字继承原型方法
        //构造函数
        //如果子类和父类的属性一样，则子类可以不写构造函数，在实例化时继承父类的构造函数
        //如果有新属性则必须写构造函数
        constructor(name, age, language) {
            //通过super关键字继承父类的构造函数
            super(name, age);
            //设置新属性
            this.language = language;
            //如果子类写了构造函数，就必须通过super继承父类的构造函数
            //而且必须在设置新属性之前吸纳继承父类的构造函数
        }
        //原型通过extends自动继承
        //设置子类的新方法
        code() {
            console.log(this.name + "code");
        }
    }
    //实例化
    let p = new Programmer("张三", 20, "java");
    p.eat();
    p.code();

Promise

同步与异步

同一个文件中的JS是一个同步的过程

javascript 复制代码

    console.log(1);
    console.log(2);

第二行的代码要等第一行的代码结束再执行

javascript 复制代码

    function load(){
        //创建script标签，把1.js加载到页面中
        let script = document.createElement('script');
        script.src = '1.js';
        //插入到head标签中
        document.head.appendChild(script);
    }

从其他文件中引入的js代码与单签文件中的js代码是异步关系

异步关系的代码，执行过程中就是"竞速"

JS中有很多异步关系的代码

比如获取数据就是异步过程，页面上的其他内容，不会等待获取数据之后再创建

但是，有的内容就需要获取到数据后，才能展示，如何解决？

需求：在异步"竞速"的过程中，把代码捋顺出来------Promise

javascript 复制代码

    function load(){
        return new Promise((resolve,reject)=>{
            let script = document.createElement('script');
            script.src = '1.js';
            document.head.appendChild(script);
            script.onload = function (){
                resolve("成功")
            }
            script.onerror = function (){
                reject("失败")
            }
        })
    }
    load().then(()=>{
        console.log(2);
    },()=>{
        console.log("有错误");
    })

捋顺序的核心，时Promiase的回调函数和then里面的方法

then里面的方法，会在回调函数执行完毕之后再执行

在回调函数中，需要人为规定"成功"和"失败"两个状态

当处于成功状态时，就执行resolve方法；当处于失败时，就执行reject方法

如果回调函数最终执行了resolve方法，后续就会执行then中的第一个方法；如果回调函数最终执行了reject方法，后续就会执行then中的第二个方法

resolve和reject两个方法的参数，会传递给then的参数

javascript 复制代码

    function load(src){
        return new Promise((resolve,reject)=>{
            let script = document.createElement('script');
            script.src = src;
            document.head.appendChild(script);
            script.onload = function (){
                resolve("成功")
            }
            script.onerror = function (){
                reject("失败")
            }
        })
    }
    //按照顺序依次引入a-d.js，最后打印加载完毕
    load('a.js').then(()=>{
        load('b.js')
        //load方法返回Pomise对象
        //但是没有把这个对象返回
        //所以这个函数没有返回值
        //then方法会提供一个空对象作为返回值
    },()=>{
        console.log('有错误')
    }).then(()=>{
        load('c.js')
        //load方法返回Pomise对象
    },()=>{
        console.log('有错误')
    }).then(()=>{
        load('d.js')
        //load方法返回Pomise对象
    }).then(()=>{
        console.log('加载完毕')
    },()=>{
        console.log('有错误')
    })

以上代码中，真正有顺序的只是加载a.js在最前面，加载b.js一定在a.js之后

其余c-d的加载和打印加载完毕，没有书序，还是处于异步"竞速"状态

Promise对象只是以确保，当前对象的回调函数与当前then里面的方法的执行顺序

then方法的返回值

如果执行方法有返回值，则就会把放回的返回值设置成then方法的返回值

此例中，then里面执行第一个函数

此时第一个函数没有返回值

不管执行then里面的哪一个方法如果没有返回值，则then方法会自动提供一个空Promise对象作为返回值

只有Promise对象的回调函数和该对象调用的then方法中的函数才有先后关系

正确写法：

javascript 复制代码

    //按照顺序依次引入a-d.js，最后打印加载完毕
    load('a.js').then(()=>{
        return load('b.js')
        //load方法返回Pomise对象
        //但是没有把这个对象返回
        //所以这个函数没有返回值
        //then方法会提供一个空对象作为返回值
    },()=>{
        console.log('有错误')
    }).then(()=>{
        return load('c.js')
        //load方法返回Pomise对象
    },()=>{
        console.log('有错误')
    }).then(()=>{
        return load('d.js')
        //load方法返回Pomise对象
    }).then(()=>{
        console.log('加载完毕')
    },()=>{
        console.log('有错误')
    })