JavaScript 扩展错误

JavaScript 中的自定义错误是你自己创建的错误，与 JavaScript 内置抛出的错误相对。你可以创建自定义错误来处理代码中可能出现的特定类型的错误。

要创建一个自定义错误，你可以使用 Error 构造函数。Error 构造函数接受一个字符串作为其参数，这个字符串将成为错误的信息。

扩展 Error 类：创建自定义错误

创建自定义错误的最佳方式是创建一个新的类并通过使用 extends 关键字扩展它。这利用了继承的概念，自定义错误类继承了 Error 类的属性。

在 constructor() 函数中，你可以初始化自定义错误类的属性。

语法

你可以遵循以下语法通过扩展 Error 类来创建自定义错误。

class customError extends Error {
   constructor(message) {
      super(message)
      // 初始化属性
   }
}

在上面的代码中，我们使用 super() 方法调用父类构造函数。

你也可以在构造函数中初始化 customError 类的属性。

示例

在下面的代码中，我们获取用户的输入。当用户点击检查年龄按钮时，它会调用 checkAge() 函数。

我们在 JavaScript 代码中定义了 ageError 类并用 Error 类扩展了它。在 ageError 类中，我们添加了 constructor() 函数来初始化属性。

在 constructor() 函数中，我们使用 super() 方法初始化 Error 类的消息属性。同时，我们在构造函数中初始化了 name 和 age 属性。

在 checkAge() 函数中，如果年龄小于 18 岁，我们抛出自定义错误，在 catch{} 块中，我们打印错误信息和年龄。

<html>
<body>
   <p>请输入您的年龄: <input type = "number" id = "age" /> </p>
   <button onclick = "checkAge()"> 检查年龄 </button>
   <p id = "demo"> </p>
   <script>
      const output = document.getElementById("demo");
      class ageError extends Error {
         constructor(message, age) {
            super(message);
            this.name = "ageError";
            this.age = age // 自定义属性
         }
      }
      function checkAge() {
         const ageValue = document.getElementById('age').value;
         try {
            if (ageValue < 18) { // 如果年龄小于 18 岁则抛出错误
               throw new ageError("您太年轻了", ageValue);
            } else {
               output.innerHTML = "您足够大了";
            }
         } catch (e) {
            output.innerHTML = "错误: " + e.message + ". <br>";
            output.innerHTML += "年龄: " + e.age + "<br>";
         }
      }
   </script>
</body>
</html>

输出：

输入您的年龄: 5
检查年龄
错误: 您太年轻了。
年龄: 5

如果你只想提供明确的错误类型和消息而不希望改变 Error 类的属性，你可以使用以下语法创建多个新的错误类。

class InputError extends Error {};

让我们通过下面的示例来了解这一点。

示例

在下面的代码中，我们创建了三个不同的自定义类，并用 Error 类扩展了它们以创建自定义错误。

在 try{} 块中，我们抛出 StringError 错误。

在 catch{} 块中，我们使用 instanceOf 操作符检查错误对象的类型并相应地打印错误消息。

<html>
<body>
   <div id = "demo"> </div>
   <script>
      const output = document.getElementById("demo");
      class StringError extends Error { };
      class NumberError extends Error { };
      class BooleanError extends Error { };
      try {
         throw new StringError("这是一个字符串错误");
      } catch (e) {
         if (e instanceof StringError) {
            output.innerHTML = "字符串错误";
         } else if (e instanceof NumberError) {
            output.innerHTML = "数字错误";
         } else if (e instanceof BooleanError) {
            output.innerHTML = "布尔错误";
         } else {
            output.innerHTML = "未知错误";
         }
      }
   </script>
</body>
</html>

输出：

字符串错误

多级继承

你可以通过扩展 Error 类来创建一个通用的自定义错误。之后，你可以扩展自定义错误类来创建更通用的错误类。

让我们通过下面的示例来理解这一点。

示例

在下面的代码中，我们定义了 NotFound 类并用 Error 类扩展了它。

之后，我们定义了 propertyNotFound 和 ElementNotFound 类，并用 NotFound 类扩展了它们。这里，我们做了多级继承。

在 try 块中，如果数组不包含 6，则抛出 ElementNotFound 错误。

在 catch 块中，我们打印错误。

<html>
<body>
   <div id = "output"> </div>
   <script>
      const output = document.getElementById("output");
      class NotFound extends Error {
         constructor(message) {
            super(message);
            this.name = "NotFound";
         }
      }
      
      // 进一步继承
      class propertyNotFound extends NotFound {
         constructor(message) {
            super(message);
            this.name = "propertyNotFound";
         }
      }
      
      // 进一步继承
      class ElementNotFound extends NotFound {
         constructor(message) {
            super(message);
            this.name = "ElementNotFound";
         }
      }

      try {
         let arr = [1, 2, 3, 4, 5];
         
         // 如果数组不包含 6，则抛出错误
         if (!arr.includes(6)) {
            throw new ElementNotFound("数组中不包含 6");
         }
      } catch (e) {
         output.innerHTML = e.name + ": " + e.message;
      }
   </script>
</body>
</html>

输出：

ElementNotFound: 数组中不包含 6

你也可以在任何对象不包含特定属性的情况下抛出 propertyNotFound 错误。