es6中class类的声明和继承

张哥编程

发布于 2024-12-19 08:22:35

3660

ECMAScript 6-第三讲本章目标：掌握es6中class类的声明掌握类的继承 Json的新的应用 Promise对象的方法本章内容： Class类的声明：所谓的java的面向对象和这个很相似，但是在js其实是基于对象的，所谓的基于对象就是一直在用对象而不是，而不是完全使用面向对象的思想，面向对象我们都知道是封装，继承，多态，而基于对象，其实就是在使用对象。对象比数组强的地方在于他有属性和方法。所以在js中很少使用类这个方式。但是在es6中提供了这样一种声明方式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>class</title> </head> <body>

<script>
    //我们使用以前的方式声明,是以构造函数的方式声明的类的属性
        function Person(name,age) {
            this.name = name;
            this.age = age;
        }
        //然后再给这个类加一个方法
    Person.prototype.say = function () {
        console.log("我的名字是"+this.name+"今年"+this.age);
    }
    //然后声明一个变量来充当对象
    var p = new Person("wyh",30);
        p.say();
</script>

</body> </html>

我们看到以前是用js写的这种声明对象的方式很怪异，很不方便，那么再ES6中，给我们提供了类的声明方式，我们改造一下刚才的例子

那我们看到这个新增的class的声明方式和我们使用java书写的时候是不是区别就不大了。接下来我们就以可以看一下类的另一种特性 Class的继承：

//我们在原有的基础上，来看一下ES6 的继承 class Teacher extends Person{ constructor(name,age,school){ super(name,age); this.school = school; } study(){ console.log(this.name+"==="+this.age+"==="+this.school); } } let t = new Teacher("张三丰",30,"AAA软件"); t.say(); t.study();

JSON的新应用： JSON对象： JSON.stringify() 串行化 JSON.parse() 反串行化简写：

（属性和值）名字一样可以简写
方法一样可以简写（:function省） JSON 的标准写法：
只能用双引号(“”);
所有的（属性）名字只能用双引号(“”)包起来； <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>json</title> </head> <body> <SCRIPT> //JSON的标准格式 let obj = {"a":3,"name":"张三丰","res":true}; //这是json的标准格式，那么json格式还可以简写 console.log(obj) let a=20; let b="abc"; let str = {a,b,c:true,say(){console.log(this.a)}}; console.log(str); //输出之后我们可以看到，{a,b,c:true}=={a:a,b:b,c:true} //那么我们经常需要把json格式作为字符串传输给我们使用的语言，比如java，php等 let strObj = JSON.stringify(obj); console.log(strObj); //相反如果我们把其他接口传过来的字符串，需要转换成json格式的话 let jsonObj = JSON.parse(strObj); console.log(jsonObj); console.log(jsonObj.a,jsonObj.name) //我们使用这两种转换的方式更加的简洁

</SCRIPT> </body> </html> Promise的使用： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>promise</title> </head> <body>

<script>
    //promise这个对象们主要是用来解决像是异步操作中回调地狱这样的情况
    //那么我们先做一个回调函数
    function demo(fun) {
        //我们使用&&判断一下，这个是由短路功能的
        //如果前面成功就执行后面，如果前面不成功就不执行后面
        setTimeout(()=>{
            fun && fun();
        },1000)

    }
    //那么我们在调用demo这个函数的时候需要传递一个函数
    demo(()=>{
        console.log(1);
        
    })
</script>

</body> </html>

那么如果说我们遇到很多层的调用，这时候不光是代码不优雅，还不容易理解层次关系，我们改进一下这个代码看看效果

这时候我们看到他是每间隔1秒到用一次，那么我们可以像是写同步一样的去写这种代码么？我们先来认识一下promise这个对象 Promise：抽象表达：promise是js进行异步编程的新的解决方案具体表达：从语法上来说：promise是一个构造函数从功能上来说：promise对象用来封装一个异步操作对象并可以捕获其结果状态的特点 Promise 异步操作有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。除了异步操作的结果，任何其他操作都无法改变这个状态。 Promise 对象只有：从 pending 变为 fulfilled 和从 pending 变为 rejected 的状态改变。只要处于 fulfilled 和 rejected ，状态就不会再变了即 resolved（已定型）。

状态的缺点无法取消 Promise ，一旦新建它就会立即执行，无法中途取消。如果不设置回调函数，Promise 内部抛出的错误，不会反应到外部。当处于 pending 状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。 Promise的执行流程

then 方法 then 方法接收两个函数作为参数，第一个参数是 Promise 执行成功时的回调，第二个参数是 Promise 执行失败时的回调，两个函数只会有一个被调用。

接下来我们使用新的方式改写一下刚才的调用的方式 //我们使用新的方式来写一下 function foo() { return new Promise((resolve,reject)=>{ setTimeout(()=>{ resolve(); },1000) }) } foo().then(()=>{ console.log("a"); return foo(); }).then(()=>{ console.log("b"); return foo(); }).then(()=>{ console.log("c"); return foo(); }) Promise中的方法 Catch（）首先介绍一下promise的catch（），这个方法就像是try--catch语句块一样，是输出异常的

我们发现这时候他就会把异常输出 All（）接下来我们来介绍一下promise的all（） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>promise-all</title> </head> <body> <script> let one = new Promise((resolve, reject) => { setTimeout(()=>{ resolve("aaa"); }) }) let two = new Promise((resolve, reject) => { setTimeout(()=>{ resolve("bbb"); }) }) let there = new Promise((resolve, reject) => { setTimeout(()=>{ resolve("ccc"); }) }) //这时候有三个promise对象，他们的结果我想要全部获取 // 也就是说这三个promise都执行，执行完了才赋值给回调函数 Promise.all([one,two,there]).then( arr =>{ let [one,two,there] =arr; console.log(one); console.log(two); console.log(there); } ) </script> </body> </html> Race（）那么我们现在再来看一下race这个方法，这个方法跟all使用方式是一样的，但是他们中会区分谁快，谁慢，就像赛跑一样我们修改一下刚才的方法

新的promise的例子入门 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Promise</title> </head> <body>

<script>
    let p = new Promise((resolve, reject) => {
        //执行异步任务
        setTimeout(()=>{
          const time = Date.now();
          //如果当前时间是偶数就代表成功，否则代表失败
            if(time %2 ==0){
                //如果成功，调用resolve（value）
                resolve('成功的数据'+time)
            }else{
                // 如果失败调用rejrct（reason）
                reject('失败的数据'+time)
            }
        },1000)
    })

    p.then(
        value =>{
            //接受到成功的数据
            console.log("成功回调",value);
        },reason =>{
            //接受到失败的数据
            console.log("失败的回调",reason);
        }
    )
</script>

</body> </html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021-03-09，如有侵权请联系 cloudcommunity@tencent.com 删除

函数