10大常見JavaScript代碼錯誤淺析,看看你遇到幾個?

2020-12-12 這個世界很Cool

前言

如今,javascript是一門非常火的語言,尤其是作為前端開發,你必須對它了如指掌。我們在開發調試的時候,它也經常會報錯,下面我們就來具體看看常見的10個錯誤。

Uncaught TypeError: Cannot read property

如果你是一名 JavaScript 開發者,對這個錯誤可能已經熟視無睹。在 Chrome 裡讀取未定義對象的屬性或調用未定義對象的方法時就會發生這個錯誤,在 Chrome 開發者控制臺可以很容易地重現這個錯誤。

發生這個錯誤的原因有很多,其中最為常見的是,在渲染 UI 組件時沒有正確初始化狀態。

TypeError: 』undefined』 is not an object

在 Safari 裡讀取未定義對象的屬性或調用未定義對象的方法時就會發生這個錯誤,在 Safari 開發者控制臺可以很容易地重現這個錯誤。這個錯誤與發生在 Chrome 裡的是差不多的,只是 Safari 為它提供了不同的錯誤信息。

TypeError: null is not an object

在 Safari 裡讀取空(null)對象的屬性或調用空對象的方法時就會發生這個錯誤,在 Safari 開發者控制臺可以很容易地重現這個錯誤。

在實際應用當中,在 JavaScript 裡調用一個未加載的 DOM 元素就會出現這個錯誤。如果對象為空,DOM API 就會返回 null。

DOM 元素需要在創建之後才能被訪問。JavaScript 代碼是按照從上到下的順序進行解析的,所以,如果在 DOM 元素之前有一個標籤包含了 JavaScript 代碼,瀏覽器在解析 HTML 時就會執行這些代碼。在加載 JavaScript 之前,如果 DOM 元素沒有被創建,就會出現這個錯誤。

(unknown): Script error

跨域的未捕捉 JavaScript 異常會變成 Script error。例如,假設 JavaScript 託管在 CDN 上,那麼未捕捉的錯誤(錯誤沒有在 try-catch 裡被捕獲,一路直上到了 window.onerror 裡)就會顯示成「Script error」,而不是顯示具體的錯誤消息。這是瀏覽器出於安全方面的考慮,防止跨域傳遞數據。

TypeError: Object doesn’t support property

在 IE 裡讀取未定義對象的屬性或調用未定義對象的方法時就會發生這個錯誤,在 IE 開發者控制臺可以很容易地重現這個錯誤。

這個錯誤與 Chrome 裡的「TypeError: 『undefined』 is not a function」是同一個東西。不同的瀏覽器為相同的錯誤提供的錯誤消息可能是不一樣的。

在 IE 裡使用 JavaScript 的命名空間時,就很容易碰到這個錯誤。發生這個錯誤十有八九是因為 IE 無法將當前命名空間裡的方法綁定到 this 關鍵字上。例如,假設有個命名空間 Rollbar,它有一個方法叫 isAwesome()。在 Rollbar 命名空間中,可以直接使用 this 關鍵字來調用這個方法:

在 Chrome、Firefox 和 Opera 中這樣做都是沒有問題的,但在 IE 中就不行。所以,最安全的做法是指定全命名空間:

TypeError: 『undefined』 is not a function

在 Chrome 裡調用一個未定義的函數時就會發生這個錯誤,可以在 Chrome 開發者控制臺和 Mozilla 開發者控制臺重現這個錯誤。

Uncaught RangeError: Maximum call stack

在 Chrome 裡,有幾種情況會發生這個錯誤,其中一個就是無限遞歸調用一個函數。這個錯誤可以在 Chrome 開發者控制臺重現。

當傳給函數的值超出可接受的範圍時也會出現這個錯誤。很多函數隻接受指定範圍的數值,例如,Number.toExponential(digits) 和 Number.toFixed(digits) 只接受 0 到 20 的數值,而 Number.toPrecision(digits) 只接受 1 到 21 的數值。

TypeError: Cannot read property 『length』

在 Chrome 裡讀取 undefined 變量的 length 屬性時會發生這個錯誤,這個錯誤可以在 Chrome 開發者控制臺重現。

length 是數組的屬性,但如果數組沒有初始化或者數組的變量名被另一個上下文隱藏起來的話,訪問 length 屬性就會發生這個錯誤。

Uncaught TypeError: Cannot set property

我們無法對 undefined 變量進行賦值或讀取操作,否則的話會拋出「Uncaught TypeError: cannot set property of undefined」異常。例如,在 Chrome 中:

如果 test 對象不存在,就會拋出「Uncaught TypeError: cannot set property of undefined」異常。

