JavaScript 类的完整指南

短命女 2023-09-28 08:03 23阅读 0赞

JavaScript 使用原型继承：每个对象都从其原型对象继承属性和方法。

传统的类作为*创建对象的蓝图*，在 Java 或 Swift 等语言中使用，在 JavaScript 中不存在。原型继承只处理对象。

原型继承可以模拟经典的类继承。为了将传统类引入 JavaScript，ES2015 标准引入了`class`语法：原型继承之上的语法糖。

这篇文章让你熟悉 JavaScript 类：如何定义一个类，初始化实例，定义字段和方法，理解私有和公共字段，掌握静态字段和方法。

#### 目录 ####

*  [1.定义：class关键字][1._class]
 *  [2.初始化：constructor()][2._constructor]
 *  [3. 字段][3.]
    
     *  [3.1 公共实例字段][3.1]
     *  [3.2 私有实例字段][3.2]
     *  [3.3 公共静态字段][3.3]
     *  [3.4 私有静态字段][3.4]
 *  [4. 方法][4.]
    
     *  [4.1 实例方法][4.1]
     *  [4.2 获取器和设置器][4.2]
     *  [4.3 静态方法][4.3]
 *  [5.继承：扩展][5.]
    
     *  [5.1 父构造函数：constructor()中的super( )][5.1 _constructor_super_]
     *  [5.2 父实例：方法中的super][5.2 _super]
 *  [6.对象类型检查：instanceof][6._instanceof]
 *  [7. 类和原型][7.]
 *  [8.类功能可用性][8.]
 *  [9. 结论][9.]

### 1.定义：*class*关键字 ###

special 关键字`class`在 JavaScript 中定义了一个类：

`class User {`

`// The body of class`

`}`

上面的代码定义了一个类`User`。花括号`{ }`分隔类主体。请注意，此语法名为*类声明*。

您没有义务指明班级名称。通过使用*类表达式*，您可以将类分配给变量：

`const UserClass = class {`

`// The body of class`

`};`

您可以轻松地将类导出为 ES2015 模块的一部分。*这是默认导出*的语法：

`export default class User {`

`// The body of class`

`}`

和一个*命名的导出*：

`export class User {`

`// The body of class`

`}`

当您创建类的*实例*时，该类变得有用。实例是包含类描述的数据和行为的对象。

[正在上传…重新上传取消][Link 1]

运算符在 JavaScript中`new`实例化类：`instance = new Class()`.

例如，您可以`User`使用`new`运算符实例化该类：

`const myUser = new User();`

`new User()`创建`User`类的一个实例。

### 2.初始化：*constructor()* ###

`constructor(param1, param2, ...)`是初始化实例的类主体中的一个特殊方法。这是您为字段设置初始值或进行任何类型对象设置的地方。

在以下示例中，构造函数设置字段的初始值`name`：

`class User {`

`constructor(name) {`

`this.name = name;`

`}`

`User`的构造函数有一个参数`name`，用于设置字段的初始值`this.name`。

构造函数内部的`this`值等于新创建的实例。

用于实例化类的参数成为构造函数的参数：

`class User {`

`constructor(name) {`

`name; // => 'Jon Snow'`

`this.name = name;`

`}`

`const user = new User('Jon Snow');`

`name`构造函数内的参数具有值`'Jon Snow'`。

如果您没有为该类定义构造函数，则会创建一个默认构造函数。默认构造函数是一个空函数，它不会修改实例。

同时，一个 JavaScript 类最多可以有一个构造函数。

### 3. 字段 ###

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

1.  类实例上的字段
2.  类本身的字段（又名静态）

这些字段还具有 2 个级别的可访问性：

1.  公共：该字段可在任何地方访问
2.  私有：该字段只能在类的主体内访问

#### 3.1 公共实例字段 ####

让我们再看一下之前的代码片段：

`class User {`

`constructor(name) {`

`this.name = name;`

`}`

该表达式`this.name = name`创建一个实例字段`name`并为其分配一个初始值。

稍后您可以`name`使用属性访问器访问字段：

`const user = new User('Jon Snow');`

`user.name; // => 'Jon Snow'`

`name`是一个*公共字段*，因为您可以在`User`类主体之外访问它。

