Javascript 简明教程

JavaScript - Abstraction

Abstraction in JavaScript

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

The Abstraction in JavaScript can be achieved using the abstract class. In object-oriented programming, the abstraction concept allows you to hide the implementation details and expose features only to the users.

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

For example, you can execute the Math object methods in JavaScript by accessing the method using its name but can’t see how it is implemented. Same way array methods like push(), pop(), etc., can be executed, but you don’t know how it is implemented internally.

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

So, the abstraction makes code cleaner by exposing the required features and hiding the internal implementation details.

How to Achieve Abstraction in JavaScript?

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

In most programming languages, you can achieve abstraction using the abstract class. The abstract class contains only method declaration but not implementation. Furthermore, you need to implement the methods declared in the abstract class into the child class. Also, you can’t create an instance of the abstract class.

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

JavaScript doesn’t allow to create an abstract class like Java or CPP natively, but you can achieve the same functionality using the object constructor function.

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

First, let’s create an abstract class using the example below.

Creating the Abstract Class

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

In the below example, the fruit() function initializes the name property. When anyone creates an instance of the fruit(), the value of the constructor property becomes equal to the ‘fruit’. So, we throw an error to prevent creating an instance of the fruit.

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

Also, we have added the getName() method to the prototype. After that, we create an instance of the fruit() constructor, and you can observe the error in the output.

<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.

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

In the above example, you learned to achieve the abstract class functionality.

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

Now, you will learn to extend the abstract class and implement the methods defined in the abstract class via the example below.

Extending the Abstract Class

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

In the example below, fruit() constructor is similar to the above example. We have implemented the Apple() constructor, initializing the name property.

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

After that, we assign the prototype of the fruit() function to the Apple() function using the Object.create() method. It means Apple() function inherits the properties and methods of the fruit() class.

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

After that, we have created the instance of the Apple() class and invoked the getName() method.

<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() 方法。因此,它是隐藏的。

The prototype implements the getName() method in the above code. So, it is hidden.

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

This way, you can use an object constructor to achieve abstraction in JavaScript.