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


1、未獲取TypeError:無法讀取屬性

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

 

更正

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

 

2、TypeError:“undefined”不是對象

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

 

更正

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

 

3、 TypeError:“ null”不是對象

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

 

更正

在構造或初始化期間為對象分配一個合理的值,請勿將其保持為空。

當你嘗試在加載DOM元素之前訪問它們時,也會發生上述錯誤。閱讀這些JavaScript技巧,以便更好地了解這個問題。

注意

你應該注意的一件事是undefined和null在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();

 

5、TypeError:“ this.show”不是函數

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

 

更正

導致此錯誤的原因很簡單,因為你忘記定義函數或輸入錯誤。這是最簡單的情況。

但是,你也可以使用更復雜的情況。這是由於回調和閉包中的自引用作用域引起的。讓我們通過使用Jason給出的示例來重現此錯誤。

 

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

有三種方法可以糾正此錯誤。

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

 

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

 

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

 

6、未獲取RangeError

Chrome上會發生此錯誤,主要是因為兩種情況。

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

 

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

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

 

結論

這些錯誤大多數是由於null / undefined和范圍/關閉問題引起的。現在你已經了解了最常見的JS錯誤以及解決方案,我強烈建議你使用諸如Sentry之類的錯誤記錄器來幫助記錄程序運行中的一些錯誤。這將使你能夠發現一些未知的錯誤。

1、未獲取TypeError:無法讀取屬性

這是列表中最常見的JS錯誤之一。當你嘗試訪問未定義對象中的屬性或方法時,就會發生這種情況。讓我們重現此錯誤,截圖如下:更正
在構造或初始化期間為對象分配一個合理的值,請勿使用JS的保留字null或者undefined2、TypeError:“undefined”不是對象這是與上面相同的錯誤。但是以上錯誤是在Chrome上發生的,而這個錯誤是在Safari上發生的。當你在undefined的對象上調用屬性或方法時,就會發生此錯誤。更正在構造或初始化期間為對象分配一個合理的值,不要保持未定義狀態。

3、 TypeError:“ null”不是對象

當你在空對象上調用屬性或方法時,會發生錯誤。與第2個undefined錯誤類似,這是一個僅發生在Safari上的錯誤。更正
在構造或初始化期間為對象分配一個合理的值,請勿將其保持為空。當你嘗試在加載DOM元素之前訪問它們時,也會發生上述錯誤。閱讀這些JavaScript技巧,以便更好地了解這個問題。

注意

你應該注意的一件事是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();

5、TypeError:“ this.show”不是函數

當你調用未定義的函數時,會發生此錯誤。你可以在Chrome和Firefox中獲得此錯誤消息。更正
導致此錯誤的原因很簡單,因為你忘記定義函數或輸入錯誤。這是最簡單的情況。但是,你也可以使用更復雜的情況。這是由於回調和閉包中的自引用作用域引起的。讓我們通過使用Jason給出的示例來重現此錯誤。當我們執行以上代碼片段並單擊頁面時,你會收到錯誤消息。這是因為函數clearBoard是在窗口中定義的,而匿名函數是在文檔的上下文中執行的。有三種方法可以糾正此錯誤。傳統方法-這是舊的符合瀏覽器的解決方案。我們只保存對this變量的引用,然后在閉包內部引用它。使用bind的現代方法—這是一種更現代的方法,使用bind方法傳遞各自的引用。使用箭頭功能的現代方法-這也是現代方法。它使用ES6箭頭功能。

6、未獲取RangeError

Chrome上會發生此錯誤,主要是因為兩種情況。

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

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

讓我們使用Jason給出的示例。許多功能僅接受特定范圍內的值作為其輸入值。例如,Number.toExponential(digits)Number.toFixed(digits)接受從0到100的數字,和Number.toPrecision(digits)接受從1到100的數字。結論這些錯誤大多數是由於null / undefined和范圍/關閉問題引起的。現在你已經了解了最常見的JS錯誤以及解決方案,我強烈建議你使用諸如Sentry之類的錯誤記錄器來幫助記錄程序運行中的一些錯誤。這將使你能夠發現一些未知的錯誤。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM