189 8069 5689
这篇文章主要介绍了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类的示例分析”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!