笙亿网络策划

JavaScript 怎么自定义错误？

约 7 分钟读完 31 阅
文章导读
Previous Quiz Next 自定义错误 是 JavaScript 中创建用户定义错误类型的一种方式。这对于处理特定类型的错误很有用，例如数据库错误或 HTTP 错误。
📋 目录
  1. 一 Error 类
  2. 二 使用 Error 类实例创建自定义错误
  3. 三 使用函数构造函数创建自定义错误
  4. 四 通过扩展 Error 类创建自定义错误
A A

JavaScript - 自定义错误

Previous
Quiz
Next

自定义错误 是 JavaScript 中创建用户定义错误类型的一种方式。这对于处理特定类型的错误很有用，例如数据库错误或 HTTP 错误。

JavaScript 包含多个内置的错误对象。每当 JavaScript 代码中发生任何错误时，它都会抛出一个 Error class 的实例。不过，你也可以使用 'throw' 语句抛出带有自定义消息的 Error class 实例。

在某些情况下，开发者需要创建自定义错误。例如，你在输入中获取用户的年龄。如果用户的年龄未满 18 岁，你可以抛出一个自定义错误如 'ageNotValid' 以提供更多说明。

让我们先了解 Error class 的语法，然后你将学习如何创建自定义错误。

Error 类

在 JavaScript 中，Error 是一个通用的错误类。你可以创建 Error class 的实例，并将自定义消息作为参数传递。

Error 类包含三个属性：name、message 和 stack。

因此，你可以假设 Error class 的语法如下所示。

class Error {
   constructor(message) {
      this.message = message;
      this.name = "Error"; 
      this.stack = <调用栈>;
   }
}

上述语法中的 'stack' 属性是一个非标准属性，仅由 Firefox 浏览器支持。

使用 Error 类实例创建自定义错误

创建自定义错误的最简单方法是创建 Error class 的实例并更改其属性。

语法

你可以通过更改实例 Error class 的属性来创建自定义错误，语法如下。

const customError = new Error(message);
customError.name = "CustomError";

在这里，我们创建了 'Error' class 实例并将 'message' 作为参数传递。同时，我们更改了 'name' 属性的值。同样，如果你不想在 Error() 构造函数中传递它，也可以更改 'message' 属性的值。

参数

  • message − 表示错误的文本消息。

示例

在下面的代码中，我们创建了 Error class 的实例并将其存储在 'customError' 变量中。然后，我们将 'name' 属性的值更改为 'CustomError'。

在 try{} 块中，我们使用 'throw' 语句抛出自定义错误，在 catch{} 块中，我们打印错误名称和消息。

<html>
<body>
   <div id = "output"> </div>
   <script>
      const customError = new Error("这是一个自定义错误");
      customError.name = "CustomError";
      try {
         throw customError;
      } catch (err) {
         document.getElementById("output").innerHTML = err;
      }
   </script>
</body>
</html>

输出

CustomError: 这是一个自定义错误

使用函数构造函数创建自定义错误

你可以使用函数构造函数来创建对象的模板。函数构造函数应该包含 'name' 和 'message' 属性。

接下来，你可以将函数构造函数的 prototype 更改为 Error 类的 prototype。

语法

你可以使用函数类的构造函数，按照以下语法创建自定义错误。

function validationError(messag, name) {
   this.message = messag;
   this.name = name;
}
validationError.prototype = Error.prototype;

在上述语法中，我们定义了 validationError() 函数，以 message 和 name 作为参数。随后，我们使用参数值初始化函数的 message 和 name 属性。

接下来，我们将函数的 prototype 更改为 Error 类的 prototype。

示例

在下面的代码中，我们定义了 validationError() 函数构造函数，并使用 Error 类的 prototype 继承它。

在 try{} 块中，我们定义了 'str' 变量并将其初始化为数值。随后，我们使用 typeof 操作符验证 'str' 变量的类型。如果它不是字符串，则抛出 'validationError'，并传递 message 和 name 作为参数。

在 catch{} 块中，我们将消息打印到网页上。你可以运行代码，并观察输出中的错误。

<html>
<body>
   <div id = "demo"> </div>
   <script>
      const output = document.getElementById("demo");
      function validationError(message = "", name = "validationError") {
         this.message = message;
         this.name = name;
      }
      validationError.prototype = Error.prototype;

      try {
         let str = 10;
         if (typeof str != "string") {
            throw new validationError("Not a string", "NotStringError");
         } else {
            output.innerHTML = "String is valid";
         }
      } catch (e) {
         output.innerHTML = e.name + ": " + e.message;
      }
   </script>
</body>
</html>

输出

NotStringError: Not a string

通过扩展 Error 类创建自定义错误

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

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

语法

你可以通过扩展 Error 类，按照以下语法创建自定义错误。

class CustomError extends Error {
   constructor(message) {
      super(message)
      // Initialize properties
   }
}

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

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

根据你的需求，你可以使用上述任一方法创建自定义错误。