当字段在构造函数中隐式创建时，就像在前面的场景中一样，可能很难掌握字段列表。您必须从构造函数的代码中破译它们。

更好的方法是显式声明类字段。无论构造函数做什么，实例总是具有相同的字段集。

[类字段提案][Link 2]允许您在类的主体内定义字段。另外，您可以立即指示初始值：

`class SomeClass {`

`field1;`

`field2 = 'Initial value';`

`// ...`

`}`

让我们修改`User`类并声明一个公共字段`name`：

`class User {`

`name;`

`constructor(name) {`

`this.name = name;`

`}`

`const user = new User('Jon Snow');`

`user.name; // => 'Jon Snow'`

`name;`在类的主体内部声明了一个公共字段`name`。

以这种方式声明的公共字段具有表现力：快速查看字段声明足以理解类的数据结构。

此外，类字段可以在声明时立即初始化。

`class User {`

`name = 'Unknown';`

`constructor() {`

`// No initialization`

`}`

`const user = new User();`

`user.name; // => 'Unknown'`

`name = 'Unknown'`在类体内声明一个字段`name`并用 value 初始化它`'Unknown'`。

公共字段的访问或更新没有限制。您可以读取构造函数、方法内部和类外部的公共字段并为其赋值。

#### 3.2 私有实例字段 ####

封装是一个重要的概念，它可以让您隐藏类的内部细节。使用封装类的人只依赖于该类提供的公共接口，而不会耦合到该类的实现细节。

当实现细节发生变化时，考虑到封装的类更容易更新。

隐藏对象内部数据的一个好方法是使用私有字段。这些是只能在它们所属的类中读取和更改的字段。类的外界不能直接改变私有字段。

> *私有字段*只能在类的主体内访问。

使用特殊符号为字段名称添加前缀`#`以使其私有，例如`#myField`. `#`每次使用该字段时都必须保留前缀：声明、阅读或修改它。

让我们确保该字段`#name`可以在实例初始化时设置一次：

`class User {`

`#name;`

`constructor(name) {`

`this.#name = name;`

`}`

`getName() {`

`return this.#name;`

`}`

`const user = new User('Jon Snow');`

`user.getName(); // => 'Jon Snow'`

`user.#name; // SyntaxError is thrown`

`#name`是一个私有字段。您可以`#name`在`User`. 该方法`getName()`（更多关于[下一节][4.]中的方法）可以访问私有字段`#name`。

但是，如果您尝试访问类主体`#name`之外的私有字段`User`，则会引发语法错误：`SyntaxError: Private field '#name' must be declared in an enclosing class`.

#### 3.3 公共静态字段 ####

您还可以在类本身上定义字段：*静态字段*。这些有助于定义类常量或存储特定于类的信息。

要在 JavaScript 类中创建静态字段，请使用特殊关键字`static`后跟字段名称：`static myStaticField`。

让我们添加一个`type`指示用户类型的新字段：管理员或常规。静态字段`TYPE_ADMIN`和`TYPE_REGULAR`是区分用户类型的方便常量：

`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('Site Admin', User.TYPE_ADMIN);`

`admin.type === User.TYPE_ADMIN; // => true`

`static TYPE_ADMIN`并`static TYPE_REGULAR`在类中定义静态变量`User`。要访问静态字段，您必须使用类后跟字段名称：`User.TYPE_ADMIN`和`User.TYPE_REGULAR`.

#### 3.4 私有静态字段 ####

有时甚至静态字段也是您想要隐藏的实现细节。在这方面，您可以将静态字段设为私有。

要将静态字段设为私有，请在字段名称前加上`#`特殊符号：`static #myPrivateStaticField`.

假设您想限制`User`类的实例数。要隐藏有关实例限制的详细信息，您可以创建私有静态字段：

`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('Jon Snow');`

`new User('Arya Stark');`

`new User('Sansa Stark'); // throws Error`

静态字段`User.#MAX_INSTANCES`设置允许的最大实例数，而`User.#instances`静态字段计算实际实例数。

这些私有静态字段只能在`User`类中访问。外部世界的任何东西都不能干扰限制机制：这就是封装的好处。

### 4. 方法 ###

字段保存数据。但是修改数据的能力是由作为类的一部分的特殊函数执行的：*方法*。

