在 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());
执行结果: