10種最常見(jiàn)的Javascript錯(cuò)誤

2018-5-17    周周

以下是 JavaScript 錯(cuò)誤 Top 10:

  3a8ccf12-f663-38d7-bca8-6178415d9875.png

       為了便于閱讀,我們將每個(gè)錯(cuò)誤描述都縮短了。接下來(lái),讓我們深入到每一個(gè)錯(cuò)誤,來(lái)確定什么會(huì)導(dǎo)致它,以及如何避免創(chuàng)建它。 
1. Uncaught TypeError: Cannot read property 
        如果你是一個(gè) JavaScript 開(kāi)發(fā)人員,可能你看到這個(gè)錯(cuò)誤的次數(shù)比你敢承認(rèn)的要多(LOL…)。當(dāng)你讀取一個(gè)未定義的對(duì)象的屬性或調(diào)用其方法時(shí),這個(gè)錯(cuò)誤會(huì)在 Chrome 中出現(xiàn)。 您可以很容易的在 Chrome 開(kāi)發(fā)者控制臺(tái)中進(jìn)行測(cè)試(嘗試)。

       發(fā)生這種情況的原因很多,但常見(jiàn)的一種是在渲染 UI 組件時(shí)對(duì)于狀態(tài)的初始化操作不當(dāng)。
        我們來(lái)看一個(gè)在真實(shí)應(yīng)用程序中發(fā)生的例子:我們選擇 React,但該情況也同樣適用于 Angular、Vue 或任何其他框架。

Javascript代碼  

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>
    );
  }
}
這里有兩件重要的事情要實(shí)現(xiàn):

  • 組件的狀態(tài)(例如 this.state)從 undefined 開(kāi)始。
  • 當(dāng)異步獲取數(shù)據(jù)時(shí),不管它是在構(gòu)造函數(shù)componentWillMount還是componentDidMount中獲取的,組件在數(shù)據(jù)加載之前至少會(huì)呈現(xiàn)一次,當(dāng) Quiz 第一次呈現(xiàn)時(shí),this.state.items 是未定義的。 這又意味著 ItemList 將 items 定義為 undefined,并且在控制臺(tái)中出現(xiàn)錯(cuò)誤 - “Uncaught TypeError: Cannot read property ‘map’ of undefined”。

       這很容易解決。最簡(jiǎn)單的方法:在構(gòu)造函數(shù)中用合理的默認(rèn)值來(lái)初始化 state。

Javascript代碼


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

       在你的應(yīng)用程序中的具體代碼可能是不同的,但我們希望我們已經(jīng)給你足夠的線(xiàn)索,以解決或避免在你的應(yīng)用程序中出現(xiàn)的這個(gè)問(wèn)題。如果還沒(méi)有,請(qǐng)繼續(xù)閱讀,因?yàn)槲覀儗⒃谙旅娓采w更多相關(guān)錯(cuò)誤的示例。
        2. TypeError: ‘undefined’ is not an object
        這是在 Safari 中讀取屬性或調(diào)用未定義對(duì)象上的方法時(shí)發(fā)生的錯(cuò)誤。您可以在 Safari Developer Console 中輕松測(cè) 試。這與 1 中提到的 Chrome 的錯(cuò)誤基本相同,但 Safari 使用了不同的錯(cuò)誤消息提示語(yǔ)。

      3.TypeError: null is not an object
        這是在 Safari 中讀取屬性或調(diào)用空對(duì)象上的方法時(shí)發(fā)生的錯(cuò)誤。 您可以在 Safari Developer Console 中輕松測(cè)試。

有趣的是,在 JavaScript 中,null 和 undefined 是不一樣的,這就是為什么我們看到兩個(gè)不同的錯(cuò)誤信息。undefined 通常是一個(gè)尚未分配的變量,而 null 表示該值為空。 要驗(yàn)證它們不相等,請(qǐng)嘗試使用嚴(yán)格的相等運(yùn)算符 ===:  

       在現(xiàn)實(shí)世界的例子中,這種錯(cuò)誤可能發(fā)生的一種場(chǎng)景是:如果在加載元素之前嘗試在 JavaScript 中使用元素。 因?yàn)?DOM API 對(duì)于空白的對(duì)象引用返回值為 null。
        任何執(zhí)行和處理 DOM 元素的 JS 代碼都應(yīng)該在創(chuàng)建 DOM 元素之后執(zhí)行。 JS 代碼按照 HTML 中的規(guī)定從上到下進(jìn)行解釋。 所以,如果 DOM 元素之前有一個(gè)標(biāo)簽,腳本標(biāo)簽內(nèi)的 JS 代碼將在瀏覽器解析 HTML 頁(yè)面時(shí)執(zhí)行。 如果在加載腳本之前尚未創(chuàng)建 DOM 元素,則會(huì)出現(xiàn)此錯(cuò)誤。
        在這個(gè)例子中,我們可以通過(guò)添加一個(gè)事件監(jiān)聽(tīng)器來(lái)解決這個(gè)問(wèn)題,這個(gè)監(jiān)聽(tīng)器會(huì)在頁(yè)面準(zhǔn)備好的時(shí)候通知我們。 一旦 addEventListener被觸發(fā),init() 方法就可以使用 DOM 元素。

