javascript錯誤處理機制是什么

小編給大家分享一下javascript錯誤處理機制是什么，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

有時候，在自己封裝的工具函數中，不傳參或傳入了錯誤類型的參數，也要適當的拋出一些錯誤以示警告；使用框架不正常情況下也會拋出錯誤，如果對錯誤一無所知，便無從下手調試。綜合上述，了解錯誤的處理機制是多么必要。

以下是筆者歸納總結，如有誤之處，歡迎指出。

錯誤構造函數
javascript規范中總共有8中錯誤類型構造函數
Error -- 錯誤對象
SyntaxError --解析過程語法錯誤
TypeError -- 不屬于有效類型
ReferenceError -- 無效引用
RangeError -- 數值超出有效范圍
URIError -- 解析URI編碼出錯
EvalError -- 調用eval函數錯誤
InternalError -- Javascript引擎內部錯誤的異常拋出， "遞歸太多"

其中兩種做個特殊說明：
EvalError調用eval函數錯誤，已經棄用，為了向后兼容，低版本還可以使用。
InternalError 遞歸過深 拋出錯誤，多數瀏覽器未實現，屬于非標準方法，生產環境禁用
繼承關系
Error是錯誤的基類，其他類型都繼承Error這個類，可以使用ES6中提供的Object.getPrototypeOf()來判斷，一個類是否繼承了另一個類。

console.log(Object.getPrototypeOf(SyntaxError) === Error);    // true
console.log(Object.getPrototypeOf(TypeError) === Error);   // true
console.log(Object.getPrototypeOf(RangeError) === Error);   // true
console.log(Object.getPrototypeOf(URIError) ===  Error);   // true
console.log(Object.getPrototypeOf(EvalError) === Error);   // true
console.log(Object.getPrototypeOf(ReferenceError) === Error); // true

來聊一聊每一種錯誤類型的使用和出錯的場景。

Error
通過Error的構造器可以創建一個錯誤對象。當運行時錯誤產生時，Error的實例對象會被拋出。
語法：new Error([message])
參數：

message 可選，錯誤描述信息。

拋出錯誤
使用throw語句來拋出異常
throw new Error('這里拋出的是錯誤信息')
運行后，會在控制臺打印輸出：
Uncaught Error: 這里拋出的是錯誤信息
注意： 使用 throw 拋出異常后，之后的代碼不再執行。

捕獲錯誤
可以通過try{}catch(){}語句來捕獲到這個錯誤

try{
   throw new Error('這里拋出的是錯誤信息')
 }
 catch(err){
   alert(err.name + ' '+ err.message)
   }

屬性說明：

 當使用new Error創建錯誤實例后，會有兩個屬性：

let e = new Error('這里拋出的是錯誤信息');
name屬性，為錯誤的類型，此時為Error
message屬性，為錯誤的信息，此時為'這里拋出的是錯誤信息'

SyntaxError
解析過程語法錯誤,這種類型拋出的錯誤有很多，往往是書寫時候造成的語法錯誤，例如：

let n = 11;   // Uncaught SyntaxError: Invalid or unexpected token
let str = "hel"lo" // Uncaught SyntaxError: Unexpected identifier
let 123Var = 'hi' // Uncaught SyntaxError: Invalid or unexpected token

語法錯誤有很多就不一一列舉了，當在瀏覽器運行時，控制臺會拋錯，并且告知第幾行，所以調試器來比較方便。但要讀懂錯誤的類型為SyntaxError，以及后面的錯誤信息，這樣方便改錯。

TypeError
不屬于有效類型。這種錯誤就是在給的不是需要的類型而導致無法操作，會拋出類型錯誤。
變量或參數不是預期類型，
變量或參數不是預期類型
例如new運算符后必須是函數，而給定的不是函數，則會拋出類型錯誤

let fn = 'hello';
new fn;

拋出錯誤：
Uncaught TypeError: fn is not a constructor
調用對象不存在的方法

let obj = {};
obj.fn()

拋出錯誤：
Uncaught TypeError: obj.fn is not a function
當然你也可以在封裝函數時候，強制傳入的參數為指定類型，否則拋出類型錯誤。

function flatten(arr){
if( !Array.isArray(arr) )
{
       throw new TypeError('傳入參數不是數組')   
}    
}

flatten('test');

傳入的參數不為數組時，拋出自定義的類型錯誤：
Uncaught TypeError: 傳入參數不是數組

ReferenceError
無效引用。

引用了一個不存在的變量

console.log(a);

拋出錯誤
Uncaught ReferenceError: a is not defined
將變量賦值給一個無法被賦值的數據
這個錯誤常常犯的地方實在調用一個方法后在if語句中做判斷，將比較運算符==寫成了賦值運算符=，例如判斷一個字符串第一個字符是不是指定的字符：

let str = 'hello';
if( str.charAt(0) = 'h' ){
   console.log('第一個字符為h');
   }

拋出錯誤：
Uncaught ReferenceError: Invalid left-hand side in assignment
RangeError
數值超出有效范圍。在一些方法中，傳入的數值必須在一定的范圍內，否則會拋出超出范圍的錯誤。
創建數組傳入的長度小于了0

let arr = new Array(-1)

拋出錯誤：
Uncaught RangeError: Invalid array length
repeat方法重復指定的字符串重復次數小于0

let str = 'hello';
str.repeat(-1)

拋出錯誤：
Uncaught RangeError: Invalid count value

URIError
處理URI編碼出錯。函數參數不正確，主要是encodeURI()、decodeURI()、encodeURIComponent()、decodeURIComponent()、escape()和unescape()這六個函數。
例如：

decodeURIComponent('%');
decodeURI('%2')

拋出錯誤：
Uncaught URIError: URI malformed

自定義錯誤類型
有時候希望自定義錯誤類型，需要自定義一個構造函數，然后讓原型繼承繼承Error.prototype即可。

function MyErrorType(message){
this.message = message || '錯誤';
this.name = 'MyErrorType';
this.stack = (new Error()).stack;  // 錯誤位置和調用棧
}
MyErrorType.prototype = Object.create(Error.prototype);
MyErrorType.prototype.constructor = MyErrorType;
throw new MyErrorType('自定義錯誤類型拋出錯誤')

關于調用的錯誤棧信息
提供的錯誤的跟蹤功能，以什么樣的調用順序，在哪個文件的哪一行捕獲到這個錯誤。
例如以下調用：

 function trace() {
  try {
        throw new Error('myError');
  }
  catch(e) {
        console.log(e.stack);
  }
  }
function b() {
trace();
}
function a() {
b(3, 4, '\n\n', undefined, {});
}
a('first call, firstarg');

錯誤信息為：
Error: myError
  at trace (<Error.html>:3:14)
  at b (<Error.html>:10:6)
  at a (<Error.html>:13:6)
  at <Error.html>:15:4

以上是javascript錯誤處理機制是什么的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！