首页 > 其他分享 >ES6.Class技术

ES6.Class技术

时间:2023-09-11 21:32:10浏览次数:37  
标签:salary ES6 name 子类 技术 class Person Class

第六讲 ES6.Class

​ 编程语言语言,都有关于类的定义和使用,java,C#,C++。使用class的关键字,js之前的版本,没有用。保留字,ES6启用了该关键字。

6.1 传统方法

通过构造函数定义,并生成对象。

 //定义传统的类,js之前的写法
        function Person(name,salary) {
            this.name=name;
            this.salary=salary;
        }
        //定义它的方法
        Person.prototype.toString=function () {
            return this.name+","+this.salary;
        }
  //如何来获取
        let p1=new Person('张晨光',90000);
        console.log(p1.toString());
        //这时候,用的是function来定义一个类。

和传统面向对象语言,写法差别很大,很难受。

接下来,看看ES6是如何写的呢?

6.2 ES6类的定义:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //使用ES6来定义类,启用了之前的保留字class
        class Person{
            //构造方法
            constructor(name,salary){
                this.name=name;
                this.salary=salary;
            }
            //其他方法
            toString(){
                    return `${this.name},${this.salary}`;
             }
        }
        //使用该类
        let p2=new Person('张晨光老师',100000);
        console.log(p2.toString());
        //这种方式,看起来就是面向对象,ES6更加面向对象;
        console.log(typeof(Person));  //输出的是一个function
        //证明ES6,class对应了之前的function
        let result=(Person===Person.prototype.constructor);
        console.log(result);
        //证明类本身指向了构造方法.
    </script>
</head>
<body>

</body>
</html>

6.3 静态方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //class Person{}
        const Person=class{
            constructor(name,salary){
                this.name=name;
                this.salary=salary;
            }
            //自定义方法
            showName(){
                return `姓名:${this.name}`;
            }
            showSalary(){
                return `工资:${this.salary}`;
            }
            //静态方法
            static isFee(salary){
                if(salary<5000)
                    return '不用交税';
            }
        }  //类定义的结束

        //调用之
        let p3=new Person('张晨光',4500);
        console.log(p3.showName());
        console.log(p3.showSalary());

        //调用类的静态方法;类名.静态方法
        console.log(Person.isFee(4500));
    </script>
</head>
<body>

</body>
</html>

使用静态方法的时候,语法

static 方法名(参数){}

调用的时候:类名.方法名()

6.4 继承

基本语法

子类 extends 父类,在之前ES5通过修改构造函数模式实现。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //人的定义
        class Person{
            //构造方法的定义
            constructor(name,salary){
                this.name=name;
                this.salary=salary;
            }
            //自定义方法
            showName(){
                return `姓名:${this.name}`;
            }
            showSalary(){
                return `工资:${this.salary}`;
            }
        }
        //定义一个子类
        class YellowPerson extends  Person{
            //子类如果没有定义construtor,则该方法会默认添加上去,即任何子类都有constructor()
            //constructor(...args){ super(...args) }
            //这时候,子类需要针对父类进行加工处理
            constructor(name,salary,skin){
                super(name,salary);//super()使用,在子类构造方法最前面;
                this.skin=skin;  //
            }
            //子类增加一个自己的方法;
            showInfo(){
                //通过super.方法,来调用父类的方法
                return super.showName()+","+super.showSalary()+",肤色:"+this.skin;
            }
        }
        //调用之;
        let yp=new YellowPerson('张晨光',8888,'青铜色');
        //测试实例;
        //console.log(yp instanceof YellowPerson);  //yp是不是子类的实例
        //console.log(yp instanceof Person);  //yp是不是父类的实例
        console.log(yp.showInfo());
    </script>
</head>
<body>

</body>
</html>

总结:

1.ES6类定义的语法,使用class 类名{

​ //构造方法

//自定义方法

}

2.ES6 静态方法的定义和使用

3.ES6 子类继承父类的语法和使用

标签:salary,ES6,name,子类,技术,class,Person,Class
From: https://blog.51cto.com/teayear/7438775

