【早阅】JS中的OOPS - 终极指南

作者：@Subham
原文：https://dev.to/codexam/oops-in-js-ultimate-4j34

背景

在现代软件开发中，面向对象编程（Object-Oriented Programming, OOP）是一种广泛使用的编程范式。JavaScript 作为一种多范式语言，也支持面向对象编程。最近，开发者 Subham 在 DEV Community 上发布了一篇名为 “OOPS in JS - Ultimate” 的文章，详细介绍了 JavaScript 中的面向对象编程概念，包括类、对象、继承、多态、封装等核心概念。

【第3251期】Webcodecs音视频编解码与封装技术探索

要点

面向对象编程的基本概念

解释了 OOP 的四个基本原则 —— 抽象、封装、继承和多态。

面向对象编程是一种通过创建对象来解决问题的编程范式。对象可以被看作是数据的集合，以及与这些数据交互的操作（方法）。

OOP 的四大支柱是：

• 抽象：隐藏内部细节，仅暴露必要的资讯。

• 封装：将各种组件（数据和方法）组合在一起（在一个胶囊中）。

• 继承：从现有事物派生新事物的行为。

• 多态：一个实体，多种形式。

JavaScript 中的类和对象

详细介绍了如何使用 class 关键字定义类，并通过 new 关键字创建对象。

在 OOP 中，类是对象的模板，它定义了对象的属性和方法；而对象是类的实例，它拥有类中定义的属性和方法。

【第2268期】Javascript 非同步& Event Loop！10 分钟轻松图解学习！

文章以 GoogleForm 类为例，演示了如何定义类、创建对象，以及如何访问对象的属性和方法。

• 类是对象的蓝图，它定义了对象的属性和方法。

• 对象是类的实例，它在内存中拥有实际的值。

原型和原型链

解释了 JavaScript 中的原型继承机制，以及如何通过 __proto__ 设置原型。

JavaScript 中的对象都有一个特殊的属性叫做 prototype，它指向另一个对象，这个对象被称为原型对象。当我们试图访问一个对象的属性或方法时，如果该对象自身没有该属性或方法，JavaScript 引擎会沿着原型链向上查找，直到找到为止。

文章中以示例代码演示了如何通过 __proto__ 属性设置对象的原型，并解释了原型继承的概念。

构造函数和构造函数的类型

讨论了构造函数的概念及其在类中的应用，包括无参构造函数、有参构造函数和拷贝构造函数。

【第2379期】JavaScript是如何工作的：Shadow DOM 内部构造及如何构建独立组件

构造函数是一种特殊的函数，用于创建和初始化对象，设置它们的初始状态和属性。。在 JavaScript 中，可以使用 constructor 关键字定义构造函数。

文章介绍了构造函数的作用，并演示了如何使用构造函数创建对象，并为对象的属性赋初始值。此外，文章还介绍了参数化构造函数和拷贝构造函数的概念。

继承和方法重写

介绍了如何在 JavaScript 中实现继承，并通过 super 关键字重写父类的方法。

继承是 OOP 中一个重要的概念，它允许我们从现有的类创建新的类，并继承其属性和方法。

文章首先解释了继承的意义，然后以 Animal 类和 Monkey 类为例，演示了如何使用 extends 关键字实现继承。

【第2372期】JavaScript是如何工作的：类和继承及 Babel 和 TypeScript 代码转换探秘

此外，还介绍了不同类型的继承，继承是指一个类（子类）能够继承另一个类（父类）的属性和特征的能力。包括：

• 单一继承：一个类只继承自一个父类。

• 层次继承：多个子类继承自同一个父类。

• 多级继承：一个类继承自另一个继承自父类的子类。

• 混合继承：结合了单一继承、多重继承和层次继承的特点。

继承可以帮助我们：

• 代码复用：子类可以继承父类的属性和方法，避免代码重复。

• 代码组织：继承可以帮助我们建立类之间的层次关系，使代码更加清晰易懂。

方法重写

如果子类中定义了与父类同名的方法，则子类方法会覆盖父类方法，这种机制称为方法重写。

