如何修复JavaScript中的 “uncaught typeerror: cannot read property” 错误

WBOLT_COM 11 月 14, 2023 2.5k+ 0

如何修复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>