JavaScript错误处理机制详解：从onerror到try-catch

JavaScript错误分类

一、错误分类

1. 语法错误

也称为解析错误，通常发生在传统编程语言的编译阶段。在JavaScript中，这类错误发生在代码解释执行时，由代码中的意外字符直接导致，使得代码无法被正确编译或解释。例如，若一行代码缺少右括号，就会引发语法错误。一旦发生语法错误，当前代码段的执行将立即停止。需要注意的是，在JavaScript中，只有同一线程内的代码会受到语法错误的影响。其他线程或外部引用的文件中的代码，只要不依赖于包含错误的代码，仍可继续执行。

2. 运行时错误

也称为异常（exception），通常发生在编译期或解释器完成解析之后。此时，问题并非出在代码语法上，而是尝试执行某个操作时，该操作在特定情况下是非法的。例如：

window.openMyFile();

由于openMyFile()方法不存在，浏览器会抛出一个异常。这种异常仅影响发生错误的线程，其他JavaScript线程可以继续正常执行。

错误处理机制：onerror与try-catch

二、处理错误

1. onerror事件处理函数

这是早期用于协助JavaScript处理错误的机制之一。当页面上出现异常时，error事件会在window对象上触发。例如：

<html>
<head>
<title>onerror例子</title>
<script type="text/javascript">
window.onerror = function() {
alert("发生错误！");
}
</script>
</head>
<body onload="fuction1()">
</body>
</html>

在上述代码中，页面加载时尝试调用不存在的函数，从而引发异常并弹出“发生错误”的提示。然而，浏览器默认的错误信息也会显示出来。若要隐藏浏览器的默认错误信息，只需让onerror方法返回true即可。

<script type="text/javascript">
window.onerror = function() {
alert("发生错误！");
return true;
}
</script>

1） 获取错误信息

onerror处理函数提供了三种参数来确定错误的详细信息：

i）错误信息——浏览器会显示与给定错误相同的信息；

ii）URL——发生错误的文件地址；

iii）行号——指定URL中发生错误的代码行号。

访问方法见如下例子：

<script type="text/javascript">
window.onerror = function(sMessage, sUrl, sLine) {
alert("发生错误！\n" + sMessage + "\nURL:" + sUrl + "\nLine Number:" + sLine);
return true;
}
</script>

2） 图像加载错误

window对象并非唯一支持onerror事件处理函数的对象，图像对象也支持该功能。当图像因文件不存在等原因无法成功加载时，error事件会在该图像元素上触发。示例如下：

<img src="amigo.jpg" onerror="alert('载入图片时发生错误')"/>

上述示例直接在HTML中分配了onerror事件处理函数。当然，也可以通过JavaScript脚本动态分配。在设置图像的src属性前，必须等待页面完全加载，代码如下：

<html>
<head>
<title>Image错误测试</title>
<script type="text/javascript">
function handleLoad() {
document.images[0].onerror = function() {
alert("载入图片时发生错误！");
};
document.images[0].src = "amigo.jpg";
}
</script>
</head>
<body onload="handleLoad()">
<img/>
</body>
</html>

注意：与window对象的onerror事件处理函数不同，图像元素的onerror事件不接收任何额外信息参数。

3） 处理语法错误

onerror也能处理语法错误，但有一个关键注意事项：事件处理函数必须是页面中最早执行的代码。如果语法错误出现在设置事件处理函数之前，该处理函数将失效。

注意：语法错误会完全停止代码的执行。

说明：使用onerror事件处理函数的主要问题在于，它属于BOM（浏览器对象模型）的一部分，因此没有统一的标准规范其行为。不同浏览器处理此事件的方式存在显著差异。例如，在IE中发生error事件时，正常代码会继续执行，所有变量和数据保留下来，并可通过onerror事件处理函数访问。而在Mozilla浏览器中，正常代码执行会终止，且错误发生前的所有变量和数据会被销毁。

try...catch语句详解

2. try…catch语句

ECMAScript第三版引入了try…catch语句。例如：

try {
window.openFile1();
alert("成功调用openFile1方法");
} catch (exception) {
alert("发生异常！");
} finally {
alert("try..catch测试结束!");
}

与Java不同，ECMAScript标准规定在try…catch语句中只能有一个catch子句，因为JavaScript是弱类型语言，无法指定catch子句中捕获的特定异常类型。无论错误类型如何，均由同一个catch语句处理。不过，Mozilla对此进行了扩展，允许添加多个catch语句，但不推荐这样做。

finally子句用于包含无论是否发生异常都要执行的代码，这对于关闭打开的链接和释放资源非常有用。

1） 嵌套try…catch语句

用于处理catch子句中可能出现的错误。示例代码如下：

try {
eval("a ++ b");
} catch(oException) {
alert("发生错误！");
try {
var aError = new Array(1000000000000000000000000000000000000000);
} catch(exception) {
alert("在catch子句中发生错误!");
}
} finally{
alert("已完成")
}

Error对象与错误类型判断

2） Error对象

当发生错误时，JavaScript会抛出一个Error基类对象。它包含两个属性：

i）name——表示错误类型的字符串；

ii）message——实际的错误信息。

Error对象的name属性对应其类名，可能的值包括：

EvalError：错误发生在eval()函数中；

RangeError：数字值超出JavaScript可表示的范围；

ReferenceError：使用了非法的引用；

SyntaxError：在eval()函数调用中发生了语法错误，其他语法错误由浏览器报告，无法通过try…catch处理；

TypeError：变量的类型不是预期所需的；

URIError：在encodeURI或decodeURI函数中发生了错误。

3） 判断错误类型

可以采取以下两种方法来判断错误类型。第一种是根据异常的name属性判断，如下：

try {
eval("a ++ b");
} catch(oException) {
if (oException.name = "SyntaxError") {
alert("发生SyntaxError!");
} else {
alert("发生其他错误!");
}
} 

第二种方法采用instanceof操作符，代码如下：

try {
eval("a ++ b");
} catch(oException) {
if (oException instanceof SyntaxError) {
alert("发生SyntaxError!");
} else {
alert("发生其他错误!");
}
}

使用throw语句抛出异常

4） 抛出异常的throw语句

在ECMAScript第三版中引入，用于有目的地抛出异常。抛出的错误对象可以是字符串、数字、布尔值或实际的对象，也可以抛出Error对象（其构造函数仅接收一个参数，即错误信息）。例如1：throw new Error("错误产生！");

例如2：

function addTwoNumber(a, b) {
if (arguments.length < 2) {
throw new Error("需要传入两个数字!");
}
}
try {
result = addTwoNumber(90);
} catch(oException) {
if (oException instanceof SyntaxError) {
alert("SyntaxError：" + oException.message);
} else if (oException instanceof Error){
alert(oException.message);
}
}

以上就是本文所述的全部内容了，希望小伙伴们能够喜欢。