JavaScript-Objects-and-Prototypes-Part1

JavaScript 对象属性描述符 Object方法

字数统计: 3.6k阅读时长: 15 min

 2026/07/30 

第50课：对象与原型（上）——对象字面量、属性描述符与 `Object` 静态方法

在 JavaScript 中，对象（Object） 是核心的复合数据类型。几乎所有非原始值（包括函数、数组、正则表达式）都是对象。理解对象如何创建、如何组织属性、以及属性本身的元信息如何控制对象行为，是深入 JavaScript 语言的关键一步。本节课将聚焦于对象字面量的增强语法、属性描述符（Property Descriptor）的精确控制、以及 Object 构造函数上最重要的静态方法。原型链将在第 51 课详述。

1. 对象字面量：创建对象的最简方式

对象字面量 {} 是 JavaScript 中创建对象最直观、最常用的语法。ES6 之后，对象字面量得到了多项增强，使代码更简洁、表达能力更强。

1.1 属性值简写

当属性名与变量名相同时，可以省略冒号和值，直接写变量名。

const name = 'Alice';
const age = 25;

// ES5 写法
const userES5 = { name: name, age: age };

// ES6 属性值简写
const user = { name, age };

console.log(user); // { name: 'Alice', age: 25 }

1.2 方法简写

省略 : function，直接写方法名和函数体。这样定义的方法与普通函数方法有细微的 this 行为差异（但在此处不展开）。

// ES5 写法
const objES5 = {
  greet: function() { return 'Hello'; }
};

// ES6 方法简写
const obj = {
  greet() { return 'Hello'; }
};

console.log(obj.greet()); // 'Hello'

注意：方法简写定义的函数不能用作构造函数（不能 new），而 function 定义的方法可以。这是两者在行为上的关键差异。

1.3 计算属性名

使用方括号 [] 包裹一个表达式，将该表达式的计算结果作为属性名。这使得动态生成属性名变得极其简单。

const key = 'favoriteColor';
const index = 0;

const obj = {
  [key]: 'blue',
  ['user_' + (index + 1)]: 'Alice',
  [Symbol('id')]: 12345
};

console.log(obj.favoriteColor);   // 'blue'
console.log(obj.user_1);          // 'Alice'

计算属性名内的表达式在对象创建时求值，任何能产生字符串或 Symbol 值的表达式均可使用。

1.4 展开运算符 `...`（对象展开）

ES2018 引入了对象的展开运算符，可以将一个对象的自有可枚举属性浅拷贝到另一个对象中。

const defaults = { theme: 'light', fontSize: 14 };
const userSettings = { fontSize: 18, showLineNumbers: true };

// 合并对象：后者覆盖前者同名属性
const merged = { ...defaults, ...userSettings };
console.log(merged);
// { theme: 'light', fontSize: 18, showLineNumbers: true }

// 创建对象的浅拷贝
const clone = { ...merged };

浅拷贝意味着：如果属性值是对象或数组，展开运算符只复制引用，新旧对象将共享嵌套的可变值。

const original = { nested: { value: 1 } };
const copy = { ...original };
copy.nested.value = 2;
console.log(original.nested.value); // 2 —— 嵌套对象被共享

2. 属性描述符：属性的元信息

对象的每个属性都有一套属性描述符，它定义了该属性在特定操作下的行为。ES5 之前这些内部特性不可直接操作，现在可以通过 Object.defineProperty 和 Object.defineProperties 精确控制。

2.1 两种描述符类型

属性描述符分为数据描述符和存取描述符，两者互斥（不能同时设置 value/writable 和 get/set）。

描述符属性	类型	默认值	说明
`value`	数据描述符	`undefined`	属性的值。
`writable`	数据描述符	`false`	若为 `false`，属性值只读（严格模式下赋值会抛出 `TypeError`）。
`get`	存取描述符（getter）	`undefined`	取值函数，无参数，读取属性时调用。
`set`	存取描述符（setter）	`undefined`	存值函数，接收一个参数，设置属性时调用。
`enumerable`	通用	`false`	若为 `true`，属性可被 `for...in` 和 `Object.keys()` 遍历。
`configurable`	通用	`false`	若为 `true`，属性可被删除（`delete`）且描述符可修改（`writable` 可从 `true` 改为 `false`）。

2.2 `Object.defineProperty`：定义单个属性

const user = {};

