在编码过程中，经常会遇到处理异常情况的需求，这时我们通常会使用 try-catch 语句块来捕获异常并进行处理。在 JavaScript 中， try-catch 语句的写法一直比较局限，需要在 catch 语句块中显式声明一个变量来接收异常对象。然而， ECMAScript 2021 (ES12) 中引入了 Optional Catch Binding，这个新特性在处理异常时提供了更加优雅的方式。
Optional Catch Binding 是什么?
Optional Catch Binding 允许我们在 catch 语句块中省略异常参数，改为直接使用 try-catch 块中的隐式变量引用。也就是说，我们不再需要在 catch 块中显式声明一个变量来接收异常对象，而是直接使用 try 块中的隐式变量即可。
try {
// some code
} catch {
// handle error
}在这种写法中， catch 块中不再有参数，如果要访问异常对象，可以使用 catch 块内的 this 关键字，它指向的就是异常对象。
示例
看一个简单的例子来理解 Optional Catch Binding 的使用。
try {
// 可能抛出异常的代码
} catch {
console.error('Something went wrong!');
}使用 Optional Catch Binding，我们可以更加简洁地处理异常，上面的代码可以改为：
try {
// 可能抛出异常的代码
} catch {
console.error('Something went wrong!', this);
}这里 this 指向的就是异常对象。
Optional Catch Binding 的实际应用
Optional Catch Binding 在处理异常时，能够让我们的代码更加优雅。下面举一个例子来说明它如何在实际场景中使用。
假设你正在开发一个 Web 应用程序，其中一个页面上需要使用一个由后端返回的数据对象。在接收到后端 API 时，可能会发生一些异常，例如网络错误、服务器错误等。在这种情况下，我们通常需要使用 try-catch 语句块来捕获异常。
try {
const data = await fetchDataFromBackend();
// 处理 data
} catch (error) {
console.error('Failed to fetch data:', error);
}现在，我们使用 Optional Catch Binding 来进行改写：
try {
const data = await fetchDataFromBackend();
// 处理 data
} catch {
console.error('Failed to fetch data:', this);
}这种写法不仅更加优雅，而且更加清晰无歧义。当然，这种写法也可以和 if 语句集成使用。
-- -------------------- ---- -------
--- -
----- ---- - ----- -----------------------
-- -- ----
- ----- -
-- ----- ---------- ------------- -
---------------------- -------- ------
- ---- -- ----- ---------- ------------ -
--------------------- -------- ------
- ---- -
---------------------- -------- ------
-
-从上述几个例子中可得知，Optional Catch Binding 不仅可以让我们在处理异常上写出更加清晰明了且具有美感的代码，同时也使我们的代码更加简洁、易读，形式更加优雅。
总结
Optional Catch Binding 是 ECMAScript 2021 (ES12) 版本中的一个新增特性，它提供了更加优雅的方式来处理异常。通过省略异常参数，我们可以直接使用 this 关键字来访问隐式变量引用，这样的写法让我们的代码具有更高的可读性、美感和简洁性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e84e3ff6b2d6eab33d3dc2