文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

ES6基础语法之class类怎么用

2023-06-30 12:16

关注

这篇文章主要介绍了ES6基础语法之class类怎么用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇ES6基础语法之class类怎么用文章都会有所收获,下面我们一起来看看吧。

一、class基本语法

JavaScript 语言中,编写一个学生类,代码如下:(prototype可以个对象添加属性和方法)

function Student(stuno,stuname){this.stuno = stuno;this.stuname = stuname;}Student.prototype.stusex = "";Student.prototype.sayHi = function(){console.log("大家好,我是"+this.stuname+",我的学号是"+this.stuno+",性别:"+this.stusex);}var stu = new Student("001","孙悟空");stu.stusex = "男";//或// var stu = new Student();// stu.stuno = "001";// stu.stuname = "孙悟空";// stu.stusex = "男";stu.sayHi(); //大家好,我是孙悟空,我的学号是001,性别:男

ES6提供了更接近传统语言的写法,引入了Class这个概念:

constructor为构造函数,当创建对象的时候自动调用:

class Student{constructor(stuno,stuname) {this.stuno = stuno;this.stuname = stuname;}sayHi(){console.log("大家好,我是"+this.stuname+",我的学号是"+this.stuno);}}var stu = new Student("001","孙悟空");//或// var stu = new Student();// stu.stuno = "001";// stu.stuname = "孙悟空";stu.sayHi();//大家好,我是孙悟空,我的学号是001

注意:类的声明第一行除了class Student外,还可以如下写法:

let Student = classlet Student = class Student

二、类的属性和方法

实例属性和实例方法:

class Student{stuno = "";stuname = "";sayHi()  //此处方法有的地方称为原型方法{console.log("大家好,我是"+this.stuname+",我的学号是"+this.stuno);}}var stu = new Student();stu.stuno = "001";stu.stuname = "孙悟空";stu.sayHi();

静态属性和静态方法:

class Student{stuno = "";stuname = "";static proName = "";  //专业名称static proIntroduce(){console.log("专业名称:"+Student.proName);}sayHi(){console.log("大家好,我是"+this.stuname+",我的学号是"+this.stuno);}}Student.proName = "计算机";Student.proIntroduce();

三、实例方法的两种写法

方案一:(又称原型方法)

class Student{sayHi(){console.log("hi!");}}let stu = new Student();stu.sayHi();

等同于ES5中:

function Student(){}Student.prototype.sayHi=function(){console.log("hi!");}var stu = new Student();stu.sayHi();

方案二:

class Student{constructor(){this.sayHi = function(){console.log("hi");}}}let stu = new Student();stu.sayHi();

等同于ES5中:

function Student(){this.sayHi = function(){console.log("hi");}}var stu = new Student();stu.sayHi();

当两个方案冲突的时候,constructor里面的函数会覆盖外面的函数:

class Student{sayHi()  //等同Student.prototype.sayHi=function(){...}{console.log("hi!");}constructor(){this.sayHi = function() //等同在function内部定义{console.log("hello!");}}}let stu = new Student();stu.sayHi(); //hello!

等同于ES5中:

function Student(){this.sayHi = function(){console.log("hello!");}}Student.prototype.sayHi=function(){console.log("hi!");}var stu = new Student();stu.sayHi(); //hello!

四、class属性封装

在类的内部可以使用get和set关键字,对某个属性设置存值函数和取值函数,拦截该属性的存取行为。

class Student{get stuAge(){return this._stuAge;}set stuAge(age){if(age >= 18 && age <= 120)this._stuAge = age;else{this._stuAge = 18;console.log("年龄有错误,设置默认值18!");}}}let stu = new Student();stu.stuAge = 17;   //年龄有错误,设置默认值18!console.log(stu.stuAge); //18//------------------------------------------------------------------------------//注意://(1)在get和set后的属性名不能和函数里的取值和设置值的变量名相同(stuAge和_stuAge)//(2)getter不可单独出现//(3)getter与setter必须同级出现(不能一个在父类,一个在子类)

五、继承

通过 extends 实现类的继承。

//通过 extends 实现类的继承。class People //父类{name = "";sex = "";age = 0;sayHi(){console.log(`姓名:${this.name},性别:${this.sex},年龄:${this.age}`);}}class Student extends People  //子类继承父类,拥有父类的属性和方法{}class Teacher extends People //子类继承父类,拥有父类的属性和方法{salary = 0; //子类在父类基础上扩展一个属性sayHi() //子类在父类基础上重写父类方法{console.log(`姓名:${this.name},性别:${this.sex},年龄:${this.age},月薪:${this.salary}`);}}let stu = new Student();stu.name = "孙悟空";stu.sex = "男";stu.age = 500;stu.sayHi(); //姓名:孙悟空,性别:男,年龄:500let tc = new Teacher();tc.name = "唐僧";tc.sex = "男";tc.age = 100;tc.salary = 6000;tc.sayHi(); //姓名:唐僧,性别:男,年龄:100,月薪:6000

六、继承和构造方法

子类通过super()调用父类构造方法:

class People{constructor(name,sex,age){this.name = name;this.sex = sex;this.age = age;}sayHi(){console.log(`姓名:${this.name},性别:${this.sex},年龄:${this.age}`);}}class Student extends People{constructor(name,sex,age){super(name,sex,age);}}class Teacher extends People{constructor(name,sex,age,salary){super(name,sex,age);this.salary = salary;}sayHi(){console.log(`姓名:${this.name},性别:${this.sex},年龄:${this.age},月薪:${this.salary}`);}}let stu = new Student("孙悟空","男",500);stu.sayHi(); //姓名:孙悟空,性别:男,年龄:500let tc = new Teacher("唐僧","男",100,6000);tc.sayHi();//姓名:唐僧,性别:男,年龄:100,月薪:6000//------------------------------------------------//注意://(1)子类 constructor 方法中必须有 super ,且必须出现在 this 之前。//(2)调用父类构造函数,只能出现在子类的构造函数。//例如在sayHi()中调用super就会报错;

关于“ES6基础语法之class类怎么用”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“ES6基础语法之class类怎么用”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