為了回饋我們的開發(fā)人員社區(qū)，我們查看了包含數(shù)千個項目的數(shù)據(jù)庫，并發(fā)現(xiàn)了JavaScript中的前10大錯誤。我將向你展示導(dǎo)致它們的原因以及如何防止它們發(fā)生。如果你避免這些“陷阱”，它將使你成為更好的開發(fā)人員。

由于數(shù)據(jù)為王，因此我們收集、分析并排名了前10個JavaScript錯誤。Rollbar收集每個項目的所有錯誤，并總結(jié)每個項目發(fā)生了多少次，我們通過根據(jù)錯誤的指紋對錯誤進行分組來實現(xiàn)。

我們集中于最有可能影響你和你的用戶的錯誤。為此，我們根據(jù)在不同公司中遇到錯誤的項目數(shù)量來對錯誤進行排名。

以下是十大JavaScript錯誤：

為了便于閱讀，每個錯誤都被縮短了，讓我們更深入地研究每一個問題，以確定是什么導(dǎo)致了這些問題，以及如何避免產(chǎn)生這些問題。

1. Uncaught TypeError: Cannot read property

如果你是一個JavaScript開發(fā)人員，你可能已經(jīng)看到過這個錯誤。當你讀取屬性或在未定義對象上調(diào)用方法時，Chrome中就會發(fā)生這種情況。你可以在Chrome開發(fā)者控制臺中輕松進行測試。

發(fā)生這種情況的原因有很多，但常見的原因是渲染UI組件時狀態(tài)初始化不當。讓我們來看一個在現(xiàn)實應(yīng)用中如何發(fā)生這種情況的示例。我們將選擇React，但是不正確初始化的相同原理也適用于Angular，Vue或任何其他框架。

class Quiz extends Component { 
  componentWillMount() { 
    axios.get('/thedata').then(res => { 
      this.setState({items: res.data}); 
    }); 
  } 
  render() { 
    return ( 
      <ul> 
        {this.state.items.map(item => 
          <li key={item.id}>{item.name}</li> 
        )} 
      </ul> 
    ); 
  } 
} 

這里有兩件重要的事情要意識到：

• 組件的狀態(tài)(例如 this.state)以 undefined 狀態(tài)開始使用。
• 當你異步獲取數(shù)據(jù)時，無論數(shù)據(jù)是在構(gòu)造函數(shù) componentWillMount 還是 componentDidMount 中獲取，組件都將在數(shù)據(jù)加載之前至少渲染一次。當Quiz第一次渲染時，this.state.items 是 undefined。這反過來又意味著ItemList會得到未定義的items，你會在控制臺中得到一個錯誤——"UncaughtTypeError: Cannot read property 'map' of undefined "的錯誤。

這很容易解決，最簡單的方法：在構(gòu)造函數(shù)中使用合理的默認值初始化狀態(tài)。

class Quiz extends Component { 
  // 添加了這個: 
  constructor(props) { 
    super(props); 
    this.state = { 
      items: [] // 默認值 
    }; 
  } 
  componentWillMount() { 
    axios.get('/thedata').then(res => { 
      this.setState({items: res.data}); 
    }); 
  } 
  render() { 
    return ( 
      <ul> 
        {this.state.items.map(item => 
          <li key={item.id}>{item.name}</li> 
        )} 
      </ul> 
    ); 
  } 
} 

你的應(yīng)用程序中的實際代碼可能會有不同，但我希望已經(jīng)給了你足夠的線索，讓你在你的應(yīng)用程序中修復(fù)或避免這個問題。如果沒有，請繼續(xù)閱讀，因為我將在下面介紹有關(guān)相關(guān)錯誤的更多示例。

