通過(guò)統(tǒng)計(jì)數(shù)據(jù)庫(kù)中的1000多個(gè)項(xiàng)目袜茧，我們發(fā)現(xiàn)在 JavaScript 中最常出現(xiàn)的錯(cuò)誤有10個(gè)菜拓。下面會(huì)向大家介紹這些錯(cuò)誤發(fā)生的原因以及如何防止。

對(duì)于這些錯(cuò)誤發(fā)生的次數(shù)笛厦，我們是通過(guò)收集的數(shù)據(jù)統(tǒng)計(jì)得出的纳鼎。Rollbar 會(huì)收集每個(gè)項(xiàng)目中的所有錯(cuò)誤，并總結(jié)每個(gè)錯(cuò)誤發(fā)生的次數(shù)裳凸，然后通過(guò)各個(gè)錯(cuò)誤的特征進(jìn)行分組贱鄙。

下圖是發(fā)生次數(shù)最多的10大 JavaScript 錯(cuò)誤：

下面開(kāi)始深入探討每個(gè)錯(cuò)誤發(fā)生的情況，以便確定導(dǎo)致錯(cuò)誤發(fā)生的原因以及如何避免姨谷。

在這里我還是要推薦下我自己建的web前端開(kāi)發(fā)學(xué)習(xí)群：731669587逗宁，群里都是學(xué)web前端開(kāi)發(fā)的，如果你正在學(xué)習(xí)前端 梦湘，小編歡迎你加入瞎颗，今天分享的這個(gè)案例已經(jīng)上傳到群文件，大家都是軟件開(kāi)發(fā)黨捌议，不定期分享干貨（只有前端軟件開(kāi)發(fā)相關(guān)的）哼拔，包括我自己整理的一份2018最新的前端進(jìn)階資料和高級(jí)開(kāi)發(fā)教程，歡迎進(jìn)階中和進(jìn)想深入前端的小伙伴瓣颅。

1. Uncaught TypeError: Cannot Read Property

這是 JavaScript 開(kāi)發(fā)人員最常遇到的錯(cuò)誤倦逐。當(dāng)你讀取一個(gè)屬性或調(diào)用一個(gè)未定義對(duì)象的方法時(shí)，Chrome 中就會(huì)報(bào)出這樣的錯(cuò)誤宫补。

導(dǎo)致這個(gè)錯(cuò)誤發(fā)生的原因有很多檬姥，常見(jiàn)的一種情況是在渲染 UI 組件時(shí)曾我，不正確地初始化狀態(tài)。我們來(lái)看一個(gè)真實(shí)的應(yīng)用程序中發(fā)生這種情況的例子健民。

以上代碼有兩個(gè)重要方面：

一是組件的狀態(tài)（例如 this.state）抒巢，在開(kāi)始生命周期之前是 undefined 狀態(tài)。

二是當(dāng)通過(guò)異步的方式獲取數(shù)據(jù)時(shí)秉犹，無(wú)論是在構(gòu)造函數(shù)中 componentWillMount 中虐秦，還是在構(gòu)造函數(shù)中提取 componentDidMount，組件在數(shù)據(jù)加載之前至少會(huì)渲染一次凤优。當(dāng)檢測(cè)首次渲染時(shí)，會(huì)發(fā)現(xiàn) this.state.items 是未定義的蜈彼。此時(shí)就會(huì)出現(xiàn)一個(gè)錯(cuò)誤 -“Uncaught TypeError: Cannot read property ‘map’ of undefined" in the consol”筑辨。

解決的方法很簡(jiǎn)單：在構(gòu)造函數(shù)中使用合理的默認(rèn)值進(jìn)行狀態(tài)初始化。

2. TypeError: ‘undefined’ Is Not an Object (evaluating...)

這是在 Safari 中讀取屬性或調(diào)用未定義對(duì)象上的方法時(shí)發(fā)生的錯(cuò)誤幸逆，這與 Chrome 的上述錯(cuò)誤基本相同棍辕，只是 Safari 使用不同的錯(cuò)誤消息。

3. TypeError: Null Is Not an Object (evaluating...)

這是在 Safari 中讀取屬性或調(diào)用空對(duì)象上的方法時(shí)發(fā)生的錯(cuò)誤还绘。

在實(shí)際情況中楚昭，導(dǎo)致這種錯(cuò)誤的原因之一是：在元素加載之前，就嘗試在 JavaScript 中使用 DOM 元素拍顷。這是因?yàn)?DOM API 對(duì)于空白的對(duì)象引用返回 null抚太。