相关文章

  • 提取.NET开发的DLL中的类为json文件工具软件ConsoleApp_Dll_Class2Json_V1.0开源了
    提取.NET开发的DLL中的类为json文件工具软件ConsoleApp_Dll_Class2Json_V1.0开源了同步在github和gitee上面发布。github https://github.com/binghe021/ConsoleApp_Dll_Class2Jsongitee https://gitee.com/binghe021/ConsoleApp_Dll_Class2Json......
  • 台积电、博通、英特尔等巨头积极进军硅光子技术领域 | 百能云芯
    据传,台积电与博通、英伟达等大客户密切合作,共同致力于新一代超高速运算芯片的开发,预计明年下半年将开始迎来大规模订单。为此,台积电已投入逾200名研发人员,成立专门的先遣研发团队,以抓住基于硅光子制程的商机。尽管台积电对于相关传闻保持沉默,但他们高度重视硅光子技术。台积电副总......
  • 池化技术
    一、基本原理    将资源或任务进行复用,以减少重复创建和销毁的开销。通过预先创建并管理资源或任务的池,可以实现资源的高效共享和利用。    关键字:资源复用、预分配和初始化、动态调整资源规模二、应用场景    以下是池化技术的常用场景:    2.1......
  • 技术解码 | GB28181/SIP/SDP 协议--EasyGBS国标GB28181平台国标视频技术SIP解析
    EasyGBS国标视频云服务是基于国标GB/T28181协议的视频能力平台,可实现的视频功能包括:实时监控直播、录像、检索与回看、语音对讲、云存储、告警、平台级联等功能。平台部署简单、可拓展性强,支持将接入的视频流进行全终端、全平台分发,分发的视频流包括RTSP、RTMP、FLV、HLS、WebRTC等......
  • 短视频商城系统的技术架构与最佳实践
    短视频商城系统的概念正在迅速崭露头角,它不仅融合了视频内容和电子商务,还需要一个坚固的技术架构来支持其功能。在本文中,我们将探讨构建短视频商城系统的关键技术组件以及最佳实践,并提供一些示例代码来说明这些概念。技术架构概览短视频商城系统的技术架构包括以下关键组件:前端应用......
  • 直播系统源码平台内容安全与版权维护技术:DRM
    在数字化的时代,人们的生活中已深入到网络中来,许多人加入了直播系统源码平台中来,直播系统源码平台为用户们提供了一个发布图文短视频、开启直播、获取最新资讯的地方,这也衍生出了许多网红、主播等用户,他们会在直播系统源码平台发布高质量、受众多粉丝喜爱的短视频与直播,当然,直播系统......
  • 技术文档 | 免下载、0配置、多任务并发,在Docker Image中使用OpenSCA
    想跳过下载步骤快速使用OpenSCA检测代码风险?想实现多个项目并发扫描?在DockerImage中使用OpenSCA即可轻松实现。一起来looklook目的方便用户使用最新版本的 OpenSCA-cli保证环境的一致性,消除不同操作系统对结果的影响可以方便在本地维护不同版本的 OpenSCA-cli方便在特定情况下......
  • 技术人的悲哀:阿里的CTO是如何搞垮一个独角兽公司的
    技术人的悲哀:阿里的CTO是如何搞垮一个独角兽公司的向治洪在知乎工程师​关注他 2人赞同了该文章这是一个关于小军(化名)的故事,他是一个互联网独角兽公司的技术大牛,也是前任技术总监的心肝宝贝,可惜他的好日子没能持续多久,因为公司空降了一位阿里巴巴出来的......
  • 前端科普系列-Babel:把 ES6 送上天的通天塔
    前端科普系列-Babel:把ES6送上天的通天塔无名之辈一个有代码洁癖的前端小开发,热爱生活,追求极致​关注他 108人赞同了该文章摘要本系列文章旨在帮助学习者了解前端,主要覆盖前端的基础知识,但不深入讲解,定位为大而全并非细而精,适合非前端开发的同学......
  • 基于虚拟仿真技术的汽车燃油泵控制
    在当前激烈的竞争环境下,汽车行业正在加速产业和技术更迭,整车厂对大型ECU嵌入式控制系统和软件的需求迫在眉睫。然而,复杂而庞大的汽车系统往往由多个物理系统组成,系统所对应的模型都需要在不同的领域实现:发动机、变速器、油门、制动等等等等,仅仅应用MBD是不够的,需要通过协同仿真软......