JavaScript錯誤處理機制全面分析講解
1. Error 實例
JavaScript在運行錯誤時會拋出一個錯誤,JS提供了Error構(gòu)造函數(shù),所有拋出的錯誤都是這個構(gòu)造函數(shù)的實例
const err = new Error('代碼出錯了');
err.message; // 代碼出錯了
上面的Error接受了一個message參數(shù),Error構(gòu)造函數(shù)還有另外兩個參數(shù)name和stack
- message 錯誤提示信息
- name 錯誤名稱
- stack 錯誤的調(diào)用棧
const err = new Error('代碼出錯了');
err.name; // 'Error'
err.stack; //'Error: 出錯了\n at <anonymous>:1:5'
2. 原生錯誤類型
除了基礎(chǔ)的Error錯誤類型,JavaScript還內(nèi)置了六種原始的錯誤類型
- ReferenceError 引用錯誤
- SyntaxError 語法錯誤
- TypeError 類型錯誤
- RangeError 范圍錯誤
- URIError URI方法執(zhí)行錯誤
- EvalError eval函數(shù)執(zhí)行錯誤
2.1 ReferenceError
使用一個不存在的變量時會拋出Reference Error
test; //Uncaught ReferenceError: assd is not defined at <anonymous>:1:1
另一種觸發(fā)的場景是將一個值分配給無法分配的對象,比如對函數(shù)的運行結(jié)果賦值
console.log() = 1 // Uncaught ReferenceError: Invalid left-hand side in assignment
2.2 SyntaxError
當JS解析代碼發(fā)生錯誤時會拋出SyntaxError錯誤
const 1a; Uncaught SyntaxError: Invalid or unexpected token 5 = 6; Uncaught SyntaxError: Invalid left-hand side in assignment
2.3 TypeError
放變量或者參數(shù)不是預期類型的時候會出現(xiàn)TypeError錯誤,比如對非函數(shù)類型使用new,或者對非函數(shù)類型使用圓括號運算
let a; a(); //VM7449:1 Uncaught TypeError: b is not a function at <anonymous>:1:1
2.4 RangeError
當數(shù)值超出預期范圍的時候會出現(xiàn)RangeError,主要情況有幾種,一是數(shù)組長度為負數(shù),二是Number對象的方法接收的參數(shù)超出范圍,以及函數(shù)堆棧超出最大值
const arr = new Array(-5);
//VM7833:1 Uncaught RangeError: Invalid array lengthat <anonymous>:1:13
function foo(){
foo();
};
foo();
//Uncaught RangeError: Maximum call stack size exceeded2.5 URIError
URI方法執(zhí)行錯誤時會出現(xiàn)URIError錯誤,例如URIError接收非預期的參數(shù)
decodeURI('%');
//VM8142:1 Uncaught URIError: URI malformedat decodeURI (<anonymous>)at <anonymous>:1:1
2.6 evalError
eval函數(shù)執(zhí)行錯誤時會拋出EvalError,該錯誤類型以及不再被使用了,知識為了保證與以前代碼兼容才保留
3. 自定義錯誤類型
除了JS提供的7種原生的錯誤類型,還可以通過繼承Error自定義錯誤類型
funtion CustomError(message){
this.message = message;
this.name = 'CustomError';
};
CustomError.prototype = new Error();
CustomError.prototype.construct = CustomError;
throw new CustomError('這是一個自定義錯誤');
//CustomError {message: '這是一個自定義錯誤', name: 'CustomError'};4. throw
在使用thorw拋出錯誤的時候,代碼執(zhí)行會在在throw處終止,thorw以下的代碼將不再執(zhí)行
throw new Error('出錯了');
console.log('該行代碼不會執(zhí)行');
實際上throw不僅能拋出Error實例,還能拋出任意類型的數(shù)據(jù),對javaScript引擎來說只要遇上throw代碼就停止執(zhí)行
thorw '23';
console.log('該行代碼不會執(zhí)行');
throw true;
throw {};
throw [];
throw 20;throw方法有兩種寫法,可以加上圓括號和省略圓括號
throw new Error('出錯了');
throw (new Error('出錯了'));5. try…catch
使用throw的時候會阻礙后續(xù)代碼的執(zhí)行,使用費try…catch包裹throw語句就不會影響后續(xù)代碼的執(zhí)行了,catch用于錯誤的捕獲,代碼發(fā)生錯誤的時候執(zhí)行。
try {
throw new Error('出錯了');
} catch (e) {
console.error(e)
};
console.log('后續(xù)代碼繼續(xù)執(zhí)行'); //后續(xù)代碼繼續(xù)執(zhí)行
6. finally
不管是否發(fā)生錯誤finally語句都會執(zhí)行
try {
throw new Error('出錯了');
} catch (e) {
console.log('catch')
}finally{
console.log('finally');
}
總結(jié)
JS內(nèi)置了六種內(nèi)錯誤類型: SyntaxError、ReferenceError、TypeError、RangeError、URIError、EvalError
到此這篇關(guān)于JavaScript錯誤處理機制全面分析講解的文章就介紹到這了,更多相關(guān)JS錯誤處理機制內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript中的console.time()函數(shù)詳細介紹
這篇文章主要介紹了JavaScript中的console.time()函數(shù)詳細介紹,console.time()函數(shù)主要用來統(tǒng)計程序執(zhí)行時間,需要的朋友可以參考下2014-12-12
JavaScript+html5 canvas實現(xiàn)本地截圖教程
這篇文章主要為大家詳細介紹了JavaScript+html5 canvas實現(xiàn)本地截圖教程,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-02-02
jser必看的破解javascript各種加密的反向思維方法
才發(fā)現(xiàn)的破解javascript各種加密的反向思維方法,大家有好的方法都跟帖啊最近發(fā)現(xiàn)了一個代碼,加密了5層左右,我將破解到最后一步,而且不用javascript解密程序2007-04-04
elementui-樹形控件實現(xiàn)子節(jié)點右側(cè)添加圖標和數(shù)據(jù)鼠標放上去顯示文字效果
這篇文章主要介紹了elementui-樹形控件實現(xiàn)子節(jié)點右側(cè)添加圖標和數(shù)據(jù)鼠標放上去顯示文字效果,本文結(jié)合實例代碼給大家介紹的非常詳細,感興趣的朋友一起看看吧2024-01-01