文章以示例代码演示了方法重写的概念，并介绍了 super 关键字的用法，可以用它来调用父类的方法。

方法重载

方法重载是指在同一个类中定义多个同名但参数列表不同的方法。然而，JavaScript 本身并不直接支持方法重载。

解释了 JavaScript 中没有真正意义上的方法重载，并提供了一种模拟方法重载的实现方式，即通过检查函数参数的数量和类型来执行不同的逻辑。

访问修饰符

虽然 JavaScript 没有内置的访问修饰符，但通过约定和 # 符号实现了类似的功能。

访问修饰符用于控制类成员的访问权限。JavaScript 中没有像 Java 或 C++ 那样的访问修饰符关键字，但是可以使用一些约定俗成的命名规范来模拟访问控制。

JavaScript 有三种访问修饰符：

• 公共 (Public)：公共成员可以从任何地方访问。

• 受保护 (Protected)：受保护成员只能在类内部及其子类中访问。（通过约定使用 _ 前缀表示）

• 私有 (Private)：私有成员只能在类内部访问。（使用 # 前缀表示）

静态方法

解释了静态方法的概念及其在类中的应用。

静态方法是属于类本身的方法，而不是属于类的任何特定实例。

介绍了静态方法和静态属性的概念，并以 Animal 类和 Human 类为例，演示了如何定义和使用静态方法。

• 静态方法使用类名调用，而实例方法使用实例调用。

• 静态方法不能直接访问实例属性或方法，而实例方法可以。

Getter 和 Setter

介绍了如何使用 get 和 set 关键字定义属性的 getter 和 setter。

Getter 和 Setter 是用于获取和设置对象属性的特殊方法。以 human 类为例，演示了如何使用 Getter 和 Setter 方法来控制对对象属性的访问。

instanceOf 运算符

讨论了如何使用 instanceOf 运算符检查对象是否是某个类的实例。

instanceof 运算符用于检查一个对象是否是某个类、子类或接口的实例。

分析

Subham 的文章通过详细的代码示例和解释，帮助开发者深入理解 JavaScript 中的面向对象编程。以下是一些关键分析点：

1. 原型继承：JavaScript 中的原型继承机制是其面向对象编程的核心。通过 __proto__ 属性，开发者可以实现对象之间的继承关系，从而复用代码并减少冗余。

2. 构造函数：构造函数在创建对象时起到了关键作用。通过构造函数，开发者可以初始化对象的属性，并确保对象在创建时具有正确的状态。

3. 继承与多态：JavaScript 通过 extends 关键字支持继承，并通过 super 关键字实现方法重写。这种机制使得代码更具可扩展性和可维护性。

4. 访问修饰符：虽然 JavaScript 没有内置的访问修饰符，但通过 # 符号定义私有属性，并通过约定（如使用下划线前缀）定义受保护的属性，开发者可以实现类似的功能。

5. 静态方法：静态方法属于类本身，而不是类的实例。这种机制适用于不需要对象状态的工具函数或工厂方法。

影响

Subham 的文章对 JavaScript 开发者社区具有重要影响：

1. 提升开发者的技能：通过详细解释和示例，文章帮助开发者更好地理解和应用 JavaScript 中的面向对象编程概念，从而提升他们的编程技能。

2. 促进代码复用和维护：面向对象编程的核心原则（如继承和封装）有助于开发者编写更模块化、可复用和易于维护的代码。

3. 推动社区讨论：文章的发布可能会引发社区内关于 JavaScript 面向对象编程的进一步讨论和分享，从而促进知识的传播和共享。

结论

Subham 的 “OOPS in JS - Ultimate” 文章为 JavaScript 开发者提供了一个全面的学习资源，帮助他们深入理解并应用面向对象编程的概念。通过掌握这些核心概念，开发者可以编写更高效、可维护和可扩展的代码。未来，随着 JavaScript 语言的不断发展，面向对象编程的实践将继续在社区中占据重要地位。

AI 阅：了解技术资讯的一种方式。