JavaScript 抽象 (Abstraction)

2025年4月2日 | 阅读4分钟

JavaScript 中的抽象是什么？

在 JavaScript 中，抽象是指隐藏复杂细节并仅显示对象的基本特征或功能性的概念。简单来说，它有助于我们降低复杂性，使我们能够有效地设计和实现复杂的软件系统。我们可以通过抽象类或接口来实现抽象。

抽象是隐藏实现细节并仅向用户显示功能的一种方式。换句话说，它忽略不相关的细节，只显示必需的细节。

注意事项

我们无法创建抽象类的实例。
它减少了代码重复。

我们为什么要在 JavaScript 中使用抽象？

在 JavaScript 中使用抽象，我们有几个重要的目的，例如：

简化

通过使用抽象，开发人员可以通过隐藏不必要的细节并仅公开基本部分来简化复杂系统。它使代码更易于理解和维护。

封装

通过使用抽象，我们可以封装特定函数的实现细节，并允许开发人员专注于功能使用，而不是如何实现它。因此，我们可以促进模块化并减少代码库不同部分之间的耦合。

可重用性

当我们把通用的模式和功能抽象成可重用的组件时，它有助于开发人员通过利用现有代码来节省时间和精力，而不是每次都重新编写代码。

灵活性

在抽象的帮助下，开发人员可以创建可以被底层不同方式实现的接口。它为适应不断变化的需求和环境提供了灵活性，而无需修改程序的很大一部分。

可维护性

当我们抽象掉实现细节时，它会降低出现错误的几率，并且它可以在不影响系统的其他部分的情况下对程序进行更改或更新。

特别是在 JavaScript 中，我们可以通过函数、类、模块和库等工具来实现抽象。在这些工具的帮助下，开发人员可以以一种促进清晰性、可维护性和可扩展性的方式来组织和构建他们的代码或程序。

如何在 JavaScript 中实现抽象？

在 JavaScript 中，当我们能够创建一种抽象，它涉及以一种隐藏复杂细节并将基本特征仅暴露给程序的其他部分的方式来组织代码。

如果你想在 JavaScript 中实现抽象，你需要创建一个抽象类和接口，尽管 JavaScript 对这些类型的概念没有原生支持。大多数开发人员经常使用原型、函数和面向对象的模式来强制执行抽象。

示例 1

 
// Define a function called `add` that takes two arguments, `a` and `b`, and returns their sum.
function add(a, b) {
    return a + b;
  }
  // Define a function called `subtract` that takes two arguments, `a` and `b`, and returns their difference.
  function subtract(a, b) {
    return a - b;
  }
    // Define a function called `multiply` that takes two arguments, `a` and `b`, and returns their product.
  function multiply(a, b) {
    return a * b;
  }
    // Define a function called `divide` that takes two arguments, `a` and `b`, and returns their quotient.
  function divide(a, b) {
    return a / b;
  }
    // Define a function called `calculate` that takes two arguments, `a` and `b`, and an operator, and returns the result of applying the operator to `a` and `b`.
  function calculate(a, b, operator) {
    switch (operator) {
      case 'add':
        return add(a, b);
      case 'subtract':
        return subtract(a, b);
      case 'multiply':
        return multiply(a, b);
      case 'divide':
        return divide(a, b);
      default:
        throw new Error('Invalid operator');
    }
  }
   // Call the `calculate` function with the arguments 5, 3, and 'add'.
  const result = calculate(5, 3, 'add');
  
  // Print the result to the console.
  console.log(result); // Output: 8

输出

示例 2

让我们以一个程序来检查我们是否可以创建抽象类的实例。

 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //creating a constructor function
        function vehicle()
        {
            this.vehicleName = vehicleName;
            throw new Error("you cannot create an instance of Abstract class");
        }
        Vehicle.prototype.display= function()
        {
            return this.vehicleName;
        }
        var vehicle = new Vehicle();
    </script>
</body>
</html>

输出

示例 3

让我们举一个实现抽象的例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //creating a constructor function
        function Vehicle()
        {
            this.vehicleName = "vehicleName";
            throw new Error("You cannot create an instance of Abstract Class");
        }
        Vehicle.prototype.display= function()
        {
            return "Vehicle is:" +this.vehicleName;
        }
        //creating a constructor function
        function Bike(vehicleName)
        {
            this.vehicleName = vehicleName;
        }
        //Creating object without using the function constructor
        Bike.prototype = Object.create(Vehicle.prototype);
        var bike= new Bike(" Hero Honda");
        document.writeln(bike.display());
    </script>
</body>
</html>

输出

示例 4

 
// Define a function called `calculateArea` that takes an object with a `width` and `height` property, and returns the area of the rectangle.
function calculateArea(rectangle) {
  return rectangle.width * rectangle.height;
}
// Define an object called `rectangle1` with a `width` of 5 and a `height` of 10.
const rectangle1 = {
  width: 3,
  height: 10
};
// Define an object called `rectangle2` with a `width` of 10 and a `height` of 20.
const rectangle2 = {
  width: 10,
  height: 20
};
// Call the `calculateArea` function with the `rectangle1` object as an argument.
const area1 = calculateArea(rectangle1);
// Call the `calculateArea` function with the `rectangle2` object as an argument.
const area2 = calculateArea(rectangle2);
// Print the areas to the console.
console.log(`Area of rectangle1: ${area1}`); 
console.log(`Area of rectangle2: ${area2}`); 

输出

 
Area of rectangle1: 30
Area of rectangle2: 200

下一主题JavaScript Cookies

JavaScript 抽象 (Abstraction)

JavaScript 中的抽象是什么？

注意事项

我们为什么要在 JavaScript 中使用抽象？

简化

封装

可重用性

灵活性

可维护性

如何在 JavaScript 中实现抽象？

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合

JavaScript 事件

JavaScript OOPs

JavaScript BOM

面试题

选择题

差异

JavaScript Map 方法

JavaScript Handler

JavaScript Number 方法

JavaScript Reflect

JavaScript Symbol

Symbol 属性

JavaScript Math 方法

JavaScript Date 方法

JavaScript DataView

JavaScript Object 方法

JavaScript Set 方法

JavaScript 字符串方法

JavaScript TypedArray 方法

JavaScript WeakMap 方法

JavaScript WeakSet 方法

JavaScript 数组方法

JavaScript RegExp 对象

JavaScript 附加内容

JavaScript 杂项

JavaScript 进阶

问题

Lodash

JavaScript 抽象 (Abstraction)

JavaScript 中的抽象是什么？

注意事项

我们为什么要在 JavaScript 中使用抽象？

简化

封装

可重用性

灵活性

可维护性

如何在 JavaScript 中实现抽象？

相关帖子

JavaScript 多态 (Polymorphism)

JS 对象

JavaScript constructor 方法

JavaScript static 方法

JavaScript 原型 (Prototype)

JavaScript OOPS 类

JavaScript Oops 类

JavaScript 封装 (Encapsulation)