error對象是JavaScript的原生對象，當(dāng)程序解析和運行過程中發(fā)生了錯誤，JS引擎就會自動產(chǎn)生并拋出一個error對象的實例，并且程序會終止在錯誤發(fā)生的地方。

ECMA-262 規(guī)定error對象包含 message 和 name 兩個屬性，message屬性保存錯誤信息，name屬性保存錯誤類型。

可以使用error()構(gòu)造函數(shù)創(chuàng)建一個新的Error錯誤對象，對象接收一個參數(shù)用來表示錯誤信息，error對象會把它作為message屬性的值；如果沒有參數(shù)，它將使用一個預(yù)定義的默認(rèn)字符串作為屬性值

new Error()
new Error('錯誤消息')
 
// 可以省略new操作符
Error()
Error('錯誤消息')
 
// 通常使用throw語句來拋出錯誤
throw Error('錯誤消息')
throw Error()

error對象有一個toString()方法。返回'Error' + message屬性值

error類型

ECMA-262 定義了下列7種錯誤類型：

Error()     // 基類型
EvalError()  // eval錯誤
RangeError() // 范圍錯誤
ReferenceError() // 引用錯誤
SyntaxError() // 語法錯誤
TypeError()  // 類型錯誤
URIError() // URI錯誤

Error 是基類型，其他錯誤類型都繼承自該類型，可以利用它拋出自定義錯誤。

以下6種錯誤類型都是Error對象的派生對象。在JavaScript中，數(shù)組array、函數(shù)function都是特殊的對象

EvalError()

eval()函數(shù)執(zhí)行出錯時會拋出EvalError錯誤，該類型在ES5中已不再出現(xiàn)，為了向后兼容，所以被保留了下來。

// Uncaught TypeError: eval is not a constructor
new eval()
// 不會報錯
eval = () => {}

RangeError()

RangeError是一個值超過有效范圍時，會拋出RangeError范圍錯誤。例如設(shè)置數(shù)組的長度為一個負(fù)值。

// 數(shù)組長度不得為負(fù)數(shù)
new Array(-1) // Uncaught RangeError: Invalid array length

ReferenceError()

ReferenceError是引用一個不存在的變量或左值時，會拋出ReferenceError引用錯誤

a; // Uncaught ReferenceError: a is not defined

SyntaxError()

SyntaxError是代碼解析時會拋出SyntaxError語法錯誤（語法不符合規(guī)則）。

示例1

var 1bar = 1; // SyntaxError: Invalid or unexpected token

 示例2

function fn() {
    // Uncaught SyntaxError: Unexpected token '}'
    var a = 
}
 
fn();

TypeError()

執(zhí)行某些操作時，類型不符合要求會導(dǎo)致TypeError類型錯誤

null.toString() // Uncaught TypeError: Cannot read property 'toString' of null

URIError()

URIError是指調(diào)用URI相關(guān)函數(shù)的參數(shù)不正確時會發(fā)生URIError錯誤，例如，調(diào)用decodeURI 、encodeURI、decodeURIComponent、encodeURIComponent、escape、unescape時發(fā)生的錯誤。

decodeURI('%2') // Uncaught URIError: URI malformed at decodeURIComponent 

error事件

任何沒有通過 try catch 處理的錯誤都會觸發(fā)window對象的error事件。error事件接收五個參數(shù)：

message：錯誤信息（字符串）
source：發(fā)生錯誤的腳本URL（字符串）
lineno：發(fā)生錯誤的行號（數(shù)字）
colno：發(fā)生錯誤的列號（數(shù)字）
error：Error對象（對象）

// 示例1 DOM0級
window.onerror = function(message, source, lineno){
   console.log(message, source, lineno)
}
 
// 示例2 DOM2級
window.addEventListener('error', function(event){
    console.log(event.message, event.source, event.lineno)
});

圖像也支持error事件，當(dāng)圖像src屬性的url不能返回可以識別的圖像格式時，就會觸發(fā)error事件。error事件發(fā)生時圖片下載已結(jié)束。

var img = new Image()
img.src='a.jpg'
img.onerror = function(e) {
  console.log(e)
}

throw語句

throw語句用于拋出錯誤，后面必須指定一個值用來表示錯誤信息，值的類型沒有要求。

參考：throw - JavaScript | MDN

