JavaScript錯(cuò)誤怎么避免

這篇文章主要介紹“JavaScript錯(cuò)誤怎么避免”，在日常操作中，相信很多人在JavaScript錯(cuò)誤怎么避免問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”JavaScript錯(cuò)誤怎么避免”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

對(duì)于這些錯(cuò)誤發(fā)生的次數(shù)，我們是通過(guò)收集的數(shù)據(jù)統(tǒng)計(jì)得出的。Rollbar 會(huì)收集每個(gè)項(xiàng)目中的所有錯(cuò)誤，并總結(jié)每個(gè)錯(cuò)誤發(fā)生的次數(shù)，然后通過(guò)各個(gè)錯(cuò)誤的特征進(jìn)行分組。

下圖是發(fā)生次數(shù)最多的10大 JavaScript 錯(cuò)誤： 

下面開(kāi)始深入探討每個(gè)錯(cuò)誤發(fā)生的情況，以便確定導(dǎo)致錯(cuò)誤發(fā)生的原因以及如何避免。

1.   Uncaught TypeError: Cannot Read Property

這是 JavaScript 開(kāi)發(fā)人員最常遇到的錯(cuò)誤。當(dāng)你讀取一個(gè)屬性或調(diào)用一個(gè)未定義對(duì)象的方法時(shí)，Chrome 中就會(huì)報(bào)出這樣的錯(cuò)誤。

導(dǎo)致這個(gè)錯(cuò)誤發(fā)生的原因有很多，常見(jiàn)的一種情況是在渲染 UI 組件時(shí)，不正確地初始化狀態(tài)。我們來(lái)看一個(gè)真實(shí)的應(yīng)用程序中發(fā)生這種情況的例子。

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})}
      </ul>
    );
  }
}

以上代碼有兩個(gè)重要方面：

1. 一是組件的狀態(tài)（例如 this.state），在開(kāi)始生命周期之前是 undefined 狀態(tài)。

2. 二是當(dāng)通過(guò)異步的方式獲取數(shù)據(jù)時(shí)，無(wú)論是在構(gòu)造函數(shù)中 componentWillMount 中，還是在構(gòu)造函數(shù)中提取 componentDidMount，組件在數(shù)據(jù)加載之前至少會(huì)渲染一次。當(dāng)檢測(cè)首次渲染時(shí)，會(huì)發(fā)現(xiàn) this.state.items 是未定義的。此時(shí)就會(huì)出現(xiàn)一個(gè)錯(cuò)誤 -“Uncaught TypeError: Cannot read property ‘map’ of undefined" in the consol”。

解決的方法很簡(jiǎn)單：在構(gòu)造函數(shù)中使用合理的默認(rèn)值進(jìn)行狀態(tài)初始化。

class Quiz extends Component {
  // Added this:
  constructor(props) {
    super(props);
    // Assign state itself, and a default value for items
    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})}
      </ul>
    );
  }
}

2. TypeError: ‘undefined’ Is Not an Object (evaluating...)

這是在 Safari 中讀取屬性或調(diào)用未定義對(duì)象上的方法時(shí)發(fā)生的錯(cuò)誤，這與 Chrome 的上述錯(cuò)誤基本相同，只是 Safari 使用不同的錯(cuò)誤消息。

3. TypeError: Null Is Not an Object (evaluating...)

這是在 Safari 中讀取屬性或調(diào)用空對(duì)象上的方法時(shí)發(fā)生的錯(cuò)誤。

有趣的是，在 JavaScript 中，null 和 undefined 是兩種不同的類(lèi)型，這就是為什么會(huì)出現(xiàn)兩個(gè)不同的錯(cuò)誤消息。未定義通常是一個(gè)尚未分配的變量，而 null 則表示該值為空。要驗(yàn)證它們不相等，請(qǐng)使用嚴(yán)格的相等運(yùn)算符：

在實(shí)際情況中，導(dǎo)致這種錯(cuò)誤的原因之一是：在元素加載之前，就嘗試在 JavaScript 中使用 DOM 元素。這是因?yàn)?DOM API 對(duì)于空白的對(duì)象引用返回 null。

任何執(zhí)行和處理 DOM 元素的 JS 代碼，都應(yīng)該在創(chuàng)建 DOM 元素之后執(zhí)行。JS 代碼按照 HTML 中的規(guī)定自上而下進(jìn)行解釋。因此，如果在 DOM 元素之前存在標(biāo)簽，則腳本標(biāo)簽內(nèi)的 JS 代碼就會(huì)在瀏覽器分析 HTML 頁(yè)面時(shí)執(zhí)行。如果在加載腳本之前尚未創(chuàng)建 DOM 元素，就會(huì)出現(xiàn)這樣的錯(cuò)誤。

在這個(gè)例子中，我們可以通過(guò)添加一個(gè)事件偵聽(tīng)器來(lái)解決這個(gè)問(wèn)題，事件偵聽(tīng)器會(huì)在頁(yè)面準(zhǔn)備就緒時(shí)通知我們。一旦 addEventListener 被觸發(fā)，該 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

當(dāng)未捕獲的 JavaScript 錯(cuò)誤違背跨邊界原則時(shí)，就會(huì)發(fā)生腳本錯(cuò)誤。例如，如果將 JavaScript 代碼托管在 CDN 上，則任何未被捕獲的錯(cuò)誤（通過(guò) window.onerror 處理程序發(fā)出的錯(cuò)誤，而不是 try-catch 中捕獲到的錯(cuò)誤）將僅報(bào)告為“腳本錯(cuò)誤”。這是瀏覽器的一種安全措施，主要用于防止跨域傳遞數(shù)據(jù)的情況出現(xiàn)。

要獲取真實(shí)的錯(cuò)誤消息，需要執(zhí)行以下操作：

1.    Access-Control-Allow-Origin

將 Access-Control-Allow-Origin 設(shè)置為 *， 表示可以從任何域正確訪問(wèn)資源。* 如有必要，也可以用自己的域名進(jìn)行替換，例如：

Access-Control-Allow-Origin: www.example.com。

以下是在各種環(huán)境中設(shè)置的一些示例：

Apache

在 JavaScript 文件夾中，創(chuàng)建一個(gè) .htaccess 文件，并包含以下內(nèi)容：

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

Nginx

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

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

HAProxy

將以下內(nèi)容添加到提供 JavaScript 文件的靜態(tài)資源配置后端：

rspadd Access-Control-Allow-Origin:\ *

2.    在腳本標(biāo)簽上設(shè)置crossorigin =“anonymous”

在你的 HTML 源代碼中，為每一個(gè)腳本設(shè)置 Access-Control-Allow-Origin，在設(shè)置 SCRIPT 標(biāo)簽中，設(shè)置 crossorigin="anonymous"。在將 crossorigin 屬性添加到腳本標(biāo)簽之前，請(qǐng)確保正在向腳本文件發(fā)送 header。在 Firefox 中，如果 crossorigin 屬性存在但 Access-Control-Allow-Origin 標(biāo)題不存在，則腳本不會(huì)執(zhí)行。

5. TypeError: Object Doesn’t Support Property

當(dāng)調(diào)用未定義的方法時(shí)，IE 中會(huì)發(fā)生這樣的錯(cuò)誤。

這相當(dāng)于 Chrome 中的 “undefined’ is not a function” 錯(cuò)誤。對(duì)于相同的邏輯錯(cuò)誤，不同的瀏覽器可能會(huì)有不同的錯(cuò)誤消息。

這是在 IE 的 Web 應(yīng)用程序中使用 JavaScript 命名空間出現(xiàn)的一個(gè)常見(jiàn)問(wèn)題。出現(xiàn)這種情況的絕大部分原因是IE無(wú)法將當(dāng)前名稱空間內(nèi)的方法綁定到this關(guān)鍵字。例如，如果你有 JS Rollbar 方法的命名空間 isAwesome。通常，如果位于 Rollbar 命名空間內(nèi)，則可以使用以下語(yǔ)法調(diào)用該 isAwesome 方法：

this.isAwesome();

Chrome、Firefox 和 Opera 接受這種語(yǔ)法，IE則不接受。因此，使用 JS 命名空間時(shí)最安全的做法是：始終以實(shí)際名稱空間作為前綴。

Rollbar.isAwesome();

6. TypeError: ‘undefined’ Is Not a Function

當(dāng)調(diào)用未定義的函數(shù)時(shí)，Chrome 中就會(huì)發(fā)生這樣的錯(cuò)誤。

隨著 JavaScript 編碼技術(shù)和設(shè)計(jì)模式在過(guò)去幾年中變得越來(lái)越復(fù)雜，回調(diào)和閉包中的自引用范圍也相應(yīng)增加，這是造成這種混亂現(xiàn)象的主要來(lái)源。

正如下面的示例代碼片段：

function testFunction() {
  this.clearLocalStorage();
  this.timer = setTimeout(function() {
    this.clearBoard();    // what is "this"?
  }, 0);
};