JavaScript 类支持实例方法和静态方法。

#### 4.1 实例方法 ####

实例方法可以访问和修改实例数据。实例方法可以调用其他实例方法，也可以调用任何静态方法。

例如，让我们定义一个`getName()`返回`User`类中名称的方法：

`class User {`

`name = 'Unknown';`

`constructor(name) {`

`this.name = name;`

`}`

`getName() {`

`return this.name;`

`}`

`const user = new User('Jon Snow');`

`user.getName(); // => 'Jon Snow'`

`getName() { ... }`是`User`类内部的一个方法。`user.getName()`是一个方法调用：它执行方法并返回计算值（如果有）。

在类方法以及构造函数中，`this`值等于类实例。用于`this`访问实例数据：`this.field`，甚至调用其他方法：`this.method()`。

让我们添加一个`nameContains(str)`具有一个参数并调用另一个方法的新方法：

`class User {`

`name;`

`constructor(name) {`

`this.name = name;`

`}`

`getName() {`

`return this.name;`

`}`

`nameContains(str) {`

`return this.getName().includes(str);`

`}`

`const user = new User('Jon Snow');`

`user.nameContains('Jon'); // => true`

`user.nameContains('Stark'); // => false`

`nameContains(str) { ... }`是一种`User`接受一个参数的类方法`str`。不仅如此，它还执行实例的另一个方法`this.getName()`来获取用户名。

方法也可以是私有的。要使方法成为私有前缀，请在其名称前加上`#`.

让我们将`getName()`方法设为私有：

`class User {`

`#name;`

`constructor(name) {`

`this.#name = name;`

`}`

`#getName() {`

`return this.#name;`

`}`

`nameContains(str) {`

`return this.#getName().includes(str);`

`}`

`const user = new User('Jon Snow');`

`user.nameContains('Jon'); // => true`

`user.nameContains('Stark'); // => false`

`user.#getName(); // SyntaxError is thrown`

`#getName()`是私有方法。在方法内部，`nameContains(str)`您可以这样调用私有方法：`this.#getName()`.

是私有的，`#getName()`不能在`User`类体之外调用。

#### 4.2 获取器和设置器 ####

getter 和 setter 模仿常规字段，但对字段的访问和更改方式有更多控制。

getter 在尝试获取字段值时执行，而 setter 在尝试设置值时执行。

为了确保 的`name`属性`User`不能为空，让我们将私有字段包装`#nameValue`在 getter 和 setter 中：

`class User {`

`#nameValue;`

`constructor(name) {`

`this.name = name;`

`}`

`get name() {`

`return this.#nameValue;`

`}`

`set name(name) {`

`if (name === '') {`

``throw new Error(`name field of User cannot be empty`);``

`}`

`this.#nameValue = name;`

`}`

`const user = new User('Jon Snow');`

`user.name; // The getter is invoked, => 'Jon Snow'`

`user.name = 'Jon White'; // The setter is invoked`

`user.name = ''; // The setter throws an Error`

`get name() {...}`getter 在您访问字段的值时执行：`user.name`。

While`set name(name) {...}`在字段更新时执行`user.name = 'Jon White'`。如果新值是空字符串，setter 会抛出错误。

#### 4.3 静态方法 ####

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

要创建静态方法，请使用特殊关键字`static`，后跟常规方法语法：`static myStaticMethod() { ... }`.

使用静态方法时，需要记住两条简单的规则：

1.  静态方法*可以访问*静态字段
2.  静态方法*不能访问*实例字段。

例如，让我们创建一个静态方法来检测是否已经使用了具有特定名称的用户。

`class User {`

`static #takenNames = [];`

`static isNameTaken(name) {`

`return User.#takenNames.includes(name);`

`}`

`name = 'Unknown';`

`constructor(name) {`

`this.name = name;`

`User.#takenNames.push(name);`

`}`

`const user = new User('Jon Snow');`

`User.isNameTaken('Jon Snow'); // => true`

`User.isNameTaken('Arya Stark'); // => false`

`isNameTaken()`是一种静态方法，它使用静态私有字段`User.#takenNames`来检查所采用的名称。