Object.defineProperty(user, 'name', {
  value: 'Alice',
  writable: true,
  enumerable: true,
  configurable: true
});

console.log(user.name); // 'Alice'

重要默认值：当使用字面量 { name: 'Alice' } 创建属性时，writable、enumerable、configurable 均默认为 true。但使用 Object.defineProperty 添加属性时，这三个布尔描述符**默认都为 false**。这是极易出错的差异点。

const obj = {};
Object.defineProperty(obj, 'secret', { value: 42 });

console.log(obj.secret);           // 42
obj.secret = 100;                  // 静默失败（严格模式 TypeError）
console.log(obj.secret);           // 42 —— 未改变
console.log(Object.keys(obj));     // [] —— 不可枚举
delete obj.secret;                 // 静默失败（严格模式 TypeError）
console.log(obj.secret);           // 42 —— 不可删除

2.3 Getter 和 Setter（存取描述符）

通过 get 和 set 定义计算属性，是封装内部状态和控制访问的常用手段。

const person = {
  firstName: 'Alice',
  lastName: 'Smith',
  
  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  },
  
  set fullName(name) {
    const parts = name.split(' ');
    this.firstName = parts[0];
    this.lastName = parts[1] || '';
  }
};

console.log(person.fullName);       // 'Alice Smith'
person.fullName = 'Bob Johnson';
console.log(person.firstName);      // 'Bob'
console.log(person.lastName);       // 'Johnson'

使用 Object.defineProperty 定义 getter/setter：

const product = { _price: 0 };

Object.defineProperty(product, 'price', {
  get() {
    return this._price;
  },
  set(value) {
    if (value < 0) {
      throw new Error('价格不能为负数');
    }
    this._price = value;
  },
  enumerable: true,
  configurable: true
});

product.price = 99;
console.log(product.price); // 99
// product.price = -1;     // Error: 价格不能为负数

2.4 `Object.defineProperties`：批量定义

const obj = {};

Object.defineProperties(obj, {
  id: {
    value: 1001,
    writable: false,
    enumerable: true
  },
  name: {
    value: 'Widget',
    writable: true,
    enumerable: true
  }
});

3. `Object` 静态方法：操作对象的利器

Object 构造函数上提供了一组静态方法，用于获取属性信息、控制对象行为、进行对象级别操作。

3.1 属性查询与遍历

方法	返回值	范围
`Object.keys(obj)`	`string[]`	自身可枚举非 Symbol 属性键。
`Object.values(obj)`	`any[]`	自身可枚举非 Symbol 属性值。
`Object.entries(obj)`	`[string, any][]`	自身可枚举非 Symbol 键值对。
`Object.getOwnPropertyNames(obj)`	`string[]`	自身所有非 Symbol 属性键（含不可枚举）。
`Object.getOwnPropertySymbols(obj)`	`symbol[]`	自身所有 Symbol 属性键。

const sym = Symbol('id');
const obj = { a: 1, b: 2, [sym]: 99 };
Object.defineProperty(obj, 'hidden', { value: 3, enumerable: false });

console.log(Object.keys(obj));       // ['a', 'b']
console.log(Object.values(obj));     // [1, 2]
console.log(Object.entries(obj));    // [['a', 1], ['b', 2]]
console.log(Object.getOwnPropertyNames(obj)); // ['a', 'b', 'hidden']
console.log(Object.getOwnPropertySymbols(obj)); // [Symbol(id)]

3.2 属性描述符相关

Object.getOwnPropertyDescriptor(obj, prop)：获取单个属性的描述符对象。
Object.getOwnPropertyDescriptors(obj)：获取所有自有属性的描述符对象集合（ES2017）。

const obj = { count: 10 };

const desc = Object.getOwnPropertyDescriptor(obj, 'count');
console.log(desc);
// { value: 10, writable: true, enumerable: true, configurable: true }

// 获取所有属性的描述符，常用于精确拷贝对象
const allDescs = Object.getOwnPropertyDescriptors(obj);
console.log(Object.keys(allDescs)); // ['count']

Object.getOwnPropertyDescriptors 配合 Object.defineProperties 可用来创建对象的完整浅拷贝（包括 getter/setter 和不可枚举属性）：

const source = {
  get name() { return 'Alice'; }
};
Object.defineProperty(source, 'secret', { value: 42, enumerable: false });

