Javascript 简明教程

JavaScript - Abstraction

Abstraction in JavaScript

抽象类可用于实现 JavaScript 中的抽象。在面向对象的编程中，抽象概念允许你隐藏实现细节，并且仅向用户公开相关特性。

例如，可以使用某个方法的名称访问该方法，以执行 JavaScript 中的 Math 对象的方法，但无法查看其实现方式。同样，可以执行 push()、pop() 等数组方法，但不知道其内部是如何实现的。

因此，抽象代码会通过暴露必需的特性和隐藏内部实现细节来使其更清晰。

How to Achieve Abstraction in JavaScript?

在大多数编程语言中，可以使用 abstract class 来实现抽象。 abstract class 仅包含方法声明，但不包含实现。此外，需要在子类中实现抽象类中声明的方法。此外，不能创建抽象类的实例。

JavaScript 并不像 Java 或 CPP 那样允许创建抽象类，但可以使用对象构造器函数实现相同的功能。

首先，使用下面的示例创建一个抽象类。

Creating the Abstract Class

在下面的示例中，fruit() 函数初始化 name 属性。当任何人创建 fruit() 的实例时，构造器属性的值变得等于“fruit”。因此，我们将抛出错误以防止创建 fruit 的实例。

此外，我们已将 getName() 方法添加到原型中。然后，创建一个 fruit() 构造器的实例，可以在输出中观察到错误。

<html>
<body>
   <div id = "output"> </div>
   <script>
      try {
         // Object constructor
         function fruit() {
            this.name = "Fruit";
            if (this.constructor === fruit) {// Preventing the instance of the object
               throw new Error("You can't create the instance of the fruit.");
            }
         }
         // Implementing method in the prototype
         fruit.prototype.getName = function () {
            return this.name;
         }
         const apple = new fruit();
      } catch (error) {
         document.getElementById("output").innerHTML = error;
      }
   </script>
</body>
</html>

Error: You can't create the instance of the fruit.

在上面的示例中，学习了实现抽象类功能。

现在，将学习使用下面的示例扩展抽象类并实现抽象类中定义的方法。

Extending the Abstract Class

在下面的示例中，fruit() 构造器与上面的示例类似。我们已实现 Apple() 构造器，初始化了 name 属性。

然后，使用 Object.create() 方法，将 fruit() 函数的原型分配给 Apple() 函数。这意味着 Apple() 函数继承 fruit() 类的属性和方法。

然后，创建 Apple() 类的实例并调用 getName() 方法。

<html>
<body>
   <div id = "output">The name of the fruit is: </div>
   <script>
      // Abstract class
      function fruit() {
         this.name = "Fruit";
         if (this.constructor === fruit) { // Preventing the instance of the object
            throw new Error("You can't create the instance of the fruit.");
         }
      }

      // Implementing method in the prototype
      fruit.prototype.getName = function () {
         return this.name;
      }

      // Child class
      function Apple(fruitname) {
         this.name = fruitname;
      }

      // Extending the Apple class with the fruit class
      Apple.prototype = Object.create(fruit.prototype);

      const apple = new Apple("Apple");
      document.getElementById("output").innerHTML += apple.getName();
   </script>
</body>
</html>

The name of the fruit is: Apple

该方法在上面的代码中实现 getName() 方法。因此，它是隐藏的。

通过这种方式，可以使用一个对象构造器来实现 JavaScript 中的抽象。