throw 語句用來拋出一個用戶自定義的異常。當(dāng)前函數(shù)的執(zhí)行將被停止（throw之后的語句將不會執(zhí)行），并且控制將被傳遞到調(diào)用堆棧中的第一個catch塊。如果調(diào)用者函數(shù)中沒有catch塊，程序?qū)K止。

throw 'hello world';
 
throw new Error('something bad happened');
 
throw new SyntaxError('I don\'t like your syntax.');
throw new TypeError('what type of variable do you take me for?');
throw new RangeError('sorry,you just don\'t have the range.');
throw new EvalError('That doesn\'t evaluate.');
throw new URIError('URI, is that you?');
throw new ReferenceError('you didn\'t cite your references properly');

可以利用原型鏈繼承Error對象創(chuàng)建自定義錯誤。

function CustomError(message) {
	this.name = 'CustomError'
	this.message = message
}
 
CustomError.prototype = new Error()
throw new CustomError('custom error')

try...catch...語句

try...catch的作用是將可能引發(fā)錯誤的代碼放在try塊中，在catch中捕獲錯誤，對錯誤進(jìn)行處理，選擇是否往下執(zhí)行。

try-catch 語句用于捕獲和處理JavaScript中的異常，try從句定義了可能出現(xiàn)異常的代碼塊，catch從句定義當(dāng)try從句拋出異常時執(zhí)行的代碼。try從句中的任何代碼拋出異常，都會導(dǎo)致代碼終止執(zhí)行，然后執(zhí)行catch中的代碼。

catch從句后面還可以跟finally從句，用于放置清理代碼。無論try從句是否拋出錯誤，finally從句中的代碼都會執(zhí)行。catch和finally都是可選的，但是try從句至少要和其中一個組合成完整的語句。

try {
  // 這里可能會產(chǎn)生錯誤，可能是程序錯誤，可能是throw語句拋出的錯誤
}catch(e) {
  // 當(dāng)try中拋出錯誤時這里才執(zhí)行，變量e包含了錯誤信息
  // 可以根據(jù)錯誤類型處理錯誤，也可以再次拋出錯誤
}finally{
  // 無論try是否拋出異常，這里代碼正常執(zhí)行。即使try中出現(xiàn)return語句。
}

function fn() {
  try {
    console.log(0);
    throw 'bug';
  } catch(e) {
    console.log(1);
    return true;
  } finally {
    console.log(2);
    return false; // 這句會覆蓋掉前面的return
  }
  console.log(3); // 不會運行
}
var result = fn();
// 0
// 1
// 2
 
console.log(result) // false

● try 代碼塊中的錯誤，會被catch捕獲，如果沒有手動拋出錯誤，不會被window捕獲 

try {
  throw new Error('出錯了!');
} catch (e) {
  console.dir(e);
  throw e
}

運行結(jié)果：

注意：在catch中拋出異常, 用 throw e，不要用throw new Error(e)，因為e本身就是一個Error對象了（因為在try代碼快中使用throw拋出的 new Error()，是一個使用構(gòu)造函數(shù)new Error()創(chuàng)建的錯誤實例對象），具有錯誤的完整堆棧信息stack，new Error 會改變堆棧信息，將堆棧定位到當(dāng)前這一行。

● try...finally... 不能捕獲錯誤

下面的代碼，由于沒有catch，錯誤會直接被window捕獲。

try {
    throw new Error('出錯啦啦啦')
} finally {
    console.log('啦啦啦')
}

運行結(jié)果：

● try...catch...只能捕獲同步代碼的錯誤, 不能捕獲異步代碼錯誤。

下面的代碼，錯誤將不能被catch捕獲

try {
    setTimeout(() => {
        throw new Error('出錯啦！')
    })
} catch(e){
    // 不會執(zhí)行
    console.dir(e)
}

因為setTimeout是異步任務(wù)，里面回調(diào)函數(shù)會被放入到宏任務(wù)隊列中，catch中代碼塊屬于同步任務(wù)，處于當(dāng)前的事件隊列中，會立即執(zhí)行。當(dāng)setTimeout中回調(diào)執(zhí)行時， try/catch中代碼塊已不在堆棧中，所以錯誤不能被捕獲。

以上就是JS對象類型之Error錯誤對象的用法詳解的詳細(xì)內(nèi)容，更多關(guān)于JS Error錯誤對象用法的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論