静态方法可以是私有的：`static #staticFunction() {...}`. 同样，它们遵循隐私规则：您只能在类主体内调用私有静态方法。

### 5.继承：*扩展* ###

JavaScript 中的类使用`extends`关键字支持单继承。

在表达式`class Child extends Parent { }`中，`Child`类继承自`Parent`构造函数、字段和方法。

例如，让我们创建一个`ContentWriter`扩展父类的新子类`User`。

`class User {`

`name;`

`constructor(name) {`

`this.name = name;`

`}`

`getName() {`

`return this.name;`

`}`

`class ContentWriter extends User {`

`posts = [];`

`}`

`const writer = new ContentWriter('John Smith');`

`writer.name; // => 'John Smith'`

`writer.getName(); // => 'John Smith'`

`writer.posts; // => []`

`ContentWriter`继承自`User`构造函数、方法`getName()`和字段`name`。同样，`ContentWriter`该类声明了一个新字段`posts`。

请注意，父类的私有成员*不会被子类继承*。

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

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

例如，让`ContentWriter`构造函数调用 的父构造函数`User`，以及初始化 posts 字段：

`class User {`

`name;`

`constructor(name) {`

`this.name = name;`

`}`

`getName() {`

`return this.name;`

`}`

`class ContentWriter extends User {`

`posts = [];`

`constructor(name, posts) {`

`super(name);`

`this.posts = posts;`

`}`

`const writer = new ContentWriter('John Smith', ['Why I like JS']);`

`writer.name; // => 'John Smith'`

`writer.posts // => ['Why I like JS']`

`super(name)`子类内部`ContentWriter`执行父类的构造函数`User`。

请注意，在子构造函数中，您必须`super()`在使用`this`关键字之前执行。调用`super()`确保父构造函数初始化实例。

`class Child extends Parent {`

`constructor(value1, value2) {`

`// Does not work!`

`this.prop2 = value2;`

`super(value1);`

`}`

#### 5.2 父实例：方法中的*super* ####

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

`class User {`

`name;`

`constructor(name) {`

`this.name = name;`

`}`

`getName() {`

`return this.name;`

`}`

`class ContentWriter extends User {`

`posts = [];`

`constructor(name, posts) {`

`super(name);`

`this.posts = posts;`

`}`

`getName() {`

`const name = super.getName();`

`if (name === '') {`

`return 'Unknwon';`

`}`

`return name;`

`}`

`const writer = new ContentWriter('', ['Why I like JS']);`

`writer.getName(); // => 'Unknwon'`

`getName()`子类直接从父类`ContentWriter`访问方法。`super.getName()``User`

此功能称为[方法覆盖][Link 3]。

请注意，您也可以使用`super`静态方法来访问父级的静态方法。

### 6.对象类型检查：*instanceof* ###

`object instanceof Class`是确定是否`object`是 的实例的运算符`Class`。

让我们看看`instanceof`操作员的实际操作：

`class User {`

`name;`

`constructor(name) {`

`this.name = name;`

`}`

`getName() {`

`return this.name;`

`}`

`const user = new User('Jon Snow');`

`const obj = {};`

`user instanceof User; // => true`

`obj instanceof User; // => false`

`user`是`User`类的一个实例，`user instanceof User` 计算结果为`true`。

空对象`{}`不是 的实例`User`，对应`obj instanceof User`的是`false`。

`instanceof`是多态的：操作符检测一个子类作为父类的一个实例。

`class User {`

`name;`

`constructor(name) {`

`this.name = name;`

`}`

`getName() {`

`return this.name;`

`}`

`class ContentWriter extends User {`

`posts = [];`

`constructor(name, posts) {`

`super(name);`

`this.posts = posts;`

`}`

`const writer = new ContentWriter('John Smith', ['Why I like JS']);`

`writer instanceof ContentWriter; // => true`

`writer instanceof User; // => true`

`writer`是子类的一个实例`ContentWriter`。运算符的`writer instanceof ContentWriter`计算结果为`true`。

同时`ContentWriter`是一个子类`User`。因此也`writer instanceof User`评估`true`为。

如果您想确定实例的确切类怎么办？您可以使用该`constructor`属性并直接与该类进行比较：

`writer.constructor === ContentWriter; // => true`

`writer.constructor === User; // => false`

