ECMAScript6语法：类

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

执行结果：