符合中小企业对网站设计、功能常规化式的企业展示型网站建设
本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...
商城网站建设因基本功能的需求不同费用上面也有很大的差别...
手机微信网站开发、微信官网、微信商城网站...
这篇文章主要介绍了ES6中class类的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
成都创新互联公司主营满洲网站建设的网络公司,主营网站建设方案,App定制开发,满洲h5小程序设计搭建,满洲网站营销推广欢迎满洲等地区企业咨询
通过class可以定义类,新的class写法只是让对象原型的写法更加清晰,更像面向对象编程的语法而已。
1 class 声明类
2 constructor 定义构造函数初始化
3 extends 继承父类
4 super 调用父级构造方法
5 static 定义静态方法和属性
6 父类方法可以重写
es5通过 构造函数实例化 对象的方法
// 人 function People(name, sex) { this.name = name; this.sex = sex; } // 这个height这种添加方式是属于函数对象的,不属于实例对象,这样的属性称之为静态成员 People.height = '180'; People.prototype.height1 = '100'; // 添加方法 People.prototype.play = function(){ console.log('打篮球'); } let zn = new People('zhangning', '男'); zn.play();// 输出 打篮球 console.log(zn); console.log(zn.height);// 输出 undefined console.log(zn.height1);// 输出 100,必须通过prototype添加才能添加到实例对象上
通过class实现
class People{ // 静态属性 static,对于static 标注的方法属于类,不属于实例对象 static height = '100'; static change(){ console.log('我可以改变世界'); } // 构造方法 名字不能更改(在使用new People的时候会自动执行实例对象上的constructor方法) constructor(name, sex){ this.name = name; this.sex = sex; } // 添加方法必须使用该语法,不能使用es5的完整形式(play: function(){} 这种形式不支持,必须使用play()形式) // 成员属性 play(){ console.log('打篮球'); } } let zn = new People('zhangning', '男'); console.log(zn); console.log(zn.height);// undefined static 标注的方法属于类,不属于实例对象 console.log(People.height);// 100
使用es5构造函数实现继承
// 举例 chinese 继承 People 属性 function People(name, sex) { this.name = name; this.sex = sex; } People.prototype.play = function(){ console.log('打LOL'); } function Student(name, sex, like, height){ // 通过call方法,改变this值,this指向chinese中的this,也就是chinese的一个实例对象 People.call(this, name, sex); this.like = like; this.height = height; } // 设置子集构造函数原型 Student.prototype = new People;// 这样就会有父级的一个方法 Student.prototype.constructor = Student;// 做一个校正,没有这行代码也无所谓 // 声明子类方法 Student.prototype.photo = function(){ console.log('去拍照'); } // 实例化 const zn = new Student('zhangning', '男', '打篮球', '187'); console.log(zn)
使用es6 class 类 实现继承 及 父类方法的重写
// 声明父类 class People{ // 父类构造方法 constructor(name, sex) { this.name = name; this.sex = sex; } // 父类成员属性 play(){ console.log('打LOL'); } } // 声明子类 使用extends 继承父类 class Student extends People { // 构造方法 constructor(name, sex, like, height){ super(name, sex);// super 就是父类的constructor构造函数,这样调用 this.like = like; this.height = height; } photo(){ console.log('去拍照'); } // 对父类中的play方法进行重写,子类是不能去调用父类的同名方法的, play(){ // super(); 不允许,在普通的成员方法里面是不能出现super()去调用父类的同名方法的,会报错,只能完全重写 console.log('我会打LOL,还会打篮球'); } } const zn = new Student('zhangning', '男', '打篮球', '187'); console.log(zn)
class 中 getter 和 setter 设置
class People{ get like(){ return '打篮球'; } set like(newVal){ // 通过传过来的newVal值,进行操作,改变 like console.log('改变like值'); } } let p = new People(); console.log(p.like)// 输出 打篮球 p.like = 'LOL';// 然后通过 set like 进行操作
感谢你能够认真阅读完这篇文章,希望小编分享的“ES6中class类的示例分析”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!