JavaScript異常處理之try catch finally的實例分析

語法結構

try catch finally是ECMAScript-262 第三版提供例外處理機制的標準，語法結構如下：

##

1 try{
2 //可能会发生的错误代码
3 }
4 catch(error){
5 //错误处理
6 }finally{
7  //无论是否有异常都会执行
8 }

語法與大多數語言一樣如java .net，如果try{}程式碼區塊捕捉到了異常，那麼catch區塊會得到一個錯誤訊息物件（Error 的實例）。

我們應該把有可能發生錯誤的程式碼放在try區塊中，而錯誤處理在catch區塊中；在js中如果3f1c4e4b6b16bbbd69b2ee476dc4f83a2cacc6d41bbb37262a98f745aa00fbf0程式碼區塊中發生了錯誤且沒有進行捕獲異常處理，那麼當前3f1c4e4b6b16bbbd69b2ee476dc4f83a程式碼區塊後續的程式碼是不會執行的，但是不會影響到其他3f1c4e4b6b16bbbd69b2ee476dc4f83a2cacc6d41bbb37262a98f745aa00fbf0程式碼區塊程式碼如：

#

 1 <script> 
 2   function run(){ 
 3       console.log(age); 
 4   } 
 5     run(); 
 6     console.log(&#39;可以输出吗？&#39;);//没有执行 
 7 </script> 
 8  
 9 <script>
 10     console.log(&#39;这是第二个代码块&#39;);//执行了，这是第二个代码块
 11 </script>

反之後續的程式碼還是會執行如：

 1 <script> 
 2   function run(){ 
 3       try{ 
 4           console.log(age); 
 5       }catch(error){ 
 6  
 7       } 
 8  
 9   }
 10     run();
 11     console.log(&#39;可以输出吗？&#39;);//可以输出吗？
 12 </script>
 13 
 14 <script>
 15     console.log(&#39;这是第二个代码块&#39;);//这是第二个代码块
 16 </script>

finally語句

如果存在finally程式碼區塊，那麼不管什麼原因裡面的程式碼都會執行，甚至是catch 語句中有return語句如下程式碼：

#

    function say() {        try {
            console.log(age)            return;
        } catch (erroe) {
            console.log(erroe.message);//age is not defined
            return;
        } finally {
           console.log('finally 执行了');//finally 执行了        }
    }
    say();

認識Error 類型

當程式碼執行時發生錯誤，會建立一個Error對象，並將其拋出，這個對象包含了錯誤的描述資訊。

如在 

try...catch（error）{...} 語句中Error 是Error類型拋出的對象，該物件有三個基本的屬性name 錯誤名稱，message錯誤訊息，stack 錯誤堆疊資訊；

在執行程式碼期間可能會發生的錯誤有多種類型，所以Error 又衍生了幾個兒子如：

Error                  rr參見，如果有也是瀏覽器拋出的；這個基底類型的主要目的是供開發人員拋出自定義錯誤。

EvalError                           建立一個error實例，表示錯誤的原因：與 eval() 有關。
InternalError                      建立一個「針對Javascript引擎內部錯誤的例外」所拋出時的實例。 如: "遞迴太多".
RangeError                       建立一個error實例，表示錯誤的原因：數值變數或參數超出其有效範圍。
ReferenceError                 建立一個error實例，表示錯誤的原因：無效引用。
SyntaxError                       建立一個error實例，表示錯誤的原因：eval()解析程式碼的過程中所發生的語法錯誤。
TypeError                         建立一個error實例，表示錯誤的原因：變數或參數不屬於有效類型。
URIError　　　　　　      建立一個error實例，表示錯誤的原因：給 encodeURI()或  decodeURl()傳遞的參數無效。

Error 是基底類，其他錯誤類型都是繼承自Error類型，所以子類別也就具備了三個基本的屬性name 錯誤名稱，message 錯誤訊息，stack 錯誤堆疊資訊。

有了這些錯誤類型我們就可以寫類似這樣的程式碼，透過判斷異常的型別來特定處理某一類的例外如：

 1 <script> 
 2     function run() { 
 3         try { 
 4             say("hello word"); 
 5         } 
 6         catch (error) { 
 7             for (var p in error) { 
 8                 document.writeln(error[p]); 
 9             }
 10             //上面可以遍历错误
 11             if (error instanceof EvalError) {
 12                 //如果非法调用了eval()函数，则会抛出EvalError的异常。
 13                 alert("EvalError");
 14             } else if (error instanceof ReferenceError) {
 15                 //错误的引用，此例子是执行到了本步。
 16                 alert("ReferenceError");
 17             } else if (error instanceof RangeError) {
 18                 //数值超出了范围
 19                 alert("RangeError");
 20             } else if (error instanceof SyntaxError) {
 21                 //语法错误，错误发生在eval()，
 22                 alert("SyntaxError");
 23             } else if (error instanceof TypeError) {
 24                 //变量类型不是预期的
 25                 alert("TypeError");
 26             } else if (error instanceof URIError) {
 27                 //错误发生在encodeURI()或decodeURI()中
 28                 alert("URIError");
 29             }
 30         }
 31     }
 32     run();
 33 </script>

 

throw拋出自訂錯誤類型

#語法：throw exception;

exception 可以是任何類型的資料如：

throw 12345;

throw 'hello';

throw true;

throw {name:'Joel',age:20};

使用throw語句來拋出一個自訂異常如：

 1 <script> 
 2     function see(){ 
 3         try { 
 4             if(true){ 
 5                 throw new Error("my eroor!"); 
 6             } 
 7  
 8         } catch (error) { 
 9             console.log(error.name );//Error
 10             console.log(error.message);//my eroor!
 11             console.log(error.stack);//Error: my eroor! at see (try.html:12) at try.html:22
 12         }
 13     }
 14     see();
 15 </script>

Javascript的異常處理機制

當執行的javascript程式碼中出現錯誤的時候，js引擎就會根據js的呼叫棧逐級尋找對應的catch，如果沒有找到對應的catch handler或者本身又有error或者又拋出新的error，最後就會把這個error的處理交給瀏覽器，瀏覽器會用各自不同的方式（IE以黃色三角圖案顯示在左下角，而firefix會顯示在錯誤控制台中）顯示錯誤訊息給使用者；

window.onerror

#任何沒有透過tyr-catch處理的錯誤都會觸發window物件的error事件如：

 1 <script> 
 2     window.onerror= function (msg,url,l) 
 3     { 
 4         console.log(msg)//Uncaught ReferenceError: a is not defined 
 5         console.log(url)//http://localhost:63342/person_Project/js_demo/onerror.html 
 6         console.log(l)//17 
 7     } 
 8  
 9     function run(){
 10         console.log(a)
 11     }
 12     run()
 13 </script>

window.onerror 事件接收三個參數：msg  錯誤訊息、url  發生錯誤的頁面的url 、line 發生錯誤的程式碼行。

前端程式碼異常監控方案

有了try catch 擷取的錯誤物件加上window.onerror 全域監聽錯誤事件，那麼前端js程式碼錯誤監控變的太簡單了。

 

以上是JavaScript異常處理之try catch finally的實例分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！