【javascript進階】異常

前言

最近有些時間了，今天看了看博客的后台記錄，好多都沒有寫博客呢，爭取盡快把以前的補上，javascrit中的異常在前端大家用的好像不是很多，其實javascript的異常和大多數的后端語言差不大，今天和大家簡單的介紹介紹，這里不介紹啥是運行時異常......，這是說些javascript常用的異常和異常處理。

異常

使用關鍵字Error我們可以像new一個普通的對象一樣創建一個異常的實例，

var err = new Error("這是一個異常");

異常的屬性如下：

description: 錯誤描述  

fileName: 出錯的文件名 

lineNumber: 出錯的行數

message: 錯誤信息 

name: 錯誤類型  

number: 錯誤代碼 

stack: 像Java中的Stack Trace一樣的錯誤堆棧信息

上面各個瀏覽器之間會有不兼容的現象，大家了解基本的就行。

子類：

Error是所有異常的父類了，他有許多的子類，像

TypeError    當遇到一個意外的類型時引發該異常對象，如未聲明的變量。   

SyntaxError   在解析js代碼時，其中的語法錯誤引發該異常對象。   

ReferenceError   使用一個無效的引用時引發該異常對象。   

EvalError    在錯誤的調用eval函數時引發該異常對象。   

RangeError    在一個數字型變量的值超出了其范圍時引發該異常對象。   

URIError   在錯誤的使用encodeURI或者decodeURI函數時引發該異常對象。

等等。   　　

捕獲

try catch

其實捕獲異常是我們最關注的問題，我們不會沒事自己new出來一個異常吧，那不是沒事干了嗎，我們了解異常是為了更好的處理它們。和其它的后端語言一樣，javascript使用try{}catch(){}捕獲異常，

try{
  //可能出現異常的代碼部分  
}catch(e){
    //處理異常
}finally{
    //任何時候都會執行
}

弄個實際的例子

try{
	unde  //未定義的變量
}catch(e){
	console.dir(e);
}finally{
	alert("finally");
}

這就是捕獲代碼本身出現的錯誤，我們可以認為的拋出一些異常，這就是throw關鍵字的作用了，看兩個例子

try{
  throw new Error("拋出一個異常");  //拋一個異常
}catch(e){
  alert(e.message);   //catch到異常
}

再看一個

try{
  throw("拋出一個異常");  //拋一個字符串
}catch(e){
  alert(e);   //catch到這個字符串
}

throw可以拋出任何的對象，在catch中可以捕獲到。

onerror

另外一種捕獲javascript的異常就是window.onerror = function(){}，就是和普通的事件一樣，監聽異常事件，他有一些參數，各個瀏覽器可能會不一致，看看具體的用法

window.onerror = function(message, URI, lineNumber,columnNumber,errorObj) {
       console.log("錯誤信息：" , nessage);
       console.log("出錯文件：" , URI);
       console.log("出錯行號：" , lineNumber);
       console.log("出錯列號：" , columnNumber);
       console.dir(errorObj);
    }
throw new Error("我的異常');

結果是這樣的：

雖然我們捕獲了出現的異常，但是瀏覽器還是默認會把錯誤信息顯示出來，我們在window.onerror = function(){} 加個返回值return true就不會顯示默認的錯誤信息了，這樣

window.onerror = function(message, URI, lineNumber,columnNumber,errorObj) {
       console.log("錯誤信息：" , nessage);
       console.log("出錯文件：" , URI);
       console.log("出錯行號：" , lineNumber);
       console.log("出錯列號：" , columnNumber);
       console.dir(errorObj);
       return true;
    }
throw new Error("我的異常');

這樣就不顯示瀏覽器默認的錯誤信息了。利用這個我們就可以忽略所有的錯誤了，可以搞下惡作劇啥的，就這樣

window.onerror = function(){
  return true;  
}

其實如果我們不重新onerror這個方法，原來就是空的，所以不寫的話我們得不到一些異常信息。

異步中的異常

首先我們看一下簡單的異步函數，最簡單的就是setTimeout了

setTimeout(function(){console.log(1)},1000);

That's all，簡單吧，騙你的，異步以后會將的，先這樣哈，異步不是今天的主角，我們在異步函數中拋出一個異常試試

setTimeout(function(){throw new Error("我的異常")},1000);

現在我們進行異常的捕獲，第一個方法try catch

try{
  setTimeout(function(){throw new Error("我的異常")},1000);  
}catch(e){
  alert(e.message);  
}

這樣累死也捕獲不到異常的，因為當trycatch執行的時候 function(){throw new Error("我的異常")還沒有在內存堆棧中呢，這個大家先有點印象，以后在異步中會詳細說的，記住這樣是不能捕獲錯誤的。

當然你在里面這樣是可以捕獲的

setTimeout(function(){
                            try{throw new Error("我的異常")
                                }catch(e){
                                           alert(e.message);  
                                            }
                    },1000); 

我們可以使用window.onerror的方式來捕獲異步的異常，這樣

window.onerror = function(message, URI, lineNumber,columnNumber,errorObj) {
       console.log("錯誤信息：" , message);
       console.log("出錯文件：" , URI);
       console.log("出錯行號：" , lineNumber);
       console.log("出錯列號：" , columnNumber);
       console.dir(errorObj);
	   return true;
    }
setTimeout(function(){throw new Error("我的異常")},1000);

這樣肯定是可以的，因為是屬於監聽的方式，啥時候有錯誤啥時候執行。

小結

這樣，咱就了解了javascript的異常處理的基礎了，有興趣的同學再深入了解吧。