JavaScript - 自定義錯誤：初學者的指南

Hello there, future JavaScript wizards! Today, we're going to embark on an exciting journey into the world of custom errors in JavaScript. Don't worry if you're new to programming – I'll be your friendly guide, breaking down complex concepts into bite-sized, easy-to-digest pieces. So, grab your favorite beverage, get comfortable, and let's dive in!

The Error Class: Your New Best Friend

Before we start creating our own custom errors, let's get acquainted with the built-in Error class in JavaScript. Think of it as the foundation upon which we'll build our error-handling masterpiece.

The Error class is like a template for creating error objects. When something goes wrong in your code, JavaScript uses this class to give you information about what happened. Let's look at a simple example:

try {
throw new Error("Oops! Something went wrong!");
} catch (error) {
console.log(error.message);
}

In this example, we're deliberately throwing an error using the throw keyword and the Error class. The catch block then catches this error and logs its message to the console.

When you run this code, you'll see:

Oops! Something went wrong!

See how easy that was? The Error class gave us a way to create and handle errors in our code. But what if we want to create more specific types of errors? That's where custom errors come in!

Creating Custom Errors Using the Instance of the Error Class

Now that we understand the basic Error class, let's create our first custom error. We'll start with the simplest method: using an instance of the Error class.

function divide(a, b) {
if (b === 0) {
throw new Error("DivisionByZeroError: Cannot divide by zero!");
}
return a / b;
}

try {
console.log(divide(10, 0));
} catch (error) {
console.log(error.message);
}

In this example, we've created a divide function that throws a custom error when someone tries to divide by zero. When we run this code, we'll see:

DivisionByZeroError: Cannot divide by zero!

This method is simple and effective, but it doesn't allow us to create truly custom error types. Let's explore some more advanced methods!

Creating Custom Errors Using the Function Constructor

Another way to create custom errors is by using a function constructor. This method gives us more flexibility in defining our error types.

function CustomError(message) {
this.name = "CustomError";
this.message = message || "A custom error occurred";
this.stack = (new Error()).stack;
}

CustomError.prototype = Object.create(Error.prototype);
CustomError.prototype.constructor = CustomError;

try {
throw new CustomError("This is my custom error!");
} catch (error) {
console.log(error.name + ": " + error.message);
}

When we run this code, we'll see:

CustomError: This is my custom error!

This method allows us to create a new error type with its own name and default message. It's like creating a whole new species of error!

Creating Custom Errors by Extending the Error Class

For our final trick, we'll use ES6 class syntax to extend the Error class. This is my personal favorite method because it's clean, intuitive, and powerful.

class ValidationError extends Error {
constructor(message) {
super(message);
this.name = "ValidationError";
this.date = new Date();
}
}

function validateUser(user) {
if (!user.username) {
throw new ValidationError("Username is required");
}
if (!user.email) {
throw new ValidationError("Email is required");
}
}

try {
validateUser({ username: "johndoe" });
} catch (error) {
if (error instanceof ValidationError) {
console.log(`${error.name}: ${error.message}`);
console.log(`Error occurred on: ${error.date}`);
} else {
console.log("An unknown error occurred");
}
}

When we run this code, we'll see:

ValidationError: Email is required
Error occurred on: [current date and time]

This method allows us to create complex custom errors with additional properties (like date in this example) and methods if needed.

Wrapping Up: A Table of Methods

To summarize the methods we've learned, here's a handy table:

方法	優點	缺點
使用 Error 實例	簡單，快速實現	定製化有限
函数構造器	靈活，允許自定義屬性	語法更複雜
扩展 Error 类	清潔的語法，完全定製化	需要理解 ES6 类

Remember, there's no one-size-fits-all solution. The best method depends on your specific needs and the complexity of your project.

Custom errors are like secret weapons in your JavaScript arsenal. They help you catch and handle problems in your code more effectively, making your programs more robust and easier to debug. So go forth, young coders, and may your errors always be custom and your debugging swift!

Credits: Image by storyset