任何執(zhí)行和處理 DOM 元素的 JS 代碼，都應(yīng)該在創(chuàng)建 DOM 元素之后執(zhí)行昔案。JS 代碼按照 HTML 中的規(guī)定自上而下進(jìn)行解釋尿贫。因此，如果在 DOM 元素之前存在標(biāo)簽踏揣，則腳本標(biāo)簽內(nèi)的 JS 代碼就會(huì)在瀏覽器分析 HTML 頁(yè)面時(shí)執(zhí)行庆亡。如果在加載腳本之前尚未創(chuàng)建 DOM 元素，就會(huì)出現(xiàn)這樣的錯(cuò)誤捞稿。

在這個(gè)例子中又谋，我們可以通過(guò)添加一個(gè)事件偵聽(tīng)器來(lái)解決這個(gè)問(wèn)題，事件偵聽(tīng)器會(huì)在頁(yè)面準(zhǔn)備就緒時(shí)通知我們娱局。一旦 addEventListener 被觸發(fā)彰亥，該 init( ) 方法就可以使用 DOM 元素。

4. (unknown): Script Error

當(dāng)未捕獲的 JavaScript 錯(cuò)誤違背跨邊界原則時(shí)铃辖，就會(huì)發(fā)生腳本錯(cuò)誤剩愧。例如，如果將 JavaScript 代碼托管在 CDN 上娇斩，則任何未被捕獲的錯(cuò)誤（通過(guò) window.onerror 處理程序發(fā)出的錯(cuò)誤仁卷，而不是 try-catch 中捕獲到的錯(cuò)誤）將僅報(bào)告為“腳本錯(cuò)誤”穴翩。這是瀏覽器的一種安全措施，主要用于防止跨域傳遞數(shù)據(jù)的情況出現(xiàn)锦积。

要獲取真實(shí)的錯(cuò)誤消息芒帕，需要執(zhí)行以下操作：

Access-Control-Allow-Origin

將 Access-Control-Allow-Origin 設(shè)置為 *， 表示可以從任何域正確訪問(wèn)資源丰介。* 如有必要背蟆，也可以用自己的域名進(jìn)行替換，例如：

Access-Control-Allow-Origin: www.example.com哮幢。

以下是在各種環(huán)境中設(shè)置的一些示例：

在腳本標(biāo)簽上設(shè)置crossorigin =“anonymous”

在你的 HTML 源代碼中带膀，為每一個(gè)腳本設(shè)置 Access-Control-Allow-Origin，在設(shè)置 SCRIPT 標(biāo)簽中橙垢，設(shè)置 crossorigin="anonymous"垛叨。在將 crossorigin 屬性添加到腳本標(biāo)簽之前，請(qǐng)確保正在向腳本文件發(fā)送 header柜某。在 Firefox 中嗽元，如果 crossorigin 屬性存在但 Access-Control-Allow-Origin 標(biāo)題不存在，則腳本不會(huì)執(zhí)行喂击。

5. TypeError: Object Doesn’t Support Property

當(dāng)調(diào)用未定義的方法時(shí)剂癌，IE 中會(huì)發(fā)生這樣的錯(cuò)誤。

這相當(dāng)于 Chrome 中的 “undefined’ is not a function” 錯(cuò)誤翰绊。對(duì)于相同的邏輯錯(cuò)誤佩谷，不同的瀏覽器可能會(huì)有不同的錯(cuò)誤消息。

這是在 IE 的 Web 應(yīng)用程序中使用 JavaScript 命名空間出現(xiàn)的一個(gè)常見(jiàn)問(wèn)題辞做。出現(xiàn)這種情況的絕大部分原因是IE無(wú)法將當(dāng)前名稱空間內(nèi)的方法綁定到this關(guān)鍵字琳要。例如，如果你有 JS Rollbar 方法的命名空間 isAwesome秤茅。通常稚补，如果位于 Rollbar 命名空間內(nèi)，則可以使用以下語(yǔ)法調(diào)用該 isAwesome 方法：

6. TypeError: ‘undefined’ Is Not a Function

當(dāng)調(diào)用未定義的函數(shù)時(shí)框喳，Chrome 中就會(huì)發(fā)生這樣的錯(cuò)誤课幕。

執(zhí)行上面的代碼會(huì)導(dǎo)致以下錯(cuò)誤：“Uncaught TypeError: undefined is not a function∥蹇澹” 發(fā)生以上錯(cuò)誤的原因是乍惊，當(dāng)你調(diào)用 setTimeout( ) 時(shí)，實(shí)際上是在調(diào)用 window.setTimeout( )放仗，傳遞給 setTimeout( ) 的匿名函數(shù)是在窗口對(duì)象的上下文中定義的润绎，而該窗口對(duì)象沒(méi)有 clearBoard( ) 方法。

符合舊版瀏覽器的解決方案是以變量的方式簡(jiǎn)單地將引用保存在 this 中，然后通過(guò)閉包繼承莉撇。例如：

7. Uncaught RangeError: Maximum Call Stack

這是在很多種情況呢蛤，Chrome 中發(fā)生的錯(cuò)誤，一種情況是當(dāng)你調(diào)用一個(gè)不會(huì)終止的遞歸函數(shù)時(shí)棍郎。

如果將值傳遞給超出范圍的函數(shù)其障，也可能會(huì)發(fā)生這種情況。許多函數(shù)只接受特定范圍內(nèi)的數(shù)字輸入值涂佃。例如励翼，Number.toExponential( digits ) 與 Number.toFixed( digits) 接受的參數(shù)范圍為從0到20，而 Number.toPrecision( digits ) 接受的數(shù)字范圍為從1至21辜荠。

8. TypeError: Cannot Read Property ‘length’

這是 Chrome 中發(fā)生的錯(cuò)誤汽抚，因?yàn)樽x取了未定義長(zhǎng)度屬性的變量。

通常在數(shù)組中能夠找到定義的長(zhǎng)度伯病，但是如果數(shù)組未初始化或變量名在另一個(gè)上下文中隱藏殊橙，則可能會(huì)出現(xiàn)這種錯(cuò)誤。讓我們用下面的例子來(lái)解釋這種錯(cuò)誤狱从。

當(dāng)用參數(shù)聲明一個(gè)函數(shù)時(shí)，這些參數(shù)會(huì)成為本地參數(shù)叠纹。這意味著即使你有名稱變量 testArray季研，函數(shù)中具有相同名稱的參數(shù)仍會(huì)被視為本地參數(shù)。

有兩種方法可以解決這個(gè)問(wèn)題：

9. Uncaught TypeError: Cannot Set Property

當(dāng)嘗試訪問(wèn)未定義的變量時(shí)誉察，總會(huì)返回 undefined与涡。我們也無(wú)法獲取或設(shè)置 undefined 的任何屬性。在這種情況下持偏，應(yīng)用程序?qū)伋觥癠ncaught TypeError cannot set property of undefined”驼卖。

例如，在 Chrome 瀏覽器中鸿秆，如果 test 對(duì)象不存在酌畜，就會(huì)出現(xiàn)這種錯(cuò)誤：

所以就需要在訪問(wèn)變量之前，對(duì)變量進(jìn)行定義卿叽。

10. ReferenceError: Event Is Not Defined

嘗試訪問(wèn)未定義的變量或當(dāng)前范圍之外的變量時(shí)會(huì)引發(fā)此錯(cuò)誤桥胞。

如果在使用事件處理系統(tǒng)時(shí)遇到此錯(cuò)誤，請(qǐng)確保使用傳入的事件對(duì)象作為參數(shù)稿辙。IE 這樣的瀏覽器提供了全局變量事件若河，Chrome 會(huì)自動(dòng)將事件變量附加到處理程序中旷赖，F(xiàn)irefox 則不會(huì)自動(dòng)添加事件變量。

JavaScript 開(kāi)發(fā)工具推薦

SpreadJS 純前端表格控件是基于 HTML5 的 JavaScript 電子表格和網(wǎng)格功能控件缎罢，提供了完備的公式引擎、排序、過(guò)濾策精、輸入控件舰始、數(shù)據(jù)可視化、Excel 導(dǎo)入/導(dǎo)出等功能蛮寂，適用于 .NET蔽午、Java 和移動(dòng)端等各平臺(tái)在線編輯類 Excel 功能的表格程序開(kāi)發(fā)。

結(jié)論

事實(shí)證明很多這些 null 或 undefined 的錯(cuò)誤是普遍存在的酬蹋。 一個(gè)類似于 Typescript 這樣的好的靜態(tài)類型檢查系統(tǒng)及老，當(dāng)設(shè)置為嚴(yán)格的編譯選項(xiàng)時(shí)，能夠幫助開(kāi)發(fā)者避免這些錯(cuò)誤范抓。

最后也希望通過(guò)本文骄恶，可以幫助開(kāi)發(fā)者更好避免或是應(yīng)對(duì)以上的10種錯(cuò)誤。