JavaScript 抽象

抽象在JavaScript中可以通过抽象类来实现。在面向对象编程中，抽象的概念允许你隐藏实现细节，并只向用户暴露功能。

例如，在JavaScript中你可以通过名称访问Math对象的方法来执行它，但你看不到它是如何实现的。同样地，像数组的push()、pop()等方法可以被执行，但你不知道它们内部是如何实现的。

因此，抽象使得代码更简洁，通过暴露必需的功能同时隐藏内部实现细节。

如何在JavaScript中实现抽象？

在大多数编程语言中，你可以通过抽象类来实现抽象。抽象类中只包含方法声明而不包含实现。此外，你需要在子类中实现抽象类中声明的方法。并且，你不能直接创建抽象类的实例。

JavaScript并不像Java或C++那样原生支持创建抽象类，但是你可以使用对象构造函数来达到相同的效果。

首先，让我们通过下面的例子来创建一个抽象类。

创建抽象类

在下面的例子中，fruit()函数初始化name属性。当任何人试图创建fruit()的一个实例时，构造器属性的值将等于fruit。所以我们抛出一个错误来阻止创建fruit的实例。

另外，我们在原型上添加了一个getName()方法。然后，我们创建了fruit()构造函数的一个实例，在输出中你可以看到错误信息。

<html>
<body>
   <div id = "output"> </div>
   <script>
      try {
         // 对象构造函数
         function fruit() {
            this.name = "Fruit";
            if (this.constructor === fruit) { // 阻止创建对象的实例
               throw new Error("You can't create the instance of the fruit.");
            }
         }
         // 在原型中实现方法
         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.

在上述例子中，你学到了如何实现抽象类的功能。

现在，你将学习如何扩展抽象类并在子类中实现抽象类中定义的方法，如下面的例子所示。

扩展抽象类

在下面的例子中，fruit()构造函数与上面的例子相似。我们实现了Apple()构造函数，初始化name属性。

之后，我们使用Object.create()方法将fruit()函数的原型赋值给Apple()函数。这意味着Apple()函数继承了fruit类的属性和方法。

之后，我们创建了Apple类的一个实例，并调用了getName()方法。

<html>
<body>
   <div id = "output">The name of the fruit is: </div>
   <script>
      // 抽象类
      function fruit() {
         this.name = "Fruit";
         if (this.constructor === fruit) { // 阻止创建对象的实例
            throw new Error("You can't create the instance of the fruit.");
         }
      }

      // 在原型中实现方法
      fruit.prototype.getName = function () {
         return this.name;
      }

      // 子类
      function Apple(fruitname) {
         this.name = fruitname;
      }

      // 用 fruit 类扩展 Apple 类
      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中实现抽象。