在前端开发中，经常会遇到访问对象属性时返回 undefined 的情况。即使该对象明显存在，我们仍然无法获取它的属性值。这可能会导致一系列问题，并且在调试代码时会造成很大的困扰。
1. 对象属性访问的本质
在深入探讨此问题之前，我们需要了解对象属性访问的本质。在 JavaScript 中，对象属性访问实际上是通过查找对象的原型链来完成的。当我们使用点号或方括号语法访问对象属性时，JavaScript 引擎会先查找对象自身是否具有该属性。如果没有找到，则会向上遍历原型链，直到找到一个具有该属性的原型对象或者原型链的顶层对象为止。
2. 为什么会返回 undefined？
那么，为什么即使对象存在，我们仍然无法获取其属性值呢？下面是常见的几种可能性。
2.1 属性名错误或不存在
最常见的一个原因是属性名错误或者该属性不存在。在 JavaScript 中，如果我们尝试访问一个不存在的属性，或者使用错误的属性名称，JavaScript 引擎将返回 undefined。因此，在出现返回 undefined 的情况时，首先应该检查属性名是否正确。
const person = {
name: 'Alice',
age: 25,
};
console.log(person.gender); // undefined，因为 gender 属性不存在2.2 对象未被正确初始化
如果对象未被正确初始化，即使它存在，我们也无法访问它的属性。通常情况下，这种情况发生在尝试访问从后端获取的数据时。由于网络延迟或其他原因，数据可能还没有完全加载，导致对象没有被正确初始化。
let person;
fetch('https://example.com/api/person')
.then(response => response.json())
.then(data => person = data);
console.log(person.name); // undefined，因为 person 还没有被正确初始化2.3 属性值为 undefined
如果属性值本身就是 undefined，我们仍然会得到 undefined 的返回值。这种情况通常出现在手动设置属性值为 undefined 的时候。
const person = {
name: 'Alice',
age: undefined, // 注意这里的值是 undefined
};
console.log(person.age); // undefined3. 如何避免这种问题？
在开发过程中，我们经常会遇到类似的问题。那么，如何避免这种问题呢？以下是一些建议。
3.1 严格模式
使用 JavaScript 的严格模式可以避免很多潜在的问题。严格模式要求变量在使用之前必须先声明，禁止使用未定义的变量等。
'use strict';
const person = {
name: 'Alice',
};
console.log(person.gender); // TypeError: Cannot read property 'gender' of undefined3.2 合理使用默认值
在某些情况下，我们可以使用默认值来避免访问不存在的属性。例如，在获取后端数据时，我们可以为每个属性设置默认值，以确保即使从后端返回的数据缺失某个属性，我们仍然可以安全地访问它。
-- -------------------- ---- ------- ----- ------ - - ----- -------- ---- --- ------- ---------- -- ---- ------- -- --------------------------------------- -------------- -- ---------------- ---------- -- --------------------- ------- --------------------------- -- ---------- - ---------------------------------------------------------- -------- --------------------------------------------------------------------------------
