1. Uncaught TypeError: Cannot Read Property
這是 JavaScript 開發(fā)人員最常遇到的錯(cuò)誤垢箕。當(dāng)你讀取一個(gè)屬性或調(diào)用一個(gè)未定義對(duì)象的方法時(shí)绪爸，Chrome 中就會(huì)報(bào)出這樣的錯(cuò)誤峰鄙。
導(dǎo)致這個(gè)錯(cuò)誤發(fā)生的原因有很多再登，常見的一種情況是在渲染 UI 組件時(shí)卑雁，不正確地初始化狀態(tài)跌榔。我們來看一個(gè)真實(shí)的應(yīng)用程序中發(fā)生這種情況的例子：
以上代碼有兩個(gè)重要方面：
一是組件的狀態(tài)（例如 this.state）地熄，在開始生命周期之前是 undefined 狀態(tài)。
二是當(dāng)通過異步的方式獲取數(shù)據(jù)時(shí)窘行，無論是在構(gòu)造函數(shù)中
componentWillMount 中饥追，還是在構(gòu)造函數(shù)中提取?
componentDidMount，組件在數(shù)據(jù)加載之前至少會(huì)渲染一次罐盔。當(dāng)檢測首次渲染時(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”惶看。
解決的方法很簡單：在構(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ò)誤。
有趣的是本今，在 JavaScript 中拆座，null 和 undefined 是兩種不同的類型，這就是為什么會(huì)出現(xiàn)兩個(gè)不同的錯(cuò)誤消息冠息。未定義通常是一個(gè)尚未分配的變量挪凑，而 null 則表示該值為空。要驗(yàn)證它們不相等逛艰，請(qǐng)使用嚴(yán)格的相等運(yùn)算符：
在實(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 頁面時(shí)執(zhí)行。如果在加載腳本之前尚未創(chuàng)建 DOM?
元素钝的，就會(huì)出現(xiàn)這樣的錯(cuò)誤翁垂。
在這個(gè)例子中，我們可以通過添加一個(gè)事件偵聽器來解決這個(gè)問題硝桩，事件偵聽器會(huì)在頁面準(zhǔn)備就緒時(shí)通知我們沿猜。一旦 addEventListener 被觸發(fā)，該 init( ) 方法就可以使用 DOM 元素碗脊。
這里還是要推薦下小編的web前端學(xué)習(xí)群:867726593啼肩，不管你是小白還是大牛，小編我都?xì)g迎，不定期分享干貨祈坠，包括 小編自己整理的一份最新的web前端資料和0基礎(chǔ)入門教程害碾，歡迎初學(xué)和進(jìn) 階中的小伙伴。在不忙的時(shí)間我會(huì)給大家解惑赦拘。
4. (unknown): Script Error
當(dāng)未捕獲的
JavaScript 錯(cuò)誤違背跨邊界原則時(shí)慌随，就會(huì)發(fā)生腳本錯(cuò)誤。例如躺同，如果將 JavaScript 代碼托管在 CDN?
上阁猜，則任何未被捕獲的錯(cuò)誤（通過 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è)置為 *笛园， 表示可以從任何域正確訪問資源。* 如有必要侍芝，也可以用自己的域名進(jìn)行替換研铆，例如：
Access-Control-Allow-Origin: http://www.example.com。
以下是在各種環(huán)境中設(shè)置的一些示例：
Apache
在 JavaScript 文件夾中州叠，創(chuàng)建一個(gè) .htaccess 文件棵红，并包含以下內(nèi)容：
Nginx
將 add_header 指令添加到提供 JavaScript 文件的 location block 中：
HAProxy
將以下內(nèi)容添加到提供 JavaScript 文件的靜態(tài)資源配置后端：
在腳本標(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è)常見問題端蛆。出現(xiàn)這種情況的絕大部分原因是IE無法將當(dāng)前名稱空間內(nèi)的方法綁定到this關(guān)鍵字。例如酥泛，如果你有 JS Rollbar
方法的命名空間 isAwesome今豆。通常嫌拣，如果位于 Rollbar 命名空間內(nèi)，則可以使用以下語法調(diào)用該 isAwesome 方法：
Chrome晚凿、Firefox 和 Opera 接受這種語法亭罪，IE則不接受。因此歼秽，使用 JS 命名空間時(shí)最安全的做法是：始終以實(shí)際名稱空間作為前綴应役。
6. TypeError: ‘undefined’ Is Not a Function
當(dāng)調(diào)用未定義的函數(shù)時(shí)，Chrome 中就會(huì)發(fā)生這樣的錯(cuò)誤燥筷。
隨著 JavaScript 編碼技術(shù)和設(shè)計(jì)模式在過去幾年中變得越來越復(fù)雜箩祥，回調(diào)和閉包中的自引用范圍也相應(yīng)增加，這是造成這種混亂現(xiàn)象的主要來源肆氓。
正如下面的示例代碼片段：
執(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ì)象沒有 clearBoard( ) 方法凳鬓。
符合舊版瀏覽器的解決方案是以變量的方式簡單地將引用保存在 this 中，然后通過閉包繼承患民。例如：
或者缩举，在較新的瀏覽器中，使用 bind( ) 方法傳遞引用：
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取了未定義長度屬性的變量。
通常在數(shù)組中能夠找到定義的長度因悲，但是如果數(shù)組未初始化或變量名在另一個(gè)上下文中隱藏堕汞，則可能會(huì)出現(xiàn)這種錯(cuò)誤。讓我們用下面的例子來解釋這種錯(cuò)誤晃琳。
當(dāng)用參數(shù)聲明一個(gè)函數(shù)時(shí)讯检，這些參數(shù)會(huì)成為本地參數(shù)琐鲁。這意味著即使你有名稱變量 testArray，函數(shù)中具有相同名稱的參數(shù)仍會(huì)被視為本地參數(shù)人灼。
有兩種方法可以解決這個(gè)問題：
1. 刪除函數(shù)聲明語句中的參數(shù)：
2. 調(diào)用傳遞給我們聲明的數(shù)組函數(shù)：
9. Uncaught TypeError: Cannot Set Property
當(dāng)嘗試訪問未定義的變量時(shí)围段，總會(huì)返回 undefined。我們也無法獲取或設(shè)置 undefined 的任何屬性投放。在這種情況下奈泪，應(yīng)用程序?qū)伋觥癠ncaught TypeError cannot set property of undefined”。
例如灸芳，在 Chrome 瀏覽器中涝桅，如果 test 對(duì)象不存在，就會(huì)出現(xiàn)這種錯(cuò)誤：
所以就需要在訪問變量之前烙样，對(duì)變量進(jìn)行定義冯遂。
10. ReferenceError: Event Is Not Defined
嘗試訪問未定義的變量或當(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)添加事件變量裸准。
結(jié)論
事實(shí)證明很多這些 null 或 undefined 的錯(cuò)誤是普遍存在的。 一個(gè)類似于 Typescript 這樣的好的靜態(tài)類型檢查系統(tǒng)精耐，當(dāng)設(shè)置為嚴(yán)格的編譯選項(xiàng)時(shí)狼速，能夠幫助開發(fā)者避免這些錯(cuò)誤。