2. TypeError: ‘undefined’ is not an object (evaluating

這是在Safari中讀取屬性或調(diào)用undefined對象上的方法時發(fā)生的錯誤，你可以在Safari開發(fā)者控制臺中非常輕松地進行測試。這基本上與上述針對Chrome的錯誤相同，但Safari使用了不同的錯誤消息。

3. TypeError: null is not an object (evaluating

這是在Safari中讀取屬性或調(diào)用null對象上的方法時發(fā)生的錯誤，你可以在Safari開發(fā)者控制臺中非常輕松地進行測試。

有趣的是，在JavaScript中，null和undefined不相同，這就是為什么我們看到兩個不同的錯誤消息的原因。undefined通常是尚未分配的變量，而null表示該值為空白。要驗證它們是否相等，請嘗試使用嚴格相等運算符。

在實際示例中可能發(fā)生這種錯誤的一種方式是，在加載元素之前嘗試在JavaScript中使用DOM元素，這是因為DOM API對于空白的對象引用返回null。

任何執(zhí)行和處理DOM元素的JS代碼都應(yīng)在創(chuàng)建DOM元素后執(zhí)行。JS代碼按照HTML格式從上到下進行解釋，所以，如果在DOM元素之前有一個標簽，那么在瀏覽器解析HTML頁面的時候，腳本標簽內(nèi)的JS代碼就會被執(zhí)行。如果在加載腳本之前尚未創(chuàng)建DOM元素，則會出現(xiàn)此錯誤。

在此示例中，我們可以通過添加事件偵聽器來解決該問題，該事件偵聽器將在頁面準備就緒時通知我們。一旦觸發(fā)了 addEventListener，init() 方法就可以使用DOM元素。

<script> 
  function init() { 
    var myButton = document.getElementById("myButton"); 
    var myTextfield = document.getElementById("myTextfield"); 
    myButton.onclick = function() { 
      var userName = myTextfield.value; 
    } 
  } 
  document.addEventListener('readystatechange', function() { 
    if (document.readyState === "complete") { 
      init(); 
    } 
  }); 
</script> 
<form> 
  <input type="text" id="myTextfield" placeholder="Type your name" /> 
  <input type="button" id="myButton" value="Go" /> 
</form> 

4. (unknown): Script error

當未捕獲的JavaScript錯誤違反跨源策略跨越域邊界時，將發(fā)生腳本錯誤。例如，如果你將你的JavaScript代碼托管在CDN上，任何未被捕獲的錯誤(冒泡到window.onerror處理程序中的錯誤，而不是在try-catch中被捕獲的錯誤)都會被報告為 "Script error"，而不是包含有用的信息。這是一種瀏覽器安全措施，旨在防止跨域傳遞數(shù)據(jù)，否則該域?qū)o法通信。

要獲取真實的錯誤消息，請執(zhí)行以下操作。

發(fā)送Access-Control-Allow-Origin標頭

將 Access-Control-Allow-Origin 標頭設(shè)置為 * 表示可以從任何域正確訪問資源。你可以根據(jù)需要將 * 替換為您的域：例如，Access-Control-Allow-Origin：www.example.com。但是，處理多個域比較復(fù)雜，如果使用CDN可能會出現(xiàn)緩存問題，那么可能不值得花費精力。

以下是一些有關(guān)如何在各種環(huán)境中設(shè)置此標頭的示例：

• Apache

在將提供JavaScript文件的文件夾中，創(chuàng)建一個具有以下內(nèi)容的 .htaccess 文件：

Header add Access-Control-Allow-Origin "*" 

• Nginx

將add_header指令添加到提供JavaScript文件的location塊中：

location ~ ^/assets/ { 
    add_header Access-Control-Allow-Origin *; 
} 

• HAProxy

將以下內(nèi)容添加到提供JavaScript文件的asset后端：

rspadd Access-Control-Allow-Origin:\ * 

在腳本標簽上設(shè)置crossorigin =“ anonymous”

在你的HTML源代碼中，對于您設(shè)置了 Access-Control-Allow-Origin 標頭的每個腳本，在script標記上設(shè)置crossorigin="anonymous"。在script標記上添加 crossorigin 屬性之前，請確保已驗證是否已為腳本文件發(fā)送了標頭。在Firefox中，如果存在 crossorigin 屬性，但沒有 Access-Control-Allow-Origin 標頭，則不會執(zhí)行腳本。

5. TypeError: Object doesn’t support property

這是在IE中發(fā)生的錯誤，當您調(diào)用undefined的方法時，你可以在IE開發(fā)人員控制臺中對此進行測試。

這等效于Chrome中的錯誤“ TypeError： ‘undefined’ is not a function”。是的，對于相同的邏輯錯誤，不同的瀏覽器可能具有不同的錯誤消息。

這是IE在采用JavaScript命名空間的Web應(yīng)用程序中常見的問題，在這種情況下，99.9%的問題是IE無法將當前名稱空間中的方法綁定到 this 關(guān)鍵字。

例如，如果你的JS命名空間 Rollbar 使用 isAwesome 方法。通常，如果你在 Rollbar 名稱空間中，則可以使用以下語法調(diào)用 isAwesome 方法：

this.isAwesome(); 

Chrome，F(xiàn)irefox和Opera將很樂意接受此語法。另一方面，IE則不會。因此，在使用JS命名空間時，最安全的方法是用實際的命名空間作為前綴。

Rollbar.isAwesome(); 

6. TypeError: ‘undefined’ is not a function

這是在Chrome中發(fā)生的錯誤，當你調(diào)用undefined的函數(shù)時。你可以在Chrome開發(fā)者控制臺和Mozilla Firefox開發(fā)者控制臺中對此進行測試。

隨著這些年來JavaScript的編碼技術(shù)和設(shè)計模式越來越復(fù)雜，在回調(diào)和閉包中的自引用作用域也相應(yīng)地增多，這也是相當常見的這種或那種混亂的根源。

考慮以下示例代碼片段：

function clearBoard(){ 
  alert("Cleared"); 
} 
document.addEventListener("click", function(){ 
  this.clearBoard(); // 這個 "this" 是什么？ 
}); 

如果執(zhí)行上述代碼，然后單擊該頁面，則會導(dǎo)致以下錯誤“ Uncaught TypeError：this.clearBoard not a function”。原因是正在執(zhí)行的匿名函數(shù)是在文檔的上下文中，而 clearBoard 是在 window 中定義的。

傳統(tǒng)的、與舊瀏覽器兼容的解決方案是簡單地將對它的引用保存在一個變量中，然后閉包可以繼承這個變量。例如：

var self = this;   
document.addEventListener("click", function(){ 
  self.clearBoard(); 
}); 

另外，在較新的瀏覽器中，可以使用 bind() 方法傳遞正確的引用：

document.addEventListener("click",this.clearBoard.bind(this)); 

7. Uncaught RangeError: Maximum call stack

這是Chrome瀏覽器在幾種情況下出現(xiàn)的錯誤，一種是調(diào)用不終止的遞歸函數(shù)。你可以在Chrome開發(fā)者控制臺中對此進行測試。

如果將值傳遞給超出范圍的函數(shù)，也可能會發(fā)生這種情況。許多函數(shù)的輸入值僅接受特定范圍的數(shù)字，例如，Number.toExponential(digits) 和 Number.toFixed(digits) 接受0到20之間的數(shù)字，而Number.toFixed(digits) 接受1到21之間的數(shù)字。

var a = new Array(4294967295);  //OK 
var b = new Array(-1); //range error 
 
var num = 2.555555; 
document.writeln(num.toExponential(4));  //OK 
document.writeln(num.toExponential(-2)); //range error! 
 
num = 2.9999; 
document.writeln(num.toFixed(2));   //OK 
document.writeln(num.toFixed(25));  //range error! 
 
num = 2.3456; 
document.writeln(num.toPrecision(1));   //OK 
document.writeln(num.toPrecision(22));  //range error! 

8. TypeError: Cannot read property ‘length’

這是Chrome瀏覽器中發(fā)生的錯誤，因為讀取undefined的變量的length屬性，你可以在Chrome開發(fā)者控制臺中進行測試。

通常情況下，你可以在數(shù)組上找到定義的長度，但如果數(shù)組沒有初始化或者變量名被隱藏在其他上下文中，你可能會遇到這個錯誤。通過以下示例讓我們了解此錯誤。

var testArray= ["Test"]; 
function testFunction(testArray) { 
    for (var i = 0; i < testArray.length; i++) { 
      console.log(testArray[i]); 
    } 
} 
testFunction(); 

當你聲明一個帶參數(shù)的函數(shù)時，這些參數(shù)就變成了局部參數(shù)。這意味著即使你具有名稱為 testArray 的變量，函數(shù)內(nèi)具有相同名稱的參數(shù)仍將被視為局部參數(shù)。

你可以通過兩種方式解決問題：

刪除函數(shù)聲明語句中的參數(shù)(事實證明，你想訪問那些在函數(shù)外部聲明的變量，因此你不需要為函數(shù)使用參數(shù))

var testArray = ["Test"]; 
 
/* 前置條件:在函數(shù)外部定義testArray */ 
function testFunction(/* No params */) { 
   for (var i = 0; i < testArray.length; i++) { 
     console.log(testArray[i]); 
   } 
} 
 
testFunction() 

調(diào)用函數(shù)，將我們聲明的數(shù)組傳遞給它。

var testArray = ["Test"]; 
 
function testFunction(testArray) { 
  for (var i = 0; i < testArray.length; i++) { 
     console.log(testArray[i]); 
   } 
} 
 
testFunction(testArray); 

9. Uncaught TypeError: Cannot set property

當我們嘗試訪問未定義的變量時，它總是返回 undefined，我們無法獲取或設(shè)置任何 undefined 屬性。在這種情況下，應(yīng)用程序?qū)⒁l(fā)“ Uncaught TypeError：Cannot set property”。

例如，在Chrome瀏覽器中：

如果 test 對象不存在，則錯誤將引發(fā)“ Uncaught TypeError：Cannot set property”。

10. ReferenceError: event is not defined

當您嘗試訪問undefined 或超出當前范圍的變量時，將引發(fā)此錯誤。你可以在Chrome瀏覽器中非常輕松地對其進行測試。

如果你在使用事件處理系統(tǒng)時收到這個錯誤，請確保你使用傳入的事件對象作為參數(shù)。IE等較舊的瀏覽器會提供全局變量事件，而Chrome會自動將事件變量附加到處理程序。Firefox不會自動添加它。 jQuery之類的庫試圖規(guī)范這種行為，盡管如此，最好還是使用傳遞給事件處理程序函數(shù)的方法。

document.addEventListener("mousemove", function (event) { 
  console.log(event); 
}) 

總結(jié)

事實證明，其中許多都是null或undefined的錯誤。如果使用嚴格的編譯器選項，像Typescript這樣的靜態(tài)類型檢查系統(tǒng)可以幫助你避免使用它們。它可以警告你，如果一個類型是預(yù)期的，但還沒有被定義。