const clone = Object.defineProperties({}, Object.getOwnPropertyDescriptors(source));
console.log(clone.name);          // 'Alice'
console.log(clone.secret);        // 42
console.log(Object.keys(clone));  // ['name'] —— secret 不可枚举

3.3 对象控制与保护

方法	说明	可添加属性	可删除属性	可修改属性值	可修改描述符
`Object.preventExtensions(obj)`	阻止添加新属性。	❌	✅	✅	✅
`Object.seal(obj)`	阻止添加和删除属性，并将所有现有属性的 `configurable` 设为 `false`。	❌	❌	✅	❌
`Object.freeze(obj)`	阻止添加、删除、修改属性值，并将所有现有属性的 `writable` 和 `configurable` 设为 `false`。	❌	❌	❌	❌

const obj = { name: 'Alice' };

Object.freeze(obj);
obj.name = 'Bob';  // 静默失败（严格模式 TypeError）
console.log(obj.name); // 'Alice'

对应检测方法：

Object.isExtensible(obj) → 如果未调用 preventExtensions，返回 true。
Object.isSealed(obj) → 如果调用了 seal 或 freeze，返回 true。
Object.isFrozen(obj) → 如果调用了 freeze，返回 true。

重要限制：这三种方法都是浅层的——只影响对象的直接属性。嵌套对象内部的属性不受影响，仍可修改。

const user = { profile: { name: 'Alice' } };
Object.freeze(user);

user.profile.name = 'Bob';     // 修改成功！嵌套对象未被冻结
console.log(user.profile.name); // 'Bob'

实现深冻结需要递归处理：

function deepFreeze(obj) {
  Object.freeze(obj);
  Object.getOwnPropertyNames(obj).forEach(prop => {
    const value = obj[prop];
    if (typeof value === 'object' && value !== null && !Object.isFrozen(value)) {
      deepFreeze(value);
    }
  });
  return obj;
}

3.4 对象比较与转换

Object.is(value1, value2)：比较两个值是否相同。与 === 的主要区别在于对 NaN 和 -0 的处理。

console.log(NaN === NaN);           // false
console.log(Object.is(NaN, NaN));   // true

console.log(0 === -0);              // true
console.log(Object.is(0, -0));      // false

Object.assign(target, ...sources)：将源对象的自有可枚举属性浅拷贝到目标对象。这是修改目标对象并返回它。

const target = { a: 1 };
const source = { b: 2, c: 3 };

Object.assign(target, source);
console.log(target); // { a: 1, b: 2, c: 3 }
console.log(target === Object.assign(target, source)); // true —— 返回目标对象本身

Object.assign 会触发目标对象的 setter（如果有），而展开运算符 { ...obj } 不会触发 setter。这是两者在使用上需要注意的细微差异。

4. 可选链 `?.` 与空值合并 `??` 在对象访问中的应用

这两项现代语法在处理深层嵌套对象访问时提供了极大的安全性和便利性。

const user = null;

// 安全访问：如果 user 是 null 或 undefined，短路返回 undefined
const city = user?.address?.city;
console.log(city); // undefined（不抛出 TypeError）

// 搭配空值合并提供默认值
const cityName = user?.address?.city ?? '未知城市';
console.log(cityName); // '未知城市'

可选链也可用于方法调用和动态属性访问：

1
2
3

const obj = null;
console.log(obj?.method?.());         // undefined
console.log(obj?.['dynamicKey']);     // undefined

课后练习

一、概念自测（选择题 / 填空题）

（单选） 使用 Object.defineProperty(obj, 'prop', { value: 1 }) 定义的属性，其 writable 默认值是？
A. true
B. false
C. undefined
D. 与字面量定义一致
（单选） 以下哪个方法可以同时获取对象的自有 Symbol 属性和非 Symbol 属性（包括不可枚举属性）？
A. Object.keys()
B. Object.getOwnPropertyNames()
C. Object.getOwnPropertyNames() + Object.getOwnPropertySymbols()
D. Object.entries()
（填空） 要创建一个对象的浅拷贝，同时保留所有属性描述符（包括 getter/setter），应使用 Object.getOwnPropertyDescriptors() 配合 ______ 方法。
（多选） 以下哪些操作会被 Object.freeze() 阻止？
A. 添加新属性
B. 删除现有属性
C. 修改现有属性的值
D. 修改嵌套对象的属性值

二、AI 编程任务：编写面向 AI 的提示词

