最多見的JavaScript錯誤及其解決方法

報錯,多是軟件開發過程當中最頭疼的問題之一。令他們感到很差的是,當你初次閱讀這些報錯信息時,有些錯誤是陌生的。可是,當你抽出時間並正確閱讀時,它們確實會提供你須要瞭解的信息。如下是一些常見的JavaScript錯誤及其相關修復程序的列表。這些修復程序可能對你而言並不徹底相同,由於它們在不一樣的框架中有所不一樣,可是它們將使你初步瞭解錯誤的緣由。html

一、未獲取TypeError:沒法讀取屬性

這是列表中最多見的JS錯誤之一。當你嘗試訪問未定義對象中的屬性或方法時,就會發生這種狀況。讓咱們重現此錯誤,截圖以下:git

更正瀏覽器

在構造或初始化期間爲對象分配一個合理的值,請勿使用JS的保留字null或者undefined安全

 

二、TypeError:「undefined」不是對象閉包

這是與上面相同的錯誤。可是以上錯誤是在Chrome上發生的,而這個錯誤是在Safari上發生的。當你在undefined的對象上調用屬性或方法時,就會發生此錯誤。框架

更正在構造或初始化期間爲對象分配一個合理的值,不要保持未定義狀態。函數

三、 TypeError:「 null」不是對象

當你在空對象上調用屬性或方法時,會發生錯誤。與第2個undefined錯誤相似,這是一個僅發生在Safari上的錯誤。this

更正編碼

在構造或初始化期間爲對象分配一個合理的值,請勿將其保持爲空。當你嘗試在加載DOM元素以前訪問它們時,也會發生上述錯誤。閱讀這些JavaScript技巧,以便更好地瞭解這個問題。 注意spa

你應該注意的一件事是undefinednull在JavaScript是兩回事。這就是爲何咱們在兩種狀況下都看到錯誤消息的變體的緣由。undefined一般是未初始化的變量,而null 表示該值爲空。

4. TypeError:對象不支持屬性

當你調用undefined的方法時,這是在IE上發生的錯誤。 這與Chrome中的錯誤「 TypeError:'undefined'is a function」很是類似。到如今爲止你已經瞭解到,對於相同的邏輯問題,不一樣的瀏覽器會有不一樣的錯誤。

更正

此錯誤是IE的常見問題。他進一步指出,這是IE上的一個常見問題,其中JS應用程序使用名稱空間綁定。

在這種狀況下,99.9%的時間問題是IE沒法將當前名稱空間中的方法綁定到this關鍵字。例如,若是你的JS名稱空間Rollbar帶有方法,isAwesome.一般,若是你在Rollbar名稱空間中,則能夠調用isAwesome具備如下語法的方法:

this.isAwesome();

Chrome,Firefox和Opera將很樂意接受此語法。IE,則不會。所以,使用JS名稱空間時最安全的選擇是始終以實際名稱空間做爲前綴。

Rollbar.isAwesome();

五、TypeError:「 this.show」不是函數

當你調用未定義的函數時,會發生此錯誤。你能夠在Chrome和Firefox中得到此錯誤消息。

更正 致使此錯誤的緣由很簡單,由於你忘記定義函數或輸入錯誤。這是最簡單的狀況。

可是,你也可使用更復雜的狀況。這是因爲回調和閉包中的自引用做用域引發的。讓咱們經過使用Jason給出的示例來重現此錯誤。

當咱們執行以上代碼片斷並單擊頁面時,你會收到錯誤消息。這是由於函數clearBoard是在窗口中定義的,而匿名函數是在文檔的上下文中執行的。

有三種方法能夠糾正此錯誤。

傳統方法-這是舊的符合瀏覽器的解決方案。咱們只保存對this變量的引用,而後在閉包內部引用它。

使用bind的現代方法—這是一種更現代的方法,使用bind方法傳遞各自的引用。

使用箭頭功能的現代方法-這也是現代方法。它使用ES6箭頭功能。

六、未獲取RangeError

Chrome上會發生此錯誤,主要是由於兩種狀況。

1)、你的遞歸函數沒有終止。

2)、你將超出範圍的值傳遞給函數

讓咱們使用Jason給出的示例。許多功能僅接受特定範圍內的值做爲其輸入值。例如,Number.toExponential(digits)Number.toFixed(digits)接受從0到100的數字,和Number.toPrecision(digits)接受從1到100的數字。

結論

這些錯誤大多數是因爲null / undefined和範圍/關閉問題引發的。如今你已經瞭解了最多見的JS錯誤以及解決方案,我強烈建議你使用諸如Sentry之類的錯誤記錄器來幫助記錄程序運行中的一些錯誤。這將使你可以發現一些未知的錯誤。但願你瞭解了大多數JS錯誤的根本緣由。最後,祝編碼愉快!

文章轉自最多見的JavaScript錯誤及其解決方法

相關文章
相關標籤/搜索