
1、 Uncaught TypeError: Cannot Read Property
這是 JavaScript 開發人員最常遇到的錯誤。當你讀取一個屬性或調用一個未定義對象的方法時,Chrome 中就會報出這樣的錯誤。導緻這個錯誤發生的原因有很多,常見的一種情況是在渲染 UI 元件時,不正确地初始化狀态。
2、 TypeError: ‘undefined’ Is Not an Object (evaluating...)
這是在 Safari 中讀取屬性或調用未定義對象上的方法時發生的錯誤。您可以在 Safari Developer Console 中輕松測試。這與 1 中提到的 Chrome 的錯誤基本相同,但 Safari 使用了不同的錯誤消息提示語。
3、TypeError: Null Is Not an Object (evaluating...)
這是在 Safari 中讀取屬性或調用空對象上的方法時發生的錯誤。您可以在 Safari Developer Console 中輕松測試。有趣的是,在 JavaScript 中,null 和 undefined 是不一樣的,這就是為什麼我們看到兩個不同的錯誤資訊。undefined 通常是一個尚未配置設定的變量,而 null 表示該值為空。要驗證它們不相等,請嘗試使用嚴格的相等運算符 ===:在現實世界的例子中,這種錯誤可能發生的一種場景是:如果在加載元素之前嘗試在 JavaScript 中使用元素。因為 DOM API 對于空白的對象引用傳回值為 null。任何執行和處理 DOM 元素的 js 代碼都應該在建立 DOM 元素之後執行。js 代碼按照 html 中的規定從上到下進行解釋。 是以,如果 DOM 元素之前有一個标簽,腳本标簽内的 js 代碼将在浏覽器解析 html 頁面時執行。如果在加載腳本之前尚未建立 DOM 元素,則會出現此錯誤。
4、(unknown): Script Error
當未捕獲的 JavaScript 錯誤違背跨邊界原則時,就會發生腳本錯誤。例如,如果将 JavaScript 代碼托管在 CDN 上,則任何未被捕獲的錯誤(通過 window.onerror 處理程式發出的錯誤,而不是 try-catch 中捕獲到的錯誤)将僅報告為“腳本錯誤”。這是浏覽器的一種安全措施,主要用于防止跨域傳遞資料的情況出現。将 Access-Control-Allow-Origin 設定為 *, 表示可以從任何域正确通路資源。* 如有必要,也可以用自己的域名進行替換,例如:
5、 TypeError: Object Doesn’t Support Property
當調用未定義的方法時,IE 中會發生這樣的錯誤。這相當于 Chrome 中的 “undefined’ is not a function” 錯誤。對于相同的邏輯錯誤,不同的浏覽器可能會有不同的錯誤消息。這是在 IE 的 Web 應用程式中使用 JavaScript 命名空間出現的一個常見問題。出現這種情況的絕大部分原因是IE無法将目前名稱空間内的方法綁定到this關鍵字。
6、TypeError: ‘undefined’ Is Not a Function
當調用未定義的函數時,Chrome 中就會發生這樣的錯誤。随着 JavaScript 編碼技術和設計模式在過去幾年中變得越來越複雜,回調和閉包中的自引用範圍也相應增加,這是造成這種混亂現象的主要來源。
7、Uncaught RangeError: Maximum Call Stack
這是在很多種情況,Chrome 中發生的錯誤,一種情況是當你調用一個不會終止的遞歸函數時。如果将值傳遞給超出範圍的函數,也可能會發生這種情況。許多函數隻接受特定範圍内的數字輸入值。
8、TypeError: Cannot Read Property ‘length’
這是 Chrome 中發生的錯誤,因為讀取了未定義長度屬性的變量。通常在數組中能夠找到定義的長度,但是如果數組未初始化或變量名在另一個上下文中隐藏,則可能會出現這種錯誤。
9、 Uncaught TypeError: Cannot Set Property
當嘗試通路未定義的變量時,總會傳回 undefined。我們也無法擷取或設定 undefined 的任何屬性。在這種情況下,應用程式将抛出“Uncaught TypeError cannot set property of undefined”。
10、ReferenceError: Event Is Not Defined
嘗試通路未定義的變量或目前範圍之外的變量時會引發此錯誤。如果在使用事件處理系統時遇到此錯誤,請確定使用傳入的事件對象作為參數。IE 這樣的浏覽器提供了全局變量事件,Chrome 會自動将事件變量附加到處理程式中,Firefox 則不會自動添加事件變量。
結論
事實證明很多這些 null 或 undefined 的錯誤是普遍存在的。 一個類似于 Typescript 這樣的好的靜态類型檢查系統,當設定為嚴格的編譯選項時,能夠幫助開發者避免這些錯誤。