当前位置：首页 > news >正文

ECMAScript6语法：类

news 来源：原创 2024/9/21 3:24:15

在 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());

执行结果：