Html代碼

<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ò)誤(通過(guò)window.onerror處理程序引發(fā)的錯(cuò)誤,而不是捕獲在try-catch中)被瀏覽器的跨域策略限制時(shí),會(huì)產(chǎn)生這類(lèi)的腳本錯(cuò)誤。 例如,如果您將您的 JavaScript 代碼托管在 CDN 上,則任何未被捕獲的錯(cuò)誤將被報(bào)告為“腳本錯(cuò)誤” 而不是包含有用的堆棧信息。這是一種瀏覽器安全措施,旨在防止跨域傳遞數(shù)據(jù),否則將不允許進(jìn)行通信。 
        要獲得真正的錯(cuò)誤消息,請(qǐng)執(zhí)行以下操作: 
        1. 發(fā)送 ‘Access-Control-Allow-Origin’ 頭部 
        將 Access-Control-Allow-Origin 標(biāo)頭設(shè)置為 * 表示可以從任何域正確訪(fǎng)問(wèn)資源。 如有必要,您可以將域替換為您的域:例如,Access-Control-Allow-Origin:www.example.com。 但是,處理多個(gè)域會(huì)變得棘手,如果你使用 CDN,可能由此產(chǎn)生更多的緩存問(wèn)題會(huì)讓你感覺(jué)到這種努力并不值得。 在這里看到更多。 
         這里有一些關(guān)于如何在各種環(huán)境中設(shè)置這個(gè)頭文件的例子: 
         在 JavaScript 文件所在的文件夾中,使用以下內(nèi)容創(chuàng)建一個(gè) .htaccess 文件:
代碼

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

       將 add_header 指令添加到提供 JavaScript 文件的位置塊中:
代碼

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

        將以下內(nèi)容添加到您為 JavaScript 文件提供資源服務(wù)的后端: 

代碼 

        rspadd Access-Control-Allow-Origin:\ *  

        在 <script> 中設(shè)置 crossorigin="anonymous"

在您的 HTML 代碼中,對(duì)于您設(shè)置了Access-Control-Allow-Origin header 的每個(gè)腳本,在 script 標(biāo)簽上設(shè)置crossorigin =“anonymous”。在腳本標(biāo)記中添加 crossorigin 屬性之前,請(qǐng)確保驗(yàn)證上述 header 正確發(fā)送。 在Firefox 中,如果存在crossorigin屬性,但Access-Control-Allow-Origin頭不存在,則腳本將不會(huì)執(zhí)行。 

5. TypeError: Object doesn’t support property

       這是您在調(diào)用未定義的方法時(shí)發(fā)生在 IE 中的錯(cuò)誤。 您可以在 IE 開(kāi)發(fā)者控制臺(tái)中進(jìn)行測(cè)試。

fcb1e309-0293-3836-a8e5-e6e361a28add.png

       這相當(dāng)于 Chrome 中的 “TypeError:”undefined“ is not a function” 錯(cuò)誤。 是的,對(duì)于相同的邏輯錯(cuò)誤,不同的瀏覽器可能具有不同的錯(cuò)誤消息。 
        對(duì)于使用 JavaScript 命名空間的 Web 應(yīng)用程序,這是一個(gè) IE l瀏覽器的常見(jiàn)的問(wèn)題。 在這種情況下,99.9% 的原因是 IE 無(wú)法將當(dāng)前名稱(chēng)空間內(nèi)的方法綁定到 this 關(guān)鍵字。 例如:如果你 JS 中有一個(gè)命名空間 Rollbar 以及方法 isAwesome 。 通常,如果您在 Rollbar 命名空間內(nèi),則可以使用以下語(yǔ)法調(diào)用isAwesome方法:
Javascript代碼 

this.isAwesome();  

        Chrome,F(xiàn)irefox 和 Opera 會(huì)欣然接受這個(gè)語(yǔ)法。 另一方面 IE,不會(huì)。 因此,使用 JS 命名空間時(shí)最安全的選擇是始終以實(shí)際名稱(chēng)空間作為前綴。

6. TypeError: ‘undefined’ is not a function
        當(dāng)您調(diào)用未定義的函數(shù)時(shí),這是 Chrome 中產(chǎn)生的錯(cuò)誤。 您可以在 Chrome 開(kāi)發(fā)人員控制臺(tái)和 Mozilla Firefox 開(kāi)發(fā)人員控制臺(tái)中進(jìn)行測(cè)試。 63e43ce7-2048-3c44-9d80-3e8a27b71a56.png

       隨著 JavaScript 編碼技術(shù)和設(shè)計(jì)模式在過(guò)去幾年中變得越來(lái)越復(fù)雜,回調(diào)和關(guān)閉中的自引用范圍也相應(yīng)增加,這是這種/那種混淆的相當(dāng)常見(jiàn)的來(lái)源。
       考慮這個(gè)代碼片段:
Javascript代碼

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”。 你得到上述錯(cuò)誤的原因是,當(dāng)你調(diào)用setTimeout()時(shí),實(shí)際上是調(diào)用window.setTimeout()。 因此,在窗口對(duì)象的上下文中定義了一個(gè)傳遞給setTimeout()的匿名函數(shù),該函數(shù)沒(méi)有clearBoard()方法。
一個(gè)傳統(tǒng)的,舊瀏覽器兼容的解決方案是簡(jiǎn)單地將您的 this 保存在一個(gè)變量,然后可以由閉包繼承。 例如:
Javascript代碼 

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

};

或者,在較新的瀏覽器中,可以使用bind()方法傳遞適當(dāng)?shù)囊茫?
Javascript代碼

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 在一些情況下會(huì)發(fā)生的錯(cuò)誤。 一個(gè)是當(dāng)你調(diào)用一個(gè)不終止的遞歸函數(shù)。您可以在 Chrome 開(kāi)發(fā)者控制臺(tái)中進(jìn)行測(cè)試。

                     5cadac78-96ee-3a2f-ad3f-493cceae8e0a.png

      此外,如果您將值傳遞給超出范圍的函數(shù),也可能會(huì)發(fā)生這種情況。 許多函數(shù)只接受其輸入值的特定范圍的數(shù)字。 例如:Number.toExponential(digits) 和 Number.toFixed(digits) 接受 0 到 20 的數(shù)字,Number.toPrecision(digits) 接受 1 到 21 的數(shù)字。
Javascript代碼

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)度屬性。 您可以在 Chrome 開(kāi)發(fā)者控制臺(tái)中進(jìn)行測(cè)試。
      您通常會(huì)在數(shù)組中找到定義的長(zhǎng)度,但是如果數(shù)組未初始化或者變量名稱(chēng)在另一個(gè)上下文中隱藏,則可能會(huì)遇到此錯(cuò)誤。讓我們用下面的例子來(lái)理解這個(gè)錯(cuò)誤。
Javascript代碼

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ù)變成了函數(shù)作用域內(nèi)的本地參數(shù)。這意味著即使你函數(shù)外有名為 testArray 的變量,在一個(gè)函數(shù)中具有相同名字的參數(shù)也會(huì)被視為本地參數(shù)。

        您有兩種方法可以解決您的問(wèn)題:
        1. 刪除函數(shù)聲明語(yǔ)句中的參數(shù)(事實(shí)上你想訪(fǎng)問(wèn)那些聲明在函數(shù)之外的變量,所以你不需要函數(shù)的參數(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. 用聲明的數(shù)組調(diào)用該函數(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)我們嘗試訪(fǎng)問(wèn)一個(gè)未定義的變量時(shí),它總是返回 undefined,我們不能獲取或設(shè)置任何未定義的屬性。 在這種情況下,應(yīng)用程序?qū)伋?“Uncaught TypeError: Cannot set property”。 
       如果測(cè)試對(duì)象不存在,錯(cuò)誤將會(huì)拋出 “Uncaught TypeErrorUncaught TypeError: Cannot set property”。

10. ReferenceError: event is not defined 
當(dāng)您嘗試訪(fǎng)問(wèn)未定義的變量或超出當(dāng)前范圍的變量時(shí),會(huì)引發(fā)此錯(cuò)誤。
       如果在使用事件處理系統(tǒng)時(shí)遇到此錯(cuò)誤,請(qǐng)確保使用傳入的事件對(duì)象作為參數(shù)。像 IE 這樣的舊瀏覽器提供了一個(gè)全局變量事件,但并不是所有瀏覽器都支持。像 jQuery 這樣的庫(kù)試圖規(guī)范化這種行為。盡管如此,最好使用傳入事件處理函數(shù)的函數(shù)。
function myFunction(event) {
    event = event.which || event.keyCode;
    if(event.keyCode===13){
       alert(event.keyCode);
    }
}

結(jié)論 
        我們希望你學(xué)到了新的東西,可以避免將來(lái)的錯(cuò)誤,或者本指南幫助你解決了頭痛的問(wèn)題。 
        盡管如此,即使有最佳實(shí)踐,生產(chǎn)中也會(huì)出現(xiàn)意想不到的錯(cuò)誤。能夠查看影響用戶(hù)的錯(cuò)誤,并擁有快速解決問(wèn)題的好工具,這一點(diǎn)非常重要。

分享本文至:

日歷

鏈接

個(gè)人資料

存檔