【JavaScript】class (es6)

[swiftwind0405]

JavaScript 类用构造函数初始化实例，定义字段和方法。甚至可以使用 static 关键字在类本身上附加字段和方法。

继承是使用 extends 关键字实现的：可以轻松地从父类创建子类，super 关键字用于从子类访问父类。

要利用封装，将字段和方法设为私有以隐藏类的内部细节，私有字段和方法名必须以 # 开头。

初始化: constructor()

constructor(param1, param2, ...) 是用于初始化实例的类主体中的一种特殊方法。可以设置字段的初始值或进行任何类型的对象设置。

字段

类字段是保存信息的变量，字段可以附加到两个实体：

1. 类实例上的字段
2. 类本身的字段(也称为静态字段)

字段有两种级别可访问性：

1. public：该字段可以在任何地方访问
2. private：字段只能在类的主体中访问

公共实例字段

    class User {
      name;
    
      constructor(name) {
        this.name = name;
      }
    }
    
    const user = new User('前端小智');
    user.name; // => '前端小智'

私有实例字段

私有字段只能在类的主体中访问。

class User {
  #name;

  constructor (name) {
    this.#name = name;
  }

  getName() {
    return this.#name;
  }
}

const user = new User('前端小智')
user.getName() // => '前端小智'

user.#name  // 抛出语法错误

公共静态字段

定义类常量或存储特定于该类的信息

class User {
  static TYPE_ADMIN = 'admin';
  static TYPE_REGULAR = 'regular';

  name;
  type;

  constructor(name, type) {
    this.name = name;
    this.type = type;
  }
}

const admin = new User('前端小智', User.TYPE_ADMIN);
admin.type === User.TYPE_ADMIN; // => true

私有静态字段

隐藏静态字段的实现细节

class User {
  static #MAX_INSTANCES = 2;
  static #instances = 0;

  name;

  constructor(name) {
    User.#instances++;
    if (User.#instances > User.#MAX_INSTANCES) {
      throw new Error('Unable to create User instance');
    }
    this.name = name;
  }
}

new User('张三');
new User('李四');
new User('王五'); // throws Error

方法

getter 和 setter 模仿常规字段，但是对如何访问和更改字段具有更多控制。在尝试获取字段值时执行 getter ，而在尝试设置值时使用 setter 。

静态方法是直接附加到类的函数，它们持有与类相关的逻辑，而不是类的实例。

继承: extends

JavaScript 中的类使用extends关键字支持单继承。在class Child extends Parent { }表达式中，Child类从Parent继承构造函数，字段和方法。

父构造函数：constructor()中的super()

如果希望在子类中调用父构造函数，则需要使用子构造函数中可用的 super() 特殊函数。

父实例:方法中的super

如果希望在子方法中访问父方法，可以使用特殊的快捷方式 super 。

参考资料

• 你需要知道的 JavaScript 类(class)的这些知识

[swiftwind0405]

• ES6 系列之 Babel 是如何编译 Class 的(上) mqyqingfeng/Blog#105
• Master the JavaScript Interview: What’s the Difference Between Class & Prototypal Inheritance? | by Eric Elliott | JavaScript Scene | Medium
• 一万字ES6的class类，再学不懂，请把我锤死（语法篇） - 掘金