场景：你需要编写一个 JavaScript 函数 createReadOnlyProxy(obj)，它接收一个对象并返回一个新的对象，该对象的所有一级属性都是只读的（无法修改、无法添加、无法删除），同时保留对原有嵌套对象的正常读写。要求如下：

使用 Object.defineProperties 配合 Object.getOwnPropertyDescriptors 实现。
原对象的属性如果是对象，应保持其可变性（即浅层只读）。
使用 const 声明函数，变量命名遵循 camelCase。
添加 JSDoc 注释说明参数和返回值。

任务要求：请写出一段完整的中文提示词，发送给 AI，使其生成符合上述要求的 JavaScript 代码。提示词中需明确指定使用的方法组合、浅层只读的语义、以及对 getter/setter 的保留。

三、面试真题与参考答案

题目（腾讯前端面试题）：

请详细解释 Object.freeze()、Object.seal() 和 Object.preventExtensions() 三者的区别，并说明它们在实际开发中的典型应用场景。另外，为什么说 const 声明的对象仍然是可变的，而 Object.freeze() 才能真正实现不可变？

参考答案：

1. 三者区别：

方法	添加新属性	删除属性	修改属性值	修改属性描述符
`Object.preventExtensions()`	❌	✅	✅	✅
`Object.seal()`	❌	❌	✅	❌
`Object.freeze()`	❌	❌	❌	❌

2. 典型应用场景：

Object.freeze()：定义应用程序常量配置对象，防止意外修改；在 Redux 中确保状态不可变（配合深冻结或 Immutable.js）。
Object.seal()：固定对象的“形状”（键集合），但允许更新值。例如，某个 API 返回的数据结构必须包含固定字段，但字段值可刷新。
Object.preventExtensions()：防止对象被注入意外属性，但允许修改和删除现有属性。在库的内部维护对象结构时使用。

3. const vs Object.freeze()：
const 声明的变量是绑定不可变，即变量名不能重新赋值为另一个值。但它指向的对象内部的属性仍可随意修改。Object.freeze() 则是值不可变，它冻结对象本身，阻止任何对对象属性的修改、添加或删除。两者作用于不同层次：const 保护引用，freeze 保护对象内容。真正的不可变对象需要两者结合——用 const 声明并用 Object.freeze() 冻结。

4. 浅冻结限制：Object.freeze() 仅冻结对象的第一层属性。嵌套对象仍可被修改。要实现深度不可变，需要递归调用 Object.freeze()（深冻结），或使用专门的不可变数据库（如 Immer、Immutable.js）。

课后练习答案

一、概念自测答案

B
- 解析：Object.defineProperty 添加属性时，writable、enumerable、configurable 均默认为 false，与字面量创建属性（均为 true）不同。
C
- 解析：getOwnPropertyNames 获取所有非 Symbol 属性，getOwnPropertySymbols 获取所有 Symbol 属性，两者组合覆盖所有自有属性（含不可枚举）。
Object.defineProperties
- 解析：Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) 是保留属性描述符的浅拷贝模式。
A、B、C
- 解析：Object.freeze() 阻止添加、删除和修改一级属性的值。D 错误——嵌套对象不受影响，仍可修改其内部属性。

二、AI 编程任务参考答案（提示词示例）

示例提示词：
“请编写一个 JavaScript 函数 createReadOnlyProxy(obj)，接收一个对象并返回其浅层只读的版本。要求：

使用 Object.getOwnPropertyDescriptors(obj) 获取原对象所有自有属性的描述符。

遍历这些描述符，将每个属性的 writable 设为 false、configurable 设为 false（若原来有 setter，则保留 setter 但不设置 writable）。

使用 Object.defineProperties({}, modifiedDescriptors) 创建新对象。

最终对返回对象调用 Object.preventExtensions() 防止添加新属性。

浅层只读：原对象的嵌套对象属性值保持不变（不递归）。

使用 const 声明函数，添加 JSDoc 注释。

提供使用示例并验证修改失败。直接输出完整代码。”

原文作者：WinddSnow

原文链接：https://winddsnow.github.io/2026/07/29/JavaScript-Objects/

发表日期：July 29th 2026, 8:00:00 pm

更新日期：July 28th 2026, 10:27:15 am

Next Post

JavaScript-Objects-and-Prototypes-Part2-Prototype-Chain-Inheritance-Class
Previous Post

JavaScript-Scope-and-Closures

CATALOG

1. 第50课：对象与原型（上）——对象字面量、属性描述符与 Object 静态方法