作者：FishStudy520

https://segmentfault.com/a/1190000038323321

前言

在開發(fā)中，有時(shí)，我們花了幾個(gè)小時(shí)寫的js 代碼，在瀏覽器調(diào)試一看，控制臺(tái)一堆紅……瞬間一萬頭草泥馬奔騰而來。

至此，本文主要記錄js 常見的一些錯(cuò)誤類型，以及常見的報(bào)錯(cuò)信息，分析其報(bào)錯(cuò)原因，并給予處理方法。并且將介紹幾種捕獲異常的方法。

常見的錯(cuò)誤類型

• RangeError：標(biāo)記一個(gè)錯(cuò)誤，當(dāng)設(shè)置的數(shù)值超出相應(yīng)的范圍觸發(fā)。比如，new Array(-20)。
• ReferenceError：引用類型錯(cuò)誤，當(dāng)一個(gè)不存在的變量被引用時(shí)發(fā)生的錯(cuò)誤。比如：console.log(a)。
• SyntaxError：語法錯(cuò)誤。比如 if(true) {。
• TypeError：類型錯(cuò)誤，表示值的類型非預(yù)期類型時(shí)發(fā)生的錯(cuò)誤。

常見的錯(cuò)誤

• 1、RangeError: Maximum call stack size exceeded

含義：超出了最大的堆棧大小

為什么報(bào)錯(cuò)?

在使用遞歸時(shí)消耗大量堆棧，導(dǎo)致游覽器拋出錯(cuò)誤，因?yàn)橛斡[器給分配的內(nèi)存不是無限的。舉個(gè)栗子

function?pow(x,?n)?{
?return?x?*?pow(x,?n?-?1);
}
pow(10,5)

處理辦法

使用遞歸的時(shí)候，設(shè)定一個(gè)條件來終止遞歸，否則會(huì)無限循環(huán)，直到用盡調(diào)用堆?？臻g為止。

function?pow(x,?n)?{
??if?(n?==?1)??return?x
??return?x?*?pow(x,?n?-?1);
}
pow(10,5)

• 2、ReferenceError: "x" is not defined

含義：“x”未定義

為什么報(bào)錯(cuò)？

當(dāng)你引用一個(gè)沒有定義的變量時(shí)，拋出一個(gè)ReferenceError; 當(dāng)你使用變量的時(shí)候，這個(gè)變量必須要聲明，或者你可以確保它在你當(dāng)前的腳本或作用域 (scope) 中可用。

舉個(gè)栗子

//?變量未聲明
console.log(a)
fn()
//?錯(cuò)誤的作用域???
function?sum()?{
??let?number1?=?20,number2?=?30;
??return?number1?+?number2;
}
console.log(number1)

處理辦法

1. 變量使用var|let|const 聲明
2. 提升變量的作用域

//?變量未聲明
let?a;
function?fn()?{};
console.log(a);
fn();

//?錯(cuò)誤的作用域
let?number1?=?20,?number2?=?30;
function?sum()?{
???return?number1?+?number2;
}
console.log(number1)

• 3、SyntaxError: Identifier 'x' has already been declared

含義: 標(biāo)識(shí)符已申明

為什么報(bào)錯(cuò)？

某個(gè)變量名稱已經(jīng)作為參數(shù)出現(xiàn)了，又在使用let再次聲明。舉個(gè)栗子

//?let?重復(fù)聲明
let?a?=?0;
let?a?=?2;

//?在函數(shù)中參數(shù)已經(jīng)出現(xiàn)，函數(shù)里使用let重新聲明
function?fn(arg)?{
?let?arg?=?[]
}

• 4、SyntaxError: Invalid or unexpected token

含義：捕獲無效或意外的標(biāo)記

為什么報(bào)錯(cuò)？

代碼中有非法的字符或者缺少必要的標(biāo)識(shí)符號(hào)，比如減號(hào) ( - ) 與連接符 ( – ) ，或者是英文雙引號(hào) ( " ) 與中文雙引號(hào) ( “ )。

舉個(gè)栗子

//?遺漏的字符
let?str?=?'string;
let?colors?=?['#000',?#333',?'#666'];

//?使用特殊字符
let?str1?=?'string";
let?str2?=?5#5;

//?錯(cuò)配字符(使用中文引號(hào)字符)
let?str3?=?‘string’;

處理辦法

檢查是否有特殊字符或者是否遺漏一些字符。

• 5、SyntaxError: Unexpected end of input

含義：意外的終止輸入

為什么報(bào)錯(cuò)？

代碼中某些地方的括號(hào)或引號(hào)不匹配缺失，缺少()、[]、{}等。

舉個(gè)栗子

//?缺少括號(hào)
if(true)
let?obj?=?{id:?1
let?arr?=?[1,2,3

//?缺少結(jié)束符號(hào)
(function?()?{
????console.log('hello?world')
}()

處理辦法

檢查是否有特殊字符或者是否遺漏一些字符,括號(hào)需要配對(duì)出現(xiàn)。

• 6、TypeError: Cannot read property 'x' of undefined

• TypeError: Cannot set property 'x' of undefined

含義：無法讀取屬性‘x’, 無法設(shè)置屬性 'x'

為什么報(bào)錯(cuò)？

訪問或設(shè)置未定義(undefined)或null值的屬性時(shí)會(huì)發(fā)生這種報(bào)錯(cuò)。

舉個(gè)栗子

//?undefined
let?a?=?undefined
a.id?//?讀取
a.id?=?1?//?設(shè)置
//?null
let?b?=?null?
b.id??//?讀取
b.id?=?2?//?設(shè)置
null.filter(item=>item)

處理辦法

有一些方法可以避免這種錯(cuò)誤。一種簡(jiǎn)單且適用于小型屬性鏈的方法是使用邏輯運(yùn)算符&&。

let?obj?=?undefined
console.log(obj&&obj.id)

• 7、TypeError: 'x' is not a constructor

含義：表示 ‘x’不是構(gòu)造函數(shù)

為什么報(bào)錯(cuò)？

使用不是構(gòu)造器的對(duì)象或者變量來作為構(gòu)造器使用。

比如：new 10。

舉個(gè)栗子

let?Car?=?1;
new?Car();
new?Math();

處理辦法

使用正確的構(gòu)造函數(shù)。

Generator functions 也不能作為構(gòu)造器來使用。

function?Car(make,?model,?year)?{
??this.make?=?make;
??this.model?=?model;
??this.year?=?year;
}

• 8、SyntaxError: Invalid regular expression flags

含義：正則表達(dá)式標(biāo)志無效

為什么報(bào)錯(cuò)？

在代碼中出現(xiàn)了無效的正則表達(dá)式的標(biāo)記。

舉個(gè)栗子

let?reg?=?/foo/bar;

處理辦法

let?reg?=?/foo/g;

• 9、DOMException: Failed to execute 'open' on 'XMLHttpRequest': Invalid URL

含義：無效的Url

為什么報(bào)錯(cuò)？

在使用ajax 請(qǐng)求時(shí)url錯(cuò)誤，導(dǎo)致請(qǐng)求失敗。

舉個(gè)栗子

function?createXHR(url)?{
??????let?xhr?=?new?XMLHttpRequest();
??????xhr.open('POST',?url,?true);
??????xhr.setRequestHeader('Content-Type',?'application/x-www-form-urlencoded');
??????xhr.send('user=admin');
??????xhr.onreadystatechange?=?function?()?{
??????}
??}
??createXHR('http://192.168.10.8080')?//?錯(cuò)誤url
??createXHR('http:/192.168.10:8080/open')?//?缺少?/,注：有些游覽器會(huì)自動(dòng)補(bǔ)全

處理辦法

檢查url 請(qǐng)求是否正確，保證請(qǐng)求路徑的完整。

createXHR('http://192.168.10:8080')

異常調(diào)試及捕獲

try/catch，Js中處理異常的一種模式，try用于可能會(huì)發(fā)生錯(cuò)誤的代碼，catch對(duì)錯(cuò)誤的處理。

try{
??//?可能會(huì)導(dǎo)致錯(cuò)誤的代碼
}catch(error)?{
??//?錯(cuò)誤處理
}

舉個(gè)栗子

try{
??console.log(a)
}catch(error)?{
???//?打印錯(cuò)誤信息
??console.log(error)??//?ReferenceError:?a?is?not?defined
}

throw，用來拋出一個(gè)用戶自定義的異常，執(zhí)行將被停止。

function?getUserName(name)?{
????if(!name)?throw?new?Error('用戶名無效');
????return?name;
}
getUserName()

Promise 的異常處理,Promise執(zhí)行中，本身自帶try...catch的異常處理，出錯(cuò)時(shí)，將錯(cuò)誤Rejact函數(shù)。

new?Promise((resolve,?reject)?=>?{
???throw?new?Error('error!');
}).catch(alert);

console.log() 方法,在瀏覽器中，使用console.log打印JavaScript的值。

let?value?=?'你最棒了，點(diǎn)個(gè)贊唄！'
console.log(value)

debugger 斷點(diǎn)調(diào)試，用于停止執(zhí)行 JavaScript，并調(diào)用調(diào)試函數(shù)。

let?value?=?15;
debugger
document.querySelector('body').innerhtml?=?'你最棒了，點(diǎn)個(gè)贊唄！'

總結(jié) 報(bào)錯(cuò)的時(shí)候別慌，有時(shí)候就是那么簡(jiǎn)單，根據(jù)這些代碼敲一敲，熟悉一些常用的報(bào)錯(cuò)信息，便于在報(bào)錯(cuò)的時(shí)候快速的定位到報(bào)錯(cuò)原因。希望對(duì)面的小可愛們有所收獲。