執(zhí)行上面的代碼會(huì)導(dǎo)致以下錯(cuò)誤：“Uncaught TypeError: undefined is not a function?！?nbsp;發(fā)生以上錯(cuò)誤的原因是，當(dāng)你調(diào)用 setTimeout(  )  時(shí)，實(shí)際上是在調(diào)用 window.setTimeout(  )，傳遞給 setTimeout(  ) 的匿名函數(shù)是在窗口對(duì)象的上下文中定義的，而該窗口對(duì)象沒(méi)有 clearBoard(  ) 方法。

符合舊版瀏覽器的解決方案是以變量的方式簡(jiǎn)單地將引用保存在 this 中，然后通過(guò)閉包繼承。例如：

function testFunction () {
  this.clearLocalStorage();
  var self = this;   // save reference to 'this', while it's still this!
  this.timer = setTimeout(function(){
    self.clearBoard();  
  }, 0);
};

或者，在較新的瀏覽器中，使用 bind(  ) 方法傳遞引用：

function testFunction () {
  this.clearLocalStorage();
  this.timer = setTimeout(this.reset.bind(this), 0);  // bind to 'this'
};
function testFunction(){
    this.clearBoard();    //back in the context of the right 'this'!
};

7. Uncaught RangeError: Maximum Call Stack

這是在很多種情況，Chrome 中發(fā)生的錯(cuò)誤，一種情況是當(dāng)你調(diào)用一個(gè)不會(huì)終止的遞歸函數(shù)時(shí)。

如果將值傳遞給超出范圍的函數(shù)，也可能會(huì)發(fā)生這種情況。許多函數(shù)只接受特定范圍內(nèi)的數(shù)字輸入值。例如，Number.toExponential( digits ) 與 Number.toFixed( digits) 接受的參數(shù)范圍為從0到20，而 Number.toPrecision( digits ) 接受的數(shù)字范圍為從1至21。

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ā)生的錯(cuò)誤，因?yàn)樽x取了未定義長(zhǎng)度屬性的變量。

通常在數(shù)組中能夠找到定義的長(zhǎng)度，但是如果數(shù)組未初始化或變量名在另一個(gè)上下文中隱藏，則可能會(huì)出現(xiàn)這種錯(cuò)誤。讓我們用下面的例子來(lái)解釋這種錯(cuò)誤。

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

當(dāng)用參數(shù)聲明一個(gè)函數(shù)時(shí)，這些參數(shù)會(huì)成為本地參數(shù)。這意味著即使你有名稱變量 testArray，函數(shù)中具有相同名稱的參數(shù)仍會(huì)被視為本地參數(shù)。

有兩種方法可以解決這個(gè)問(wèn)題：

1. 刪除函數(shù)聲明語(yǔ)句中的參數(shù)：

var testArray = ["Test"];
/* Precondition: defined testArray outside of a function */
function testFunction(/* No params */) {
        for (var i = 0; i < testArray.length; i++) {
              console.log(testArray[i]);
        }
}
testFunction();

2. 調(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

當(dāng)嘗試訪問(wèn)未定義的變量時(shí)，總會(huì)返回 undefined。我們也無(wú)法獲取或設(shè)置 undefined 的任何屬性。在這種情況下，應(yīng)用程序?qū)伋觥癠ncaught TypeError cannot set property of undefined”。

例如，在 Chrome 瀏覽器中，如果 test 對(duì)象不存在，就會(huì)出現(xiàn)這種錯(cuò)誤：

所以就需要在訪問(wèn)變量之前，對(duì)變量進(jìn)行定義。

10. ReferenceError: Event Is Not Defined

嘗試訪問(wèn)未定義的變量或當(dāng)前范圍之外的變量時(shí)會(huì)引發(fā)此錯(cuò)誤。

如果在使用事件處理系統(tǒng)時(shí)遇到此錯(cuò)誤，請(qǐng)確保使用傳入的事件對(duì)象作為參數(shù)。IE 這樣的瀏覽器提供了全局變量事件，Chrome 會(huì)自動(dòng)將事件變量附加到處理程序中，F(xiàn)irefox 則不會(huì)自動(dòng)添加事件變量。

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

JavaScript 開(kāi)發(fā)工具推薦

SpreadJS 純前端表格控件是基于 HTML5 的 JavaScript 電子表格和網(wǎng)格功能控件，提供了完備的公式引擎、排序、過(guò)濾、輸入控件、數(shù)據(jù)可視化、Excel 導(dǎo)入/導(dǎo)出等功能，適用于 .NET、Java 和移動(dòng)端等各平臺(tái)在線編輯類(lèi) Excel 功能的表格程序開(kāi)發(fā)。

到此，關(guān)于“JavaScript錯(cuò)誤怎么避免”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！