ReferenceError: event is not defined

在訪問一個未定義的對象或超出當前作用域的對象時就會發生這個錯誤,這個錯誤可以在 Chrome 開發者控制臺重現。

如果在進行事件處理時遇到這個錯誤,請確保事件對象被作為參數傳入到函數當中。舊瀏覽器(IE)提供了全局的 event 變量,但並不是所有的瀏覽器都會這樣。儘管 jQuery 嘗試對這種行為進行規範化,但最好還是使用傳給函數的 event 對象。

相關焦點

  • 10 種最常見的 Javascript 錯誤
    -javascript-errors/為了回饋我們的開發者社區,我們查看了數千個項目的資料庫,發現了 JavaScript 中頻度最高的 10 種錯誤。我們會告訴你什麼原因導致了這些錯誤,以及如何防止這些錯誤發生。如果你能夠避免落入這些 「陷阱」,你將會成為一個更好的開發者。數據才是王道,我們收集並分析了出現頻次排前 10 的 JavaScript 錯誤。 Rollbar 會收集每個項目的所有錯誤,並總結每個錯誤發生的次數。
  • 【第1199期】10 種最常見的 Javascript 錯誤
    今日早讀文章由@elevenbeans 翻譯授權分享正文從這開始~總結於 1000+ 個項目,並闡述如何避免為了回饋我們的開發者社區,我們查看了數千個項目的資料庫,發現了 JavaScript 中頻度最高的 10 種錯誤。我們會告訴你什麼原因導致了這些錯誤,以及如何防止這些錯誤發生。如果你能夠避免落入這些 「陷阱」,你將會成為一個更好的開發者。
  • 10大最常見的JavaScript錯誤
    JS代碼按照HTML格式從上到下進行解釋,所以,如果在DOM元素之前有一個標籤,那麼在瀏覽器解析HTML頁面的時候,腳本標籤內的JS代碼就會被執行。如果在加載腳本之前尚未創建DOM元素,則會出現此錯誤。在此示例中,我們可以通過添加事件偵聽器來解決該問題,該事件偵聽器將在頁面準備就緒時通知我們。
  • 遇到電腦開機藍屏怎麼辦?10個常見藍屏錯誤代碼,原因及解決辦法
    電腦藍屏也叫電腦藍屏死機,是 Windows 作業系統遇到錯誤時,無法從錯誤系統中恢復正常時,為了保障電腦的數據文件不被損壞的一種強制顯示畫面。電腦的藍屏的具體錯誤代碼主要表現在Windows 7及以前的微軟系統,在Windows 8及Windows 10系統的藍屏中錯誤代碼就不會具體顯示。
  • 這10個JavaScript面試題,看看你會幾個?
    英文| https://medium.com/javascript-in-plain-english/10-javascript-interview-questions-for
  • 10 種 JavaScript 中常見的錯誤
    前言查看了數千個項目後,發現了 10 個最常見的 JavaScript 錯誤。我們會告訴你什麼原因導致了這些錯誤,以及如何防止這些錯誤發生。如果你能夠避免落入這些 「陷阱」,你將會成為一個更好的開發者。
  • JavaScript 開發中常見錯誤排查
    ,這對我們來說無疑是一種挫折,在不知如何著手解決錯誤的時,只能反覆地檢查自己的代碼,看看是不是有什麼奇怪的地方,有時就算停在了錯誤地方也往往不知是什麼意思,會因此花費大量的時間。本文就來介紹在 Chrome 開發者工具中常見的錯誤反饋及排除技巧,讓你不再為了滿屏幕的紅字感到挫折,更能從中學習如何快速搜尋錯誤代碼。
  • 1000+個項目的10大JavaScript錯誤
    JS代碼按照HTML格式從上到下進行解釋,所以,如果在DOM元素之前有一個標籤,那麼在瀏覽器解析HTML頁面的時候,腳本標籤內的JS代碼就會被執行。如果在加載腳本之前尚未創建DOM元素,則會出現此錯誤。在此示例中,我們可以通過添加事件偵聽器來解決該問題,該事件偵聽器將在頁面準備就緒時通知我們。
  • 如何避免 JavaScript 開發者常犯的 9 個錯誤?
    有了一些教程,你就可以馬上開始使用它了。但很多初學者都會犯一些常見的錯誤。在這篇文章中,我們將介紹 9 個常見的錯誤(或者說不好的實踐)以及它們的解決方案,幫助你成為更好的 JavaScript 開發者。
  • 在WEB大型項目中10大常見的JavaScript錯誤
    在實際示例中可能發生這種錯誤的一種方式是,在加載元素之前嘗試在JavaScript中使用DOM元素,這是因為DOM API對於空白的對象引用返回null。任何執行和處理DOM元素的JS代碼都應在創建DOM元素後執行。JS代碼按照HTML格式從上到下進行解釋,所以,如果在DOM元素之前有一個標籤,那麼在瀏覽器解析HTML頁面的時候,腳本標籤內的JS代碼就會被執行。
  • JavaScript 開發中常見錯誤解決小總結
    ,這對我們來說無疑是一種挫折,在不知如何著手解決錯誤的時,只能反覆地檢查自己的代碼,看看是不是有什麼奇怪的地方,有時就算停在了錯誤地方也往往不知是什麼意思,會因此花費大量的時間。本文就來介紹在 Chrome 開發者工具中常見的錯誤反饋及排除技巧,讓你不再為了滿屏幕的紅字感到挫折,更能從中學習如何快速搜尋錯誤代碼。
  • 1000+ 個項目的10大JavaScript錯誤
    作者:前端大魔王https://www.bilibili.com/read/cv1773734/JS代碼按照HTML格式從上到下進行解釋,所以,如果在DOM元素之前有一個標籤,那麼在瀏覽器解析HTML頁面的時候,腳本標籤內的JS代碼就會被執行。如果在加載腳本之前尚未創建DOM元素,則會出現此錯誤。在此示例中,我們可以通過添加事件偵聽器來解決該問題,該事件偵聽器將在頁面準備就緒時通知我們。
  • 10大經典的JavaScript錯誤
    例如,如果你將你的JavaScript代碼託管在CDN上,任何未被捕獲的錯誤(冒泡到window.onerror處理程序中的錯誤,而不是在try-catch中被捕獲的錯誤)都會被報告為 "Script error",而不是包含有用的信息。這是一種瀏覽器安全措施,旨在防止跨域傳遞數據,否則該域將無法通信。要獲取真實的錯誤消息,請執行以下操作。
  • JavaScript中的陷阱大集合
    parseInt不把10作為數字基數如果你忽略parseInt的第二個參數,那麼數字的基數將由下面的規則所決定:◆ 默認基數為10,即按10進位解析◆ 如果數字以0x開頭,那麼基數為16,即按16進位解析◆ 如果數字以0開頭,那麼基數為8,即按8進位解析一個常見的錯誤是我們讓用戶輸入以
  • 網頁技巧:妥善處理JavaScript中的錯誤
    不管你的技術水平如何,錯誤或異常是應用程式開發者生活的一部分。在這些實例中,JavaScript語言使得發現錯誤變得簡單,從而能夠繼續下去。發現錯誤和Java、C#等其他語言相類似,JavaScript中包括了try/catch/finally語句。一個try語句包含了一組代碼,在這組代碼中,像運行時間錯誤這樣的異常可能會發生。
  • JavaScript中使用bind()方法讓代碼更乾淨
    在這個過程中,它消除了匿名函數並刪除了linting錯誤,「不要在循環中寫函數」。你看,我一直在使用JavaScript中的bind()試驗。事實證明,我們可以在多個場合,包括處理我幾周前提到的閉包問題中,使用bind。什麼是bind()?bind函數最近才添加到JavaScript的規範說明中,所以它只能工作於最新的瀏覽器上。
  • Python代碼運行報錯怎麼辦?!—常見的異常錯誤整理
    對於初學Python的朋友來說,運行代碼總會遇到種種報錯,不免煩躁慌亂,總覺得是哪裡出了大問題,其實大家不必緊張,針對這些常見的錯誤類型,我們專門整理了今天這篇文章分享給大家
  • Flash中常見的代碼錯誤
    在Flash代碼編寫時,會遇到各種各樣的錯誤,在這裡就說明一些常見錯誤的原因和解決方法。
  • PHP 編程中 10 個最常見的錯誤,你犯過幾個?
    array(2, 4, 6, 8)這裡有個問題很多人會迷糊。"SELECT `x`,`y` FROM `test` LIMIT $limitFrom, $portionSize"); }聯繫上面提到的錯誤4可以看出,在實際的編碼過程中,要做到一種平衡,才能既滿足功能要求,又能保證性能。
  • 前端er必須掌握的10大JavaScript錯誤
    JS代碼按照HTML格式從上到下進行解釋,所以,如果在DOM元素之前有一個標籤,那麼在瀏覽器解析HTML頁面的時候,腳本標籤內的JS代碼就會被執行。如果在加載腳本之前尚未創建DOM元素,則會出現此錯誤。在此示例中,我們可以通過添加事件偵聽器來解決該問題,該事件偵聽器將在頁面準備就緒時通知我們。