JavaScript对象基础：怎么创建对象和访问属性

在 JavaScript 中，对象是最核心的数据组织单元，用于将相关的数据和功能整合为键值对（Key-Value Pairs）的复合结构。掌握如何准确创建对象以及灵活访问其内部属性，是编写清晰、稳健前端或后端代码的基本功。本文直接从核心结论切入，系统梳理对象的常用创建方式、属性访问的具体规则与适用场景，并剖析开发中常见的避坑要点。

一、怎么在 JavaScript 中创建对象

JavaScript 提供了几种不同的对象创建方式。在绝大多数日常业务开发中，对象字面量是最推荐且使用频率最高的方式；而在特殊场景下，构造函数与原型继承API也扮演着重要角色。

1. 使用对象字面量（最常用推荐）

字面量语法利用一对花括号 {} 直接声明并初始化对象。其语法直观、简洁，解析效率高。

// 创建一个空对象
const emptyObj = {};

// 创建包含初始属性和方法的对象
const book = {
  title: "JavaScript高级程序设计",
  pages: 800,
  isPublished: true,
  // 简写方法
  summary() {
    return `${this.title} 共 ${this.pages} 页`;
  }
};

2. 使用构造函数或 Object 构造器

可以通过内置的 new Object() 创建对象，也可以通过自定义构造函数或 ES6 类（Class）批量生成具有相同属性结构的实例。

// 方式一：Object 构造器（一般不推荐，较繁琐）
const car = new Object();
car.brand = "Toyota";
car.year = 2022;

// 方式二：ES6 类与构造函数（用于模板化批量创建）
class User {
  constructor(name, role) {
    this.name = name;
    this.role = role;
  }
}
const admin = new User("Bob", "Admin");

3. 使用 Object.create() 指定原型

如果需要明确指定新对象的原型对象（Prototype），可以使用 Object.create(proto)。当传入 null 时，可以得到一个纯净的、不带任何默认原型方法（如 toString）的字典对象。

const baseConfig = { env: "production", timeout: 5000 };
// 以 baseConfig 为原型创建新对象
const appConfig = Object.create(baseConfig);
appConfig.appName = "OrderService";

console.log(appConfig.env); // 输出 "production" (继承自原型)

二、怎么访问对象中的属性

访问已有对象中的属性，JavaScript 提供了两种核心语法：点语法（Dot Notation）和方括号语法（Bracket Notation）。两者功能相同，但在适用条件上有严格区分。

1. 点语法（Dot Notation）

点语法格式为 object.propertyName。它是开发中最常用的取值方式，代码可读性好，且主流编辑器能提供完备的代码补全提示。

const product = {
  name: "机械键盘",
  price: 299,
  stock: 50
};

// 使用点语法读取
console.log(product.name);  // 输出: "机械键盘"
console.log(product.price); // 输出: 299

限制条件：点语法后的属性名必须是合法的 JavaScript 标识符（即必须由字母、数字、下划线或美元符号组成，且不能以数字开头，不能包含连字符或空格），且无法直接接收变量作为动态属性名。

2. 方括号语法（Bracket Notation）

方括号语法格式为 object["propertyName"] 或 object[variable]。方括号内部可以是字符串字面量，也可以是任何能求值为字符串或 Symbol 的 JavaScript 表达式。

const responseData = {
  "content-type": "application/json",
  "status-code": 200,
  101: "Success"
};

// 1. 访问包含特殊字符（如中划线）的属性
console.log(responseData["content-type"]); // 输出: "application/json"

// 2. 访问以纯数字命名的属性
console.log(responseData[101]);            // 输出: "Success"

// 3. 动态变量访问
const targetKey = "status-code";
console.log(responseData[targetKey]);      // 输出: 200

三、属性的新增、修改与安全删除

JavaScript 对象的属性是动态可变的。无论使用哪种方式创建的对象，只要对象未被冻结（未执行 Object.freeze()），均可在运行时进行增删改查。

1. 新增与修改属性

为已有对象添加新属性或更新旧值，直接对目标属性进行赋值即可。如果属性已存在，原值会被覆盖；若不存在，则会自动创建该属性。

const profile = { username: "alex" };

// 修改已存在的属性
profile.username = "alex_pro";

// 新增此前不存在的属性
profile.email = "alex@example.com";
profile["created_at"] = "2026-10-25";

2. 删除属性：delete 操作符

如果需要彻底从对象中移除某个键值对，必须使用 delete 操作符，而不是将其赋值为 null 或 undefined（赋值只会改值，属性键依然存在于对象中）。

const settings = { theme: "dark", autoSave: true };

// 正确删除属性
delete settings.autoSave;

console.log(settings); // 输出: { theme: "dark" }
console.log("autoSave" in settings); // 输出: false

四、进阶访问技巧与避坑指南

在实际工程代码中，不当的属性访问往往是产生运行时错误（如 Uncaught TypeError）的高发区域。以下三个技巧能大幅提升代码的健壮性：

1. 使用可选链（Optional Chaining: ?.）防止空指针崩溃

当对象存在深层嵌套，且中间节点可能为 null 或 undefined 时，直接链式访问会抛出运行时异常。使用 ?. 可以在遇到空值时立即短路并返回 undefined，而不是报错打断程序执行。

const order = {
  id: "OD9821",
  customer: null // 某些情况下客户信息未加载
};

// 危险写法（会导致程序崩溃）
// console.log(order.customer.address); 
// 抛出: TypeError: Cannot read properties of null (reading 'address')

// 安全写法：使用可选链
console.log(order.customer?.address); // 安全输出: undefined

2. 辨析方括号内的“变量”与“字符串”

初学者在使用方括号语法时，最容易忘记给静态字符串加上引号。如果忘记加引号，JavaScript 引擎会将其视为变量名称在当前作用域中进行查找。

const person = { name: "David" };
const name = "nickname";

console.log(person["name"]); // 输出 "David"：读取属性名为 "name" 的值
console.log(person[name]);   // 输出 undefined：先求值变量 name 为 "nickname"，实际寻找 person["nickname"]

3. 安全检查属性是否存在

直接通过 obj.prop !== undefined 判断属性是否存在并不严谨，因为属性的值本身可能恰好就是 undefined。推荐使用以下可靠方案：

• in 操作符：如 "age" in user，会沿着原型链向上检查。
• Object.hasOwn(obj, "prop")：ES2022 新增标准，仅检查对象自身的自有属性，不依赖原型链，安全可靠。

五、总结

回顾本文核心内容：在日常开发中，创建对象优先选择轻量直观的对象字面量 {}；访问固定命名的属性时，优先选择清晰且补全支持完备的点语法 obj.prop。当面对包含特殊字符、数字键或是动态变量命名的属性时，则必须使用方括号语法 obj[key]。此外，结合现代标准的可选链 ?. 和 Object.hasOwn()，能够有效规避空指针异常并准确校验键值，让数据层代码更加健壮可靠。