JavaScript之ES中的类继承与Promise

类 

ES5中的类及继承

//人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中的类及继承

    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是一个同步的过程

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

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

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

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

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

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

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

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

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

    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的参数

    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方法中的函数才有先后关系

正确写法：

    //按照顺序依次引入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('有错误')})