ES6基础语法之class类介绍
更新时间:2022年5月2日 21:35 点击:393 作者:農碼一生
一、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 = class let 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(); //姓名:孙悟空,性别:男,年龄:500 let 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(); //姓名:孙悟空,性别:男,年龄:500 let tc = new Teacher("唐僧","男",100,6000); tc.sayHi(); //姓名:唐僧,性别:男,年龄:100,月薪:6000 //------------------------------------------------ //注意: //(1)子类 constructor 方法中必须有 super ,且必须出现在 this 之前。 //(2)调用父类构造函数,只能出现在子类的构造函数。 // 例如在sayHi()中调用super就会报错;
到此这篇关于ES6基础语法之class类的文章就介绍到这了。希望对大家的学习有所帮助,也希望大家多多支持猪先飞。
原文出处:https://www.cnblogs.com/wml-it/p/15967797.html
上一篇: ES6基础语法之函数介绍
下一篇: ES6基础语法之字符串扩展
相关文章
- 以前我们开发大型项目时都会用到svn来同步,因为开发产品的人过多,所以我们会利用软件来管理,今天发有一居然可以利用php来管理svn哦,好了看看吧。 代码如下 ...2016-11-25
- 操作类就是把一些常用的一系列的数据库或相关操作写在一个类中,这样调用时我们只要调用类文件,如果要执行相关操作就直接调用类文件中的方法函数就可以实现了,下面整理了...2016-11-25
PHP Fatal error: Cannot use object of type stdClass as array in错误
下面一起来看看在php开发中碰到PHP Fatal error: Cannot use object of type stdClass as array in错误问题的解决办法吧。 普通的数组出现如下错误 代码...2016-11-25- 本文实例讲述了JS+CSS实现分类动态选择及移动功能效果代码。分享给大家供大家参考,具体如下:这是一个类似选项卡功能的选择插件,与普通的TAb区别是加入了动画效果,多用于商品类网站,用作商品分类功能,不过其它网站也可以用,...2015-10-21
- 本文章来人大家介绍一个php文件上传类的使用方法,期望此实例对各位php入门者会有不小帮助哦。 简介 Class.upload.php是用于管理上传文件的php文件上传类, 它可以帮...2016-11-25
- 无限级分类在开发中经常使用,例如:部门结构、文章分类。无限级分类的难点在于“输出”和“查询”,例如 将文章分类输出为<ul>列表形式; 查找分类A下面所有分类包含的文章。1.实现原理 几种常见的实现方法,各有利弊。其中...2015-10-23
- 在一些复杂的系统中,要求对信息栏目进行无限级的分类,以增强系统的灵活性。那么PHP是如何实现无限级分类的呢?我们在本文中使用递归算法并结合mysql数据表实现无限级分类。 递归,简单的说就是一段程序代码的重复调用,当把...2015-10-23
- 这篇文章主要介绍了mybatis-plus实体类主键策略有3种(小结),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-08-27
- ecshop商品无限级分类代码 function cat_options($spec_cat_id, $arr) { static $cat_options = array(); if (isset($cat_options[$spec_cat_id]))...2016-11-25
- 这篇文章主要介绍了C#类中static变量用法,实例分析了static变量使用技巧与相关注意事项,需要的朋友可以参考下...2020-06-25
- 在php中要实现分页比起asp中要简单很多了,我们核心就是直接获取当前页面然后判断每页多少再到数据库中利用limit就可以实现分页查询了,下面我来详细介绍分页类实现程序...2016-11-25
- System.Threading.Timer 是一个简单的轻量计时器,它使用回调方法并由线程池线程提供服务。在必须更新用户界面的情况下,建议不要使用该计时器,因为它的回调不在用户界面线程上发生...2020-06-25
- 下面小编就为大家带来一篇C#学习笔记整理_浅谈Math类的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2020-06-25
- 这篇文章主要介绍了详解ES6实现类的私有变量的几种写法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-02-10
- 这篇文章主要给大家介绍了关于Java匿名内部类的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-08-31
- 一、数据库设计 -- -- Table structure for table `category` -- CREATE TABLE `category` ( `id` int(11) NOT NULL auto_increment, `catpath` varchar(255) default NULL, `name` varchar(255) default NULL...2015-11-08
- 本文实例讲述了PHP多文件上传类,分享给大家供大家参考。具体如下:<?phpclass Test_Upload{ protected $_uploaded = array(); protected $_destination; protected $_max = 1024000; protected $_messages =...2015-10-30
- 这篇文章主要给大家介绍了ES5和ES6中类的区别的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-12-21
JPA如何使用nativequery多表关联查询返回自定义实体类
这篇文章主要介绍了JPA如何使用nativequery多表关联查询返回自定义实体类,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教...2021-11-18- 本篇文章是对C#中Process类的使用进行了详细的分析介绍,需要的朋友参考下...2020-06-25