在 ES6 中新增了类的概率,多个具有相同属性和方法的对象就可以抽象为类。类和对象的关系如下:
(1)类抽象了对象的公共部分,它泛指某一大类(class)。
(2)对象特指通过类实例化的一个具体的对象。
1、创建类和实例
JavaScript 在它的早期版本就支持类,直到 ES6 引入 class 关键字后才有了自己的语法。构建类可以使用 class 关键字,类体在一对大括号{}中,在大括号{}中可以定义类成员(如方法或构造函数)。
每一个类中包含了一个特殊的方法 constructor(),它是类的构造函数,其作用是对类进行初始化。通过 new 关键字生成对象实例后会自动调用构造函数。如果没有显示定义,在类的内部会自动创建一个 constructor() 构造函数。
在定义类的同时可以在类中添加方法。类中的所有方法不需要写 function 关键字,而且多个方法之间不需要添加分隔符号。
【实例】创建一个名为 Person 的类,在类中使用 constructor() 构造函数,并添加 show() 方法。
//定义类
class Person {
//构造函数
constructor(name, blogInfo, blogUrl) {
this.name = name;
this.blogInfo = blogInfo;
this.blogUrl = blogUrl;
}
//方法
show() {
alert("姓名:" + this.name + "\n博客信息:" + this.blogInfo + "\n博客地址:" + this.blogUrl);
}
}
//使用 new 关键字来实例化对象
var p = new Person("KevinPan", "您好,欢迎访问 pan_junbiao的博客", "https://blog.csdn.net/pan_junbiao");
//调用类中的方法
p.show();
执行结果:
2、类的继承
类的继承是指子类可以继承父类的一些属性和方法。要实现类的继承,就需要在创建类时使用 extends 关键字。
在定义的子类中需要使用 super() 方法,该方法用于引用父类的构造函数。
【实例】创建父类 Type 和子类 Brand,在子类的构造函数中使用 super() 方法,通过调用子类的 show() 方法输出商品信息。
//定义:父类
class Type {
//父类构造函数
constructor(name) {
this.name = name;
}
//父类方法
showType() {
return "商品类型:" + this.name;
}
}
//定义:子类并使用 extends 关键字继承父类
class Brand extends Type {
//子类构造函数
constructor(name, bname) {
//使用 super()方法,引用父类的构造函数
super(name);
this.bname = bname;
}
//子类方法
show() {
return this.showType() + "<br>商品品牌:" + this.bname;
}
}
//使用 new 关键字来实例化对象
var b = new Brand("手机", "OPPO");
//调用子类中的方法
document.write(b.show());
执行结果:
3、静态成员
在创建类的类体中,在成员前面添加 static 关键字就可以定义静态成员。静态成员只能通过类名进行调用。
【实例】创建一个球类 Ball,在类中定义静态成员,通过类名调用静态成员输出球的信息。
//定义:类
class Ball {
//静态成员
static type = "篮球";
static col = "黄色";
//静态方法
static show() {
return "球的价格:60";
}
}
//通过类名调用:静态成员、静态方法
document.write("球的类型:" + Ball.type);
document.write("<br>球的颜色:" + Ball.col);
document.write("<br>" + Ball.show());
执行结果: