前言：
寫代碼的過程中，難免會發生各種錯誤，而發出去的代碼也可能收到用戶瀏覽器報回來的各種錯誤需要查問題。了解這些報錯發生的原因以及出現的瀏覽器可以幫助我們更快的找到bug，下面就一起來看看排名前十的JS錯誤以及避免的方法吧。
一、 Uncaught TypeError: Cannot read property
這個錯誤是Chrome瀏覽器報的。在嘗試去讀取一個undefined變量的屬性或者調用undefined變量的方法就會報錯。你可以在Chrome瀏覽器中輕易復現。
避免方法：在取變量的屬性值，要保證這個變量是定義過的。比如可以這樣寫：
foo && foo.bar
二、 TypeError: ‘undefined’ is not an object (evaluating
這個報錯的原因跟第一條一樣，只是這個是safari瀏覽器的報錯。可以在safari瀏覽器中復現。
三、TypeError: null is not an object (evaluating
這條報錯也是來自safari原因也差不多，只是變量從undefine變成了null。所以就是調用了null的屬性或者方法就會報這個錯。
四、(unknown): Script error
這條就厲害了，一般我們的監控系統也會收到這種錯誤，這類型錯誤只報上來一條Script error沒有給你具體的信息，所以會很難查。
那為什么會報Script error呢？基于安全考慮，瀏覽器有意隱藏其他域JS文件拋出的具體錯誤信息，這樣可以避免敏感信息無意中被惡意腳本捕獲。也就是說，瀏覽器只允許同域名的腳本捕獲具體的錯誤信息。這本質其是瀏覽器跨域錯誤。
比如，當網站執行了托管在第三方CDN的js文件，而這個js腳本如果有錯誤，就會報Script error，而不是那些有用的信息。
解決方法：
第一步：加跨域HTTP響應頭
Access-Control-Allow-Origin: * // 或者是指定網站www.example.com
第二步: 添加 crossorigin=”anonymous”屬性
<script src="http://another-domain.com/App.js " crossorigin="anonymous"></script>
這相當于告訴瀏覽器去請求這個scipt文件的時候使用匿名的方式獲取，意味著請求腳本時沒有潛在的用戶身份信息(如cookies、HTTP 證書等)發送到服務端。
這里需要注意：在設置 crossorigin=”anonymous”屬性之前一定要保證http的響應頭已經設置了Access-Control-Allow-Origin:* 即允許跨域。否則，在火狐瀏覽器下，這個script 標簽就不會被執行。
五、 TypeError: Object doesn’t support property
這個錯誤會在IE報的，當去調用一個沒有被定義的方法時候就會報這個錯。
這個錯誤跟chrome的"TypeError: ‘undefined’ is not a function"一樣。只是不同的瀏覽器會報不同的錯誤語而已。
這種錯誤一般高發在使用命名空間的IE上。99.9%是因為IE無法解析this所指向的正確的命名空間。比如：
var Person = {
name : "daisy",
getName : function() {
console.log(this.name)
},
print: function() {
this.getName()
}
};
比如在Person的命名空間里，print里可以去調用this.getName()這個方法。但是在IE不行，所以得明確的寫明命名空間。
var Person = {
name : "daisy",
getName : function() {
console.log(Person.name)
},
print: function() {
Person.getName()
}
};
（注：由于我手頭沒有window電腦，也懶得去找 = =，所以沒有驗證過，按照原文的翻譯我理解是這個意思，大家有興趣可以驗證一下，評論區告訴我結論~）
六、TypeError: ‘undefined’ is not a function
這個就是上面說的原因，Chrome/火狐 調用了沒有定義的方法導致。不在贅述。
當然除了疏忽，沒有人會去直接調用一個沒有定義的方法，大多是因為在回調函數或者是必包中，對this的理解不夠造成的。比如：
function clearBoard(){
alert("Cleared");
}
document.addEventListener("click", function(){
this.clearBoard(); // what is “this” ?
});
在這個case中，回調函數里的this其實指向的是document，而外層定義的clearBoard命名空間作用域在window中，所以就會報"Uncaught TypeError: this.clearBoard is not a function".的錯誤。
有很多種方法可以解決上面的問題：
1、可以將外層的this存下來，這樣self指向的還是windows。
var self=this; // save reference to 'this', while it's still this!
document.addEventListener("click", function(){
self.clearBoard();
});
2、也可以用bind改變this的指向。
document.addEventListener("click",this.clearBoard.bind(this));
七、 Uncaught RangeError
這個錯誤會在Chrome的很多場景下出現。其中有一種就是使用了遞歸卻沒有使用停止的條件。
八、TypeError: Cannot read property ‘length’
這個錯誤是調用了undefined的length屬性，發生在Chrome中。
所以我們在取一個變量的length時候，一般都是string或者array，要注意他們是有值的。
九、Uncaught TypeError: Cannot set property
給undefined設置屬性的時候會報錯。
十、ReferenceError: event is not defined
訪問一個沒有定義或者不在當前作用域的變量會報這個錯。
什么時候容易出這個錯呢？在事件的回調中，如果要使用event要注意傳入event。
document.addEventListener("mousemove", function (event) {
console.log(event);
})
因為有些瀏覽器不會自動幫你傳，比如火狐，就會報錯。所以最好還是自己傳。
原文鏈接：
Top 10 JAVAScript errors from 1000+ projects (and how to avoid them)?rollbar.com
參考文檔：
Script Error產生的原因及解法?juejin.im
