JavaScript对象创建与属性访问全攻略

本文深入解析了JavaScript中对象创建与属性访问的核心实践，从最常用安全的字面量语法{}，到精确控制属性行为的Object.defineProperty，再到点号与方括号访问的关键区别及常见陷阱，最后聚焦深层嵌套访问的健壮方案——可选链（?.）与空值合并（??），强调每种技术并非风格选择，而是关乎代码是否在运行时悄然崩溃的硬性分界线，为开发者提供清晰、可靠、现代的实战指南。

对象字面量是最常用也最安全的创建方式

直接用 {} 创建对象，适合结构明确、属性固定且数量不多的场景。浏览器和 Node.js 都完全支持，无兼容性问题。

常见错误是误把逗号写在最后一项后面（尤其在旧版 IE 中会报错），虽然现代引擎大多容忍，但建议保持严谨：

const user = {
  name: 'Alice',
  age: 30,
  isActive: true
};

• name、age、isActive 是属性名，冒号后是对应值
• 属性名含空格或特殊字符时，必须用引号包裹：{"full name": "Alice"}
• 属性值可以是任意类型，包括函数（此时叫方法）、其他对象、数组甚至 undefined

用 Object.defineProperty 精确控制属性行为

当需要定义不可枚举、不可修改或带 getter/setter 的属性时，Object.defineProperty 是唯一可靠选择。它不适用于批量初始化，而是用于增强已有对象的特定字段。

典型误用是试图用它“批量添加多个属性”——每次只能定义一个，循环调用效率低且易出错。

const obj = {};
Object.defineProperty(obj, 'count', {
  value: 0,
  writable: false,     // 不能被重新赋值
  enumerable: false,   // for...in 不会遍历到
  configurable: false  // 不能再用 defineProperty 修改该属性
});

• writable: false 和 configurable: false 一旦设为 false，就无法再改回 true
• 若想实现计算属性，优先用 get/set 函数，而不是在 value 中放函数
• 大量使用会影响 V8 引擎的优化，仅在必要时采用

访问属性：点号 vs 方括号，选错会静默失败

obj.prop 和 obj["prop"] 表面等价，但行为差异很大。点号要求属性名是合法标识符且已知；方括号支持动态键名、保留字、空格等，但性能略低。

常见陷阱是把变量当字面量用：obj.keyName 总是读 keyName 这个字面属性，不是变量 keyName 的值。

const keyName = 'age';
console.log(user.keyName);    // undefined（不是 30）
console.log(user[keyName]);   // 30（正确）

• 属性名含短横线（如 user-data）、数字开头（如 1stPlace）或为保留字（如 class）时，只能用方括号
• obj?.prop（可选链）能避免 Cannot read property 'x' of undefined 错误，但只适用于点号访问
• 方括号内表达式会被执行，obj[foo()] 会先调用 foo()

嵌套对象访问容易引发 TypeError，提前防护比事后捕获更高效

像 user.profile.address.city 这种多层访问，任何中间环节为 null 或 undefined 就会抛错。靠 try/catch 太重，也不利于调试。

现代写法首选可选链 + 空值合并：user?.profile?.address?.city ?? 'Unknown'。如果环境不支持（如 IE 或旧版 Node），需手动检查或用工具函数。

• 不要写 if (user && user.profile && user.profile.address) —— 冗长且易漏层级
• Lodash 的 get(user, 'profile.address.city', 'Unknown') 是兼容方案，但引入依赖要权衡
• 解构赋值时加默认值也能缓解：const { city = 'Unknown' } = user?.profile?.address || {};

属性组织没有银弹。小对象用字面量，需约束用 defineProperty，动态访问用方括号，深层嵌套必加可选链——这些不是风格偏好，而是运行时是否崩掉的分界线。

本篇关于《JavaScript对象创建与属性访问全攻略》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！