在 ECMAScript 2017 中常见的 “Uncaught TypeError: Cannot read property ‘xxx’ of undefined” 错误及解决方式

在 ECMAScript 2017 中常见的 “Uncaught TypeError: Cannot read property ‘xxx’ of undefined” 错误及解决方式

前言

在进行 JavaScript 开发的过程中，很常见的一个错误类型就是 TypeError，其中最常见的便是 “Uncaught TypeError: Cannot read property ‘xxx’ of undefined” 错误。

这种错误的原因在于我们试图使用 undefined 对象的属性或方法，而且该属性或方法并不存在。接下来，我们将详细探究这种错误及其解决方式。

问题分析

在 JavaScript 中，null 和 undefined 都表示“无”，但它们有着不同的含义。

undefined 表示的是变量/对象未被赋值，或者访问了对象中不存在的属性。

null 表示的是“值为空”。

当我们试图使用 undefined 对象的属性或方法，就会出现这种错误。代码如下：

var obj; 
console.log(obj.prop);    // Uncaught TypeError: Cannot read property 'prop' of undefined

如上代码所示，由于 obj 是未被赋值的变量，因此无法读取其 prop 属性。

另一方面，如果我们想要访问对象中不存在的属性，也会出现这种错误。

var obj = {a: 1}; 
console.log(obj.b.prop);    // Uncaught TypeError: Cannot read property 'prop' of undefined

如上代码所示，由于对象中不存在 b 属性，因此无法读取 b 对象的 prop 属性。

解决方式

当我们遇到这种错误时，需要确保访问的变量/对象已被正确地赋值，或对象中存在该属性。

我们可以使用 if 语句对变量/对象进行判断，来避免出现该错误。

var obj; 
if (obj && obj.prop) { 
  console.log(obj.prop); 
}

如上代码所示，我们首先通过 obj 变量进行了判断，确保 obj 变量存在，接着才在 obj 中访问其 prop 属性。

总结

在开发过程中，我们需要时刻注意变量/对象的值是否存在，特别是在使用其属性或方法时。当出现 “Uncaught TypeError: Cannot read property ‘xxx’ of undefined” 错误时，应确保访问的变量/对象已被正确地赋值，或对象中存在该属性。这样才能有效地避免该错误的发生。

示例代码

-- -------------------- ---- -------
-------- ----------------- -
  -- ----- -- ------------- -
    ------ -------------
  -
  ------ -----
-

--- ---- - -----
-------------------------------    -- ----

---- - --------- ------ ------ ---- -----
-------------------------------    -- ------ ------ ---- ---

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/652c9e5f7d4982a6ebe44849