![如何修復JavaScript中的 "uncaught typeerror: cannot read property" 錯誤](https://static.wbolt.com/wp-content/uploads/2023/11/uncaught-typeerror-cannot-read-property-1024x512-1.png!o "如何修復JavaScript中的 "uncaught typeerror: cannot read property" 錯誤")
錯誤是學習和使用任何程式語言的核心部分。錯誤資訊往往能幫助你理解程式碼中的某個地方出了問題。
有些錯誤資訊簡單明瞭、易於理解，而有些錯誤資訊則可能讓人一頭霧水。
在本教程中，我們將討論最常見的 JavaScript 錯誤之一 – “uncaught typeerror: cannot read property”（未捕獲型別錯誤：無法讀取屬性）錯誤。
在本教程結束時，您應該明白 “uncaught typeerror: cannot read property”（未捕獲的型別錯誤：無法讀取屬性）的含義、常見原因以及修復方法。
JavaScript 中的 “uncaught typeerror: cannot read property “是什麼意思？
未捕獲型別錯誤：無法讀取屬性” 錯誤主要發生在嘗試使用或訪問 undefined 的變數時。在使用普通 JavaScript 或任何 Javascript 框架時，都可能出現這種錯誤。
您可以使用各種開發工具（如 Chrome 瀏覽器開發工具）來攔截錯誤、測試程式碼等，從而在編碼時輕鬆檢測錯誤。
如何修復 JavaScript 中的 “未捕獲型別錯誤：無法讀取屬性” 錯誤
在接下來的章節中，我們將重點介紹導致 “uncaught typeerror: cannot read property” 錯誤的一些原因，以及如何使用程式碼示例來修復它們。
訪問值為未定義的物件屬性
在本節中，我們將討論導致 JavaScript 中出現 “uncaught typeerror: cannot read property”（未捕獲型別錯誤：無法讀取屬性）錯誤的可能原因之一。這與訪問未定義的物件屬性有關。
下面是一個示例：
let person;
在上面的程式碼中，我們建立了一個名為 person 的變數。這樣做的目的是使這個變數成為一個具有 name, age, hobby等屬性的物件。
如果你忘記建立這些屬性，那麼當你試圖訪問它們時就會出錯。也就是說：
let person; console.log(person.name); // Uncaught TypeError: Cannot read properties of undefined (reading 'name')
如上圖所示，我們嘗試訪問 name 屬性，但該屬性並不存在，因此出現了錯誤提示：Uncaught TypeError: Cannot read properties of undefined（reading “name”）。
任何人都可能遇到這種情況，因為你可能會忘記為物件建立/新增屬性。
讓我們繼續為物件新增一些屬性來修復錯誤：
let person = {
name: "John",
age: 200,
hobby: "coding"
}
console.log(person.name);
// John
在上面的程式碼中，我們新增了 name 屬性，因此當你嘗試訪問它時，返回的值是 “John”。
不存在
就像我們在上一節中看到的物件一樣，如果嘗試訪問陣列中尚未初始化的元素，也會出現 “uncaught typeerror: cannot read property”（未捕獲型別錯誤：無法讀取屬性）錯誤。
下面是一個例子：
let arr; console.log(arr[0]); // Uncaught TypeError: Cannot read properties of undefined (reading '0')
在上面的示例中，我們嘗試訪問名為 arr 的陣列的第一個元素。
陣列已經宣告，但尚未初始化 – 這意味著還沒有元素被分配給它。
為了解決這個問題，我們要在訪問陣列之前將元素新增到陣列中。也就是說
let arr = [2,4,6,8] console.log(arr[0]); // 2
訪問不存在的 DOM 元素
在 JavaScript 中使用文件物件模型（DOM）時，您可能會遇到 “uncaught typeerror: cannot read property”（未捕獲型別錯誤：無法讀取屬性）。
出現這種情況的原因有很多，例如在引用 DOM 元素時拼寫錯誤、訪問不存在的元素或在 DOM 載入之前訪問元素（我們將在下一節討論這個問題）。
在本節中，您將看到一個示例，該示例會因訪問不存在的 DOM 元素而丟擲 “uncaught typeerror: cannot read property”（未捕獲型別錯誤：無法讀取屬性）錯誤。
下面是 HTML 程式碼：
<!DOCTYPE html> <html> <head> <title>Error Tutorial</title> </head> <body> <h1 id="content">Hello World!</h1> <script src="app.js"></script> </body> </html>
在上面的程式碼中，我們建立了一個基本的 HTML 文件，其中包含一個 ID 為 “content” 的 h1 元素。
下面是 JavaScript 程式碼：
let content = document.getElementById("constent");
console.log(content.textContent);
// Uncaught TypeError: Cannot read properties of null (reading 'textContent');
上面的程式碼引發了 “uncaught typeerror: cannot read property”（未捕獲型別錯誤：無法讀取屬性）錯誤，儘管我們看起來做得一切正常。
我們很容易就會忽略引發這個錯誤的原因。出現錯誤的原因是我們在引用 h1 元素的 ID 時拼寫的是 “constent” 而不是 “content”。
也就是說，是 document.getElementById("constent"); 而不是 document.getElementById("content"); 。
如果您嘗試引用一個尚未在 DOM 中建立的 ID 或類名，也會出現同樣的錯誤。
要解決這個問題，只需檢查拼寫錯誤或確保所引用的元素確實存在於 DOM 中即可。
將指令碼元素置於 Body 標籤內其他 DOM 元素之上
script 元素的位置決定了 JavaScript 程式碼在瀏覽器中的執行方式。
如果將 script 元素放在 HTML 文件正文中其他元素的上方，JavaScript 程式碼將在 DOM 載入之前執行。
這意味著 JavaScript 在執行前不會等待 DOM 元素載入完畢，因此不會對 DOM 元素有任何引用。
下面是一個示例：
<!DOCTYPE html> <html> <head> <title>Error Tutorial</title> </head> <body> <script src="app.js"></script> <h1 id="content">Hello World!</h1> </body> </html>
在上面的程式碼中，我們將 script 元素放在了 h1 元素的上方。
下面是我們嘗試使用 h1 元素的 ID 引用該元素的 JavaScript 程式碼：
let content = document.getElementById("content");
console.log(content.textContent);
// Uncaught TypeError: Cannot read properties of null (reading 'textContent');
不出所料，”uncaught typeerror: cannot read property”（未捕獲型別錯誤：無法讀取屬性）錯誤向我們拋來，因為在 h1 元素之前的 JavaScript 程式碼可以註冊到 DOM。
要解決這個問題，請務必將 script 元素放在關閉的 body 標記之前，即文件正文中所有其他 DOM 元素的下方。這樣，指令碼就會在 DOM 中的每個元素載入完畢後開始執行。
<!DOCTYPE html> <html> <head> <title>Error Tutorial</title> </head> <body> <h1 id="content">Hello World!</h1> <script src="app.js"></script> </body> </html>
小結
錯誤是開發人員不可避免的一部分。雖然它們可能會讓你在編碼時感到沮喪，但它們也能幫助你學到更多知識，並掌握你正在使用的程式語言。
在遇到錯誤時，您應始終嘗試理解錯誤資訊，因為這將幫助您知道從哪裡入手以及該如何修復。您還可以通過類似的錯誤資訊來修復其他錯誤。
評論留言