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

前言

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


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

Uncaught TypeError: Cannot read property

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

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

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

TypeError: ’undefined’ is not an object

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

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

TypeError: null is not an object

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

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

在實際應用當中,在 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 開發者控制檯可以很容易地重現這個錯誤。

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

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

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

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

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

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

TypeError: ‘undefined’ is not a function

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

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

Uncaught RangeError: Maximum call stack

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

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

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

TypeError: Cannot read property ‘length’

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

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

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

Uncaught TypeError: Cannot set property

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

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

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

ReferenceError: event is not defined

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

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

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


分享到:


相關文章: