JavaScript 如何使用 class

JavaScript 的 class 关键字是在 ES6 中引入的。 可以通过它来声明一个类，取代了通过函数创建类的方法

通常，我们会为一些含有相同属性的对象定义一个类，比如，我们有一些书，每本书都有“书名”、“作者”等相同的属性

定义 class

我们为这些书定义一个类，类名叫 Book

            class Book {
                constructor(title, author){
                    this.title = title;
                    this.author = author;
                }
            }
        

其中 constructor 是它的构造函数，一个类里只能有一个构造函数

实例属性

如上所示，类的实例属性是在 constructor 中定义或初始化的

现在，我们可以通过这个 Book 类实例化两本书

            let sanguo = new Book("三国演义", "罗贯中");
            let shuihu = new Book("水浒传", "施耐庵");
        

这样我们就拥有了 sanguo 和 shuihu 两个对象

实例方法

下一步我们给这个类添加一个实例方法，用来描述这本书的信息

            class Book {
                /* ... 此处省略了一些代码 */

                getInfo(){
                    return "这本书叫《" + this.title
                    + "》，作者是" + this.author;
                }
            }
        

使用这个实例方法

            console.log(sanguo.getInfo());
            console.log(shuihu.getInfo());
        

打印如下：

            这本书叫《三国演义》，作者是罗贯中
            这本书叫《水浒传》，作者是施耐庵
        

静态方法、静态属性

静态方法与静态属性使用 static 关键字来定义

            class Book {
                /* ... 此处省略了一些代码 */

                // 读书次数
                static readNum = 0

                // 读书
                static read(book) {
                    Book.readNum++; //每读一次书，数量+1
                    return '阅读了《' + book.title + '》';
                }
            }
        

静态方法与静态函数只能通过类来调用，不能通过实例对象调用，使用如下：

            console.log(Book.read(sanguo) + ',当前读书次数为' + Book.readNum);
            console.log(Book.read(shuihu) + ',当前读书次数为' + Book.readNum);
        

通过 Book 来调用静态方法 read 与静态属性 readNum

打印如下：

            阅读了《三国演义》,当前读书次数为1
            阅读了《水浒传》,当前读书次数为2
        

class 继承

关于 class 的继承请查看：JavaScript 使用 extends 继承 class

完整代码

            // 定义一个名叫 Book 的类
            class Book {
                // 构造函数
                constructor(title, author){
                    //实例属性在构造函数中定义或初始化
                    this.title = title;
                    this.author = author;
                }

                // 实例方法，获取本书信息
                getInfo(){
                    return "这本书叫《" + this.title
                    + "》，作者是" + this.author;
                }

                // 静态属性 读书次数
                static readNum = 0

                // 静态方法 读书
                static read(book) {
                    Book.readNum++; //每读一次书，数量+1
                    return '阅读了《' + book.title + '》';
                }
            }

            // 实例化
            let sanguo = new Book("三国演义", "罗贯中");
            let shuihu = new Book("水浒传", "施耐庵");

            // 使用实例方法
            console.log(sanguo.getInfo());
            console.log(shuihu.getInfo());

            // 使用静态方法
            console.log(Book.read(sanguo) + ',当前读书次数为' + Book.readNum);
            console.log(Book.read(shuihu) + ',当前读书次数为' + Book.readNum);