JS 中排名前十的報錯如何避免

前言：

寫程式碼的過程中，難免會發生各種錯誤，而發出去的程式碼也可能收到使用者瀏覽器報回來的各種錯誤需要檢查問題。了解這些報錯發生的原因以及出現的瀏覽器可以幫助我們更快的找到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);
})

因为有些浏览器不会自动帮你传，比如火狐，就会报错。所以最好还是自己传。

推荐教程：《JS教程》

以上是JS 中排名前十的報錯如何避免的詳細內容。更多資訊請關注PHP中文網其他相關文章！