### 7. 类和原型 ###

我必须说，JavaScript 中的类语法很好地从原型继承中抽象出来。为了描述`class`语法，我什至没有使用*原型*这个术语。

但是这些类是建立在原型继承之上的。[每个类都是一个函数，并在作为构造函数调用][Link 4]时创建一个实例。

以下两个代码片段是等效的。

班级版本：

`class User {`

`constructor(name) {`

`this.name = name;`

`}`

`getName() {`

`return this.name;`

`}`

`const user = new User('John');`

`user.getName(); // => 'John Snow'`

`user instanceof User; // => true`

使用原型的版本：

`function User(name) {`

`this.name = name;`

`}`

`User.prototype.getName = function() {`

`return this.name;`

`}`

`const user = new User('John');`

`user.getName(); // => 'John Snow'`

`user instanceof User; // => true`

如果您熟悉 Java 或 Swift 语言的经典继承机制，则类语法更容易使用。

无论如何，即使你在 JavaScript 中使用类语法，我建议你好好掌握[原型继承][Link 5]。

### 8.类功能可用性 ###

这篇文章中介绍的类特性分布在 ES2015 和第 3 阶段的提案中。

在 2019 年底，类特征分为：

*  公共和私有实例字段是[类字段提案的一部分][Link 2]
 *  私有实例方法和访问器是[类私有方法提案的一部分][Link 6]
 *  公共和私有静态字段和私有静态方法是[类静态特性提案的一部分][Link 7]
 *  其余部分是 ES2015 标准的一部分。

### 9. 结论 ###

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

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

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

JavaScript 中的类变得越来越方便使用。

*您如何看待使用`#`前缀私有属性？*

[1._class]: https://dmitripavlutin.com/javascript-classes-complete-guide/#1-definition-class-keyword
[2._constructor]: https://dmitripavlutin.com/javascript-classes-complete-guide/#2-initialization-constructor
[3.]: https://dmitripavlutin.com/javascript-classes-complete-guide/#3-fields
[3.1]: https://dmitripavlutin.com/javascript-classes-complete-guide/#31-public-instance-fields
[3.2]: https://dmitripavlutin.com/javascript-classes-complete-guide/#32-private-instance-fields
[3.3]: https://dmitripavlutin.com/javascript-classes-complete-guide/#33-public-static-fields
[3.4]: https://dmitripavlutin.com/javascript-classes-complete-guide/#34-private-static-fields
[4.]: https://dmitripavlutin.com/javascript-classes-complete-guide/#4-methods
[4.1]: https://dmitripavlutin.com/javascript-classes-complete-guide/#41-instance-methods
[4.2]: https://dmitripavlutin.com/javascript-classes-complete-guide/#42-getters-and-setters
[4.3]: https://dmitripavlutin.com/javascript-classes-complete-guide/#43-static-methods
[5.]: https://dmitripavlutin.com/javascript-classes-complete-guide/#5-inheritance-extends
[5.1 _constructor_super_]: https://dmitripavlutin.com/javascript-classes-complete-guide/#51-parent-constructor-super-in-constructor
[5.2 _super]: https://dmitripavlutin.com/javascript-classes-complete-guide/#52-parent-instance-super-in-methods
[6._instanceof]: https://dmitripavlutin.com/javascript-classes-complete-guide/#6-object-type-checking-instanceof
[7.]: https://dmitripavlutin.com/javascript-classes-complete-guide/#7-classes-and-prototypes
[8.]: https://dmitripavlutin.com/javascript-classes-complete-guide/#8-class-features-availability
[9.]: https://dmitripavlutin.com/javascript-classes-complete-guide/#9-conclusion
[Link 1]: https://dmitripavlutin.com/static/262db61c59f663901d75fbe5c60ec28d/da8b6/instances-3.png
[Link 2]: https://github.com/tc39/proposal-class-fields
[Link 3]: https://en.wikipedia.org/wiki/Method_overriding
[Link 4]: https://dmitripavlutin.com/gentle-explanation-of-this-in-javascript/#4-constructor-invocation
[Link 5]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain
[Link 6]: https://github.com/tc39/proposal-private-methods
[Link 7]: https://github.com/tc39/proposal-static-class-features/