免費(fèi)AI編程助手
JavaScript 錯(cuò)誤 & 異常處理
錯(cuò)誤 & 異常處理
程序中存在三種錯(cuò)誤： (a) 語法錯(cuò)誤 (b) 運(yùn)行期錯(cuò)誤 (c) 邏輯錯(cuò)誤:
語法錯(cuò)誤
語法錯(cuò)誤同樣也被稱為解析錯(cuò)誤，對(duì)于傳統(tǒng)的編程語言，該錯(cuò)誤出現(xiàn)先編譯的時(shí)候，對(duì)于 JavaScript 該錯(cuò)誤出現(xiàn)在解釋時(shí)期。例如，下面的代碼會(huì)引起語法錯(cuò)誤，因?yàn)樵谝恍兄腥鄙僖粋€(gè)圓括號(hào)：
<script type="text/javascript">
<!--
window.print(;
//-->
</script>當(dāng)在 JavaScript 中出現(xiàn)了語法錯(cuò)誤的時(shí)候，僅僅只是在同一個(gè)包含該語法錯(cuò)誤的進(jìn)程才會(huì)受到影響，其他的進(jìn)程中的代碼執(zhí)行不會(huì)受到影響，盡管他們依賴的代碼中包含錯(cuò)誤。
運(yùn)行期錯(cuò)誤
運(yùn)行期錯(cuò)誤也被稱為異常，通常在編譯或者解釋之后運(yùn)行時(shí)會(huì)出現(xiàn)。例如，下面的代碼會(huì)造成運(yùn)行期錯(cuò)誤，因?yàn)樗噲D調(diào)用一個(gè)不存在的方法：
<script type="text/javascript">
<!--
window.printme();
//-->
</script>異常出現(xiàn)時(shí)會(huì)影響進(jìn)程創(chuàng)建時(shí)的正常執(zhí)行，但是允許對(duì)于其他的 JavaScript 進(jìn)程則可以繼續(xù)正常執(zhí)行。
邏輯錯(cuò)誤
邏輯錯(cuò)誤是最難被追蹤的錯(cuò)誤類型。這些錯(cuò)誤并不是語法或者運(yùn)行時(shí)錯(cuò)誤造成的， 而是由于你在程序運(yùn)行的邏輯上出現(xiàn)錯(cuò)誤，從而導(dǎo)致你的腳本程序并不能得到你想要的結(jié)果。
你并不能捕獲這些錯(cuò)誤，因?yàn)樗Q于你的業(yè)務(wù)邏輯需求，你想要在你的程序中實(shí)現(xiàn)怎樣的邏輯處理。
try...catch...finally 語句
JavaScript 的最新版本中添加了異常處理的功能。它實(shí)現(xiàn)了 try...catch...finally 結(jié)構(gòu)和 throw 操作用來處理異常。你可以捕獲程序員和運(yùn)行期產(chǎn)生的異常，但是對(duì)于用戶不能捕獲 JavaScript 的語法錯(cuò)誤。下面是 try...catch...finally 語法塊:
<script type="text/javascript">
<!--
try {
// Code to run
[break;]
} catch ( e ) {
// Code to run if an exception occurs
[break;]
}[ finally {
// Code that is always executed regardless of
// an exception occurring
}]
//-->
</script>try 語句塊后面必須跟著一個(gè) catch 語句塊或者一個(gè) finally 語句塊(或者同時(shí)包含他倆的一個(gè)語句塊)。當(dāng)在 try 語句塊內(nèi)部產(chǎn)生了一個(gè)異常，這個(gè)異常就會(huì)被賦值給 e，接著 catch 語句塊被執(zhí)行。而可選的 finally 語句塊在 try/catch 之后一定會(huì)被執(zhí)行。
例子
如下是一個(gè)例子，我們嘗試調(diào)用一個(gè)不存在的方法，這個(gè)會(huì)導(dǎo)致異常的產(chǎn)生。我們首先看下沒有 try...catch 語句時(shí)運(yùn)行情況：
<html>
<head>
<script type="text/javascript">
<!--
function myFunc()
{
var a = 100;
alert("Value of variable a is : " + a );
}
//-->
</script>
</head>
<body>
<p>Click the following to see the result:</p>
<form>
<input type="button" value="Click Me" onclick="myFunc();" />
</form>
</body>
</html>接下來利用 try...catch 語句嘗試去捕獲程序的異常，并且給用戶提示一個(gè)友好的消息。如果你不想讓用戶看見這個(gè)錯(cuò)誤，你也可以不讓這個(gè)消息產(chǎn)生。
<html>
<head>
<script type="text/javascript">
<!--
function myFunc()
{
var a = 100;
try {
alert("Value of variable a is : " + a );
} catch ( e ) {
alert("Error: " + e.description );
}
}
//-->
</script>
</head>
<body>
<p>Click the following to see the result:</p>
<form>
<input type="button" value="Click Me" onclick="myFunc();" />
</form>
</body>
</html>你還可以使用 finally 語句，它會(huì)在 try/catch 語句之后必定執(zhí)行。如下例子所示：
<html>
<head>
<script type="text/javascript">
<!--
function myFunc()
{
var a = 100;
try {
alert("Value of variable a is : " + a );
}catch ( e ) {
alert("Error: " + e.description );
}finally {
alert("Finally block will always execute!" );
}
}
//-->
</script>
</head>
<body>
<p>Click the following to see the result:</p>
<form>
<input type="button" value="Click Me" onclick="myFunc();" />
</form>
</body>
</html>throw 語句
你可以使用 throw 語句產(chǎn)生一個(gè)內(nèi)置的異?；蛘吣阕约憾ㄖ频漠惓?。之后這些異?？梢员徊东@，而且捕獲后你可以采取合適的操作。
下面的是一個(gè)例子，展示如何使用 throw 語句。
<html>
<head>
<script type="text/javascript">
<!--
function myFunc()
{
var a = 100;
var b = 0;
try{
if ( b == 0 ){
throw( "Divide by zero error." );
}else{
var c = a / b;
}
}catch ( e ) {
alert("Error: " + e );
}
}
//-->
</script>
</head>
<body>
<p>Click the following to see the result:</p>
<form>
<input type="button" value="Click Me" onclick="myFunc();" />
</form>
</body>
</html>你可以在一個(gè)函數(shù)里面利用字符串，整型，布爾類型或者一個(gè)對(duì)象引起異常，接著你可以在同一個(gè)方法里面捕獲這個(gè)異常，或者在其他的函數(shù)里面利用 try...catch 語句塊捕獲異常。
onerror() 方法
onerror 事件句柄是 JavaScript 中添加的第一個(gè)為了方便錯(cuò)誤處理的特性。無論任何時(shí)候在網(wǎng)頁中產(chǎn)生了異常，窗口對(duì)象就會(huì)觸發(fā) error 事件。例如：
<html>
<head>
<script type="text/javascript">
<!--
window.onerror = function () {
alert("An error occurred.");
}
//-->
</script>
</head>
<body>
<p>Click the following to see the result:</p>
<form>
<input type="button" value="Click Me" onclick="myFunc();" />
</form>
</body>
</html>onerror 事件句柄提供了三個(gè)信息用來準(zhǔn)確的表示錯(cuò)誤的特性：
- 錯(cuò)誤消息。 瀏覽器顯示給定錯(cuò)誤的相關(guān)信息。
- URL。 錯(cuò)誤出現(xiàn)的文件。
- 行數(shù)。 在指定的 URL 中造成錯(cuò)誤的行數(shù)。
如下是一個(gè)例子顯示如何得到上面的那些信息。
<html>
<head>
<script type="text/javascript">
<!--
window.onerror = function (msg, url, line) {
alert("Message : " + msg );
alert("url : " + url );
alert("Line number : " + line );
}
//-->
</script>
</head>
<body>
<p>Click the following to see the result:</p>
<form>
<input type="button" value="Click Me" onclick="myFunc();" />
</form>
</body>
</html>你可以用任何你認(rèn)為更好的方式來顯示得到的信息。
你可以使用 onerror 方法來顯示一個(gè)錯(cuò)誤消息，以免在加載圖片時(shí)出現(xiàn)任何的問題：
<img src="myimage.gif"
onerror="alert('An error occurred loading the image.')" />如果程序中產(chǎn)生錯(cuò)誤，你可以在很多的 HTML 標(biāo)簽中使用 onerror 來顯示合適的消息。
更多建議：