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

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

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

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

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

error類型

ECMA-262 定義了下列7種錯(cuò)誤類型：

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

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

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

EvalError()

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

// Uncaught TypeError: eval is not a constructor
new eval()
// 不會(huì)報(bào)錯(cuò)
eval = () => {}

RangeError()

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

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

ReferenceError()

ReferenceError是引用一個(gè)不存在的變量或左值時(shí)，會(huì)拋出ReferenceError引用錯(cuò)誤

a; // Uncaught ReferenceError: a is not defined

SyntaxError()

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

示例1

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

 示例2

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

TypeError()

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

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

URIError()

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

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

error事件

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

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

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

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

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

throw語句

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

參考：throw - JavaScript | MDN

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

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對(duì)象創(chuàng)建自定義錯(cuò)誤。

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

try...catch...語句

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

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

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

try {
  // 這里可能會(huì)產(chǎn)生錯(cuò)誤，可能是程序錯(cuò)誤，可能是throw語句拋出的錯(cuò)誤
}catch(e) {
  // 當(dāng)try中拋出錯(cuò)誤時(shí)這里才執(zhí)行，變量e包含了錯(cuò)誤信息
  // 可以根據(jù)錯(cuò)誤類型處理錯(cuò)誤，也可以再次拋出錯(cuò)誤
}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; // 這句會(huì)覆蓋掉前面的return
  }
  console.log(3); // 不會(huì)運(yùn)行
}
var result = fn();
// 0
// 1
// 2
 
console.log(result) // false

● try 代碼塊中的錯(cuò)誤，會(huì)被catch捕獲，如果沒有手動(dòng)拋出錯(cuò)誤，不會(huì)被window捕獲 

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

運(yùn)行結(jié)果：

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

● try...finally... 不能捕獲錯(cuò)誤

下面的代碼，由于沒有catch，錯(cuò)誤會(huì)直接被window捕獲。

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

運(yùn)行結(jié)果：

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

下面的代碼，錯(cuò)誤將不能被catch捕獲

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

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

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

最新評(píng)論