【Javascript】javascript學習十七/八/九 Try…Catch/Throw/OnError 語句

最後更新：2018-12-05 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

文章目錄

文法：
執行個體 1
文法：
執行個體 1
文法：
執行個體：

try...catch 的作用是測試代碼中的錯誤。

執行個體

try...catch 語句: 如何編寫 try...catch 語句。
帶有確認框的 try...catch 語句: 另一個編寫 try...catch 語句的例子。

JavaScript - 捕獲錯誤

當我們在網上衝浪時，總會看到帶有 runtime 錯誤的 Javascript 警告框，同時會詢問我們“是否進行 debug？”。像這樣的錯誤資訊或許對開發人員有用，對使用者則未必。當錯誤發生時，他們往往會選擇離開這個網站。

本節向你講解如何捕獲和處理 Javascript 的錯誤訊息，這樣就可以為受眾提供更多的便利。

有兩種在網頁中捕獲錯誤的方法：

使用 try...catch 語句。(在 IE5+、Mozilla 1.0、和 Netscape 6 中可用)
使用 onerror 事件。這是用於捕獲錯誤的老式方法。(Netscape 3 以後的版本可用)

Try...Catch 語句

try...catch 可以測試代碼中的錯誤。try 部分包含需要啟動並執行代碼，而 catch 部分包含錯誤發生時啟動並執行代碼。

文法：

try{   //在此運行代碼}catch(err){   //在此處理錯誤}

注意：try...catch 使用小寫字母。大寫字母會出錯。

執行個體 1

下面的例子原本用在使用者點擊按鈕時顯示 "Welcome guest!" 這個訊息。不過 message() 函數中的 alert() 被誤寫為 adddlert()。這時錯誤發生了：

<html><head><script type="text/javascript">function message(){adddlert("Welcome guest!")}</script></head><body><input type="button" value="View message" onclick="message()" /></body></html>

我們可以添加 try...catch 語句，這樣當錯誤發生時可以採取更適當的措施。

下面的例子用 try...catch 語句重新修改了指令碼。由於誤寫了 alert()，所以錯誤發生了。不過這一次，catch 部分捕獲到了錯誤，並用一段準備好的代碼來處理這個錯誤。這段代碼會顯示一個自訂的出錯資訊來告知使用者所發生的事情。

<html><head><script type="text/javascript">var txt=""function message(){try  {  adddlert("Welcome guest!")  }catch(err)  {  txt="此頁面存在一個錯誤。\n\n"  txt+="錯誤描述: " + err.description + "\n\n"  txt+="點擊OK繼續。\n\n"  alert(txt)  }}</script></head><body><input type="button" value="View message" onclick="message()" /></body></html>

執行個體 2

下一個例子會顯示一個確認框，讓使用者來選擇在發生錯誤時點擊確定按鈕來繼續瀏覽網頁，還是點擊取消按鈕來回到首頁。如果 confirm 方法的傳回值為 false，代碼會把使用者重新導向到其他的頁面。如果 confirm 方法的傳回值為 true，那麼代碼什麼也不會做。

<html><head><script type="text/javascript">var txt=""function message(){try  {  adddlert("Welcome guest!")  }catch(err)  {  txt="There was an error on this page.\n\n"  txt+="Click OK to continue viewing this page,\n"  txt+="or Cancel to return to the home page.\n\n"  if(!confirm(txt))    {    document.location.href="http://www.w3school.com.cn/"    }  }}</script></head><body><input type="button" value="View message" onclick="message()" /></body></html>

onerror 事件

我們馬上會講解 onerror 事件。但首先您需要學習如何使用 throw 語句來建立異常。throw 語句可以與 try...catch 語句一起使用。

throw 聲明的作用是建立 exception（異常或錯誤）。

執行個體

throw 聲明: 如何使用 throw 聲明。

Throw 聲明

throw 聲明的作用是建立 exception（異常）。你可以把這個聲明與 try...catch 聲明配合使用，以達到控製程序流併產生精確錯誤訊息的目的。

文法：

throw(exception)

exception 可以是字串、整數、邏輯值或者對象。

注意：使用小寫字母編寫 throw。使用大寫字母會出錯！

執行個體 1

下面的執行個體的作用是測定變數 x 的值。如果 x 的值大於 10 或者小於 0，錯誤就會被拋出 (throw)。這個錯誤被 catch 的參數捕獲後，就會顯示出自訂的出錯資訊。

<html><body><script type="text/javascript">var x=prompt("Enter a number between 0 and 10:","")try{ if(x>10) throw "Err1"else if(x<0)throw "Err2"} catch(er){if(er=="Err1") alert("Error! The value is too high")if(er == "Err2") alert("Error! The value is too low") }</script></body></html>

使用 onerror 事件是一種老式的標準的在網頁中捕獲 Javascript 錯誤的方法。

執行個體

onerror 事件: 如何使用 onerror 事件捕獲網頁中的錯誤。

onerror 事件

我們剛講過如何使用 try...catch 聲明來捕獲網頁中的錯誤。現在，我們繼續講解如何使用 onerror 事件來達到相同的目的。

只要頁面中出現指令碼錯誤，就會產生 onerror 事件。

如果需要利用 onerror 事件，就必須建立一個處理錯誤的函數。你可以把這個函數叫作 onerror 事件處理器 (onerror event handler)。這個事件處理器使用三個參數來調用：msg（錯誤訊息）、url（發生錯誤的頁面的 url）、line（發生錯誤的程式碼）。

文法：

onerror=handleErrfunction handleErr(msg,url,l){//Handle the error herereturn true or false}

瀏覽器是否顯示標準的錯誤訊息，取決於 onerror 的傳回值。如果傳回值為 false，則在控制台 (JavaScript console) 中顯示錯誤訊息。反之則不會。

執行個體：

下面的例子展示如何使用 onerror 事件來捕獲錯誤：

<html><head><script type="text/javascript">onerror=handleErrvar txt=""function handleErr(msg,url,l){txt="There was an error on this page.\n\n"txt+="Error: " + msg + "\n"txt+="URL: " + url + "\n"txt+="Line: " + l + "\n\n"txt+="Click OK to continue.\n\n"alert(txt)return true}function message(){adddlert("Welcome guest!")}</script></head><body><input type="button" value="View message" onclick="message()" /></body></html>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More