在開發(fā)中，有時(shí)，我們花了幾個(gè)小時(shí)寫的Js 代碼，在游覽器調(diào)試一看，控制臺(tái)一堆紅，瞬間一萬頭草泥馬奔騰而來。
至此，本文主要記錄 Js 常見的一些錯(cuò)誤類型，以及常見的報(bào)錯(cuò)信息，分析其報(bào)錯(cuò)原因，并給予處理方法。并且將介紹幾種捕獲異常的方法。
注：本文使用的谷歌游覽器驗(yàn)證，不同的游覽器，報(bào)錯(cuò)可能會(huì)不一樣。
**常見的錯(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：語(yǔ)法錯(cuò)誤。比如 if(true) {。
- TypeError：類型錯(cuò)誤，表示值的類型非預(yù)期類型時(shí)發(fā)生的錯(cuò)誤。
## **常見的錯(cuò)誤**
```
RangeError:` `Maximum` `call` `stack` `size` `exceeded
```
含義：超出了最大的堆棧大小
為什么報(bào)錯(cuò)?
在使用遞歸時(shí)消耗大量堆棧，導(dǎo)致游覽器拋出錯(cuò)誤，因?yàn)橛斡[器給分配的內(nèi)存不是無限的。
舉個(gè)栗子：
```js
function pow(x, n) {
return x * pow(x, n - 1);
}
pow(10,5)
```
處理辦法：
使用遞歸的時(shí)候，設(shè)定一個(gè)條件來終止遞歸，否則會(huì)無限循環(huán)，直到用盡調(diào)用堆棧空間為止。
```js
function pow(x, n) {
if (n == 1) return x
return x * pow(x, n - 1);
}
pow(10,5)
ReferenceError:` `"x"` `is` `not` `defined
```
含義：“x”未定義
為什么報(bào)錯(cuò)？
當(dāng)你引用一個(gè)沒有定義的變量時(shí)，拋出一個(gè)ReferenceError; 當(dāng)你使用變量的時(shí)候，這個(gè)變量必須要聲明，或者你可以確保它在你當(dāng)前的腳本或作用域 (scope) 中可用。
舉個(gè)栗子：
```js
// 變量未聲明
console.log(a)
fn()
// 錯(cuò)誤的作用域
function sum() {
let number1 = 20,number2 = 30;
return number1 + number2;
}
console.log(number1)
```
處理辦法：
變量使用var|let|const 聲明
提升變量的作用域
```js
// 變量未聲明
let a;
function fn() {};
console.log(a);
fn();
// 錯(cuò)誤的作用域
let number1 = 20, number2 = 30;
function sum() {
return number1 + number2;
}
console.log(number1)
SyntaxError:` `Identifier` `'x'` `has` `already` `been` `declared
```
含義: 標(biāo)識(shí)符已申明
為什么報(bào)錯(cuò)？
某個(gè)變量名稱已經(jīng)作為參數(shù)出現(xiàn)了，又在使用let再次聲明。
舉個(gè)栗子：
```js
// let 重復(fù)聲明
let a = 0;
let a = 2;
// 在函數(shù)中參數(shù)已經(jīng)出現(xiàn)，函數(shù)里使用let重新聲明
function fn(arg) {
let arg = []
}
SyntaxError:` `Invalid` `or` `unexpected` `token
```
含義：捕獲無效或意外的標(biāo)記
為什么報(bào)錯(cuò)？
代碼中有非法的字符或者缺少必要的標(biāo)識(shí)符號(hào)，比如減號(hào) ( - ) 與連接符 ( – ) ，或者是英文雙引號(hào) ( " ) 與中文雙引號(hào) ( “ )。
舉個(gè)栗子：
```js
// 遺漏的字符
let str = 'string;
let colors = ['#000', #333', '#666'];
// 使用特殊字符
let str1 = 'string";
let str2 = 5#5;
// 錯(cuò)配字符(使用中文引號(hào)字符)
let str3 = ‘string’;
```
處理辦法
檢查是否有特殊字符或者是否遺漏一些字符。
```
SyntaxError:` `Unexpected` `end` `of` `input
```
含義：意外的終止輸入
為什么報(bào)錯(cuò)？
代碼中某些地方的括號(hào)或引號(hào)不匹配缺失，缺少()、[]、{}等。
舉個(gè)栗子：
```js
// 缺少括號(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)。
```
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è)栗子：
```js
// 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)算符&&。
```js
let obj = undefined
console.log(obj&&obj.id)
TypeError:` `'x'` `is` `not` `a` `constructor
```
含義：表示 ‘x’不是構(gòu)造函數(shù)
為什么報(bào)錯(cuò)？
使用不是構(gòu)造器的對(duì)象或者變量來作為構(gòu)造器使用。比如：new 10。
舉個(gè)栗子：
```js
let Car = 1;
new Car();
new Math();
```
處理辦法：
使用正確的構(gòu)造函數(shù)。Generator functions 也不能作為構(gòu)造器來使用。
```js
function Car(make, model, year) {
this.make = make;
this.model = model;
this.year = year;
}
```
`SyntaxError:` `Invalid` `regular` `expression` `flags`含義：正則表達(dá)式標(biāo)志無效
為什么報(bào)錯(cuò)？
在代碼中出現(xiàn)了無效的正則表達(dá)式的標(biāo)記。
舉個(gè)栗子：
```js
let reg = /foo/bar;
```
處理辦法：
```js
let reg = /foo/g;
DOMException:` `Failed` `to` `execute` `'open'` `on` `'XMLHttpRequest':` `Invalid` `URL
```
含義：無效的Url
為什么報(bào)錯(cuò)？
在使用ajax 請(qǐng)求時(shí)url錯(cuò)誤，導(dǎo)致請(qǐng)求失敗。
舉個(gè)栗子：
```js
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)求路徑的完整。
```js
createXHR('http://192.168.10:8080')
```
異常調(diào)試及捕獲
try/catch，Js中處理異常的一種模式，try用于可能會(huì)發(fā)生錯(cuò)誤的代碼，catch對(duì)錯(cuò)誤的處理
```js
try{
// 可能會(huì)導(dǎo)致錯(cuò)誤的代碼
}catch(error) {
// 錯(cuò)誤處理
}
```
舉個(gè)栗子：
```js
try{
console.log(a)
}catch(error) {
// 打印錯(cuò)誤信息
console.log(error) // ReferenceError: a is not defined
}
```
throw，用來拋出一個(gè)用戶自定義的異常，執(zhí)行將被停止。
```js
function getUserName(name) {
if(!name) throw new Error('用戶名無效');
return name;
}
getUserName()
```
Promise 的異常處理,Promise執(zhí)行中，本身自帶try...catch的異常處理，出錯(cuò)時(shí)，將錯(cuò)誤Rejact函數(shù)。
```js
new Promise((resolve, reject) => {
throw new Error('error!');
}).catch(alert);
```
console.log() 方法,在游覽器中，使用console.log打印javaScript的值。
```js
let value = '你最棒了，點(diǎn)個(gè)贊唄！'
console.log(value)
```
debugger 斷點(diǎn)調(diào)試，用于停止執(zhí)行 JavaScript，并調(diào)用調(diào)試函數(shù)。
```js
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ò)原因。
**-** **End** -
更多關(guān)于“html5培訓(xùn)”的問題，歡迎咨詢千鋒教育在線名師。千鋒已有十余年的培訓(xùn)經(jīng)驗(yàn)，課程大綱更科學(xué)更專業(yè)，有針對(duì)零基礎(chǔ)的就業(yè)班，有針對(duì)想提升技術(shù)的提升班，高品質(zhì)課程助理你實(shí)現(xiàn)夢(mèng)想。
京公網(wǎng)安備 11010802030320號(hào)