如何利用Object.defineProperty定义属性描述符，以及它在数据响应式系统中的实现原理是什么？-js教程-PHP中文网

Object.defineProperty通过属性描述符实现对对象属性的精细控制，支持数据属性和访问器属性，为Vue 2.x等框架的数据响应式提供基础。其核心在于利用get和set拦截属性读写，实现依赖收集与视图更新。然而，它存在无法监听属性增删、数组索引修改等局限，导致Vue 2.x需通过特殊API弥补。相比之下，ES6 Proxy能代理整个对象，拦截更全面的操作，成为Vue 3.x的首选，代表了响应式系统的演进方向。尽管如此，Object.defineProperty在常量定义、私有属性模拟、懒加载等场景仍具实用价值。

如何利用object.defineproperty定义属性描述符，以及它在数据响应式系统中的实现原理是什么？

Object.defineProperty

登录后复制

在JavaScript中扮演着一个非常核心的角色，它允许我们对对象的属性进行精确到位的控制，包括其值、可写性、可枚举性以及可配置性。更深层次地看，它通过提供

getter

登录后复制

和

setter

登录后复制

机制，为许多现代前端框架构建数据响应式系统奠定了基础，使得数据变化能够被系统感知并触发相应的视图更新。

解决方案

要利用

Object.defineProperty

登录后复制

定义属性描述符，我们主要通过其提供的第三个参数——一个“属性描述符”对象来操作。这个描述符对象可以包含数据属性（

value

登录后复制

writable

登录后复制

enumerable

登录后复制

configurable

登录后复制

）或访问器属性（

get

登录后复制

set

登录后复制

），但不能同时拥有两者。

以一个简单的例子来说明：

const user = {};

Object.defineProperty(user, 'name', {
  value: '张三',
  writable: false, // 属性值不可修改
  enumerable: true, // 属性可被枚举（例如for...in）
  configurable: false // 属性不可被删除，描述符不可再修改
});

Object.defineProperty(user, 'age', {
  get() {
    console.log('访问了age属性');
    return this._age;
  },
  set(newValue) {
    console.log('修改了age属性为：', newValue);
    if (newValue < 0) {
      console.warn('年龄不能为负数！');
      return;
    }
    this._age = newValue;
  },
  enumerable: true,
  configurable: true
});

user._age = 25; // 初始化内部age值

console.log(user.name); // 输出：张三
user.name = '李四'; // 尝试修改，但因为writable: false，修改无效
console.log(user.name); // 仍然输出：张三

console.log(user.age); // 触发get，输出：访问了age属性，然后输出：25
user.age = 30; // 触发set，输出：修改了age属性为： 30
console.log(user.age); // 触发get，输出：访问了age属性，然后输出：30

登录后复制

在数据响应式系统中，

Object.defineProperty

登录后复制

的核心作用在于它的访问器属性：

get

登录后复制

和

set

登录后复制

。当一个对象属性被定义了

get

登录后复制

和

set

登录后复制

后，每次访问该属性都会触发

get

登录后复制

函数，每次修改该属性都会触发

set

登录后复制

函数。

其实现原理大致是这样的：

遍历数据对象： 框架会递归遍历数据对象的所有属性。
劫持属性： 对于每个属性，框架会使用
```
Object.defineProperty
```
登录后复制
将其转换为
```
getter/setter
```
登录后复制
。
依赖收集（
get
登录后复制
）：当组件渲染时，如果它访问了某个响应式数据属性，这个属性的
```
getter
```
登录后复制
就会被触发。在
```
getter
```
登录后复制
中，框架会记录下当前正在运行的组件（或者更准确地说，是其对应的“watcher”），将其添加为该数据属性的“订阅者”。
派发更新（
set
登录后复制
）：当数据属性被修改时，它的
```
setter
```
登录后复制
就会被触发。在
```
setter
```
登录后复制
中，框架会通知所有之前收集到的订阅者（watcher），告诉它们这个数据属性已经变化了。
视图更新： 收到通知的watcher会触发其关联组件的重新渲染，从而更新视图。

这套机制使得数据和视图之间建立起了一种自动的联系，开发者无需手动操作DOM，只需修改数据，视图就会随之更新。

为什么Vue 2.x选择Object.defineProperty来实现数据响应式，它有哪些局限性？

Vue 2.x选择

Object.defineProperty

登录后复制

作为其核心的响应式实现，主要是出于对浏览器兼容性的考量。在ES6的

Proxy

登录后复制

出现之前，

defineProperty

登录后复制

是唯一能提供这种粒度属性劫持能力的原生API，它在当时几乎所有主流浏览器中都得到了良好的支持。这使得Vue 2.x能够构建一个稳定且广泛可用的响应式系统。

然而，这种选择也带来了显著的局限性，这些问题在实际开发中常常令人头疼：

无法检测对象属性的添加或删除：
```
Object.defineProperty
```
登录后复制
只能劫持已经存在的属性。当你向一个响应式对象添加新属性，或者删除一个现有属性时，Vue 2.x是无法感知的。例如，
```
this.someObject.newProp = 'value'
```
登录后复制
这样的操作，
```
newProp
```
登录后复制
并不会是响应式的。为了解决这个问题，Vue 2.x提供了
```
Vue.set
```
登录后复制
和
```
Vue.delete
```
登录后复制
这两个API，它们本质上是在内部重新调用了
```
Object.defineProperty
```
登录后复制
来处理新属性，或者进行显式删除。
无法直接检测数组变动：
```
Object.defineProperty
```
登录后复制
无法直接拦截数组通过索引修改元素（如
```
arr[0] = newValue
```
登录后复制
）或修改
```
length
```
登录后复制
属性的操作。Vue 2.x通过“魔改”数组的变异方法（如
```
push
```
登录后复制
,
```
pop
```
登录后复制
,
```
splice
```
登录后复制
,
```
shift
```
登录后复制
,
```
unshift
```
登录后复制
,
```
sort
```
登录后复制
,
```
reverse
```
登录后复制
）来解决这个问题。它重写了这些方法，在执行原始操作的同时，额外增加了通知依赖更新的逻辑。但对于非变异方法（如
```
slice
```
登录后复制
,
```
filter
```
登录后复制
,
```
map
```
登录后复制
），则需要重新赋值才能触发响应。
深度嵌套对象性能开销： 实现响应式需要递归地遍历数据对象的所有属性，并为每个属性都设置
```
getter/setter
```
登录后复制
。对于那些结构复杂、深度嵌套或数据量庞大的对象，这个初始化过程可能会带来不小的性能开销，尤其是在应用启动时。
无法响应Map、Set等ES6数据结构：
```
Object.defineProperty
```
登录后复制
的设计初衷是针对普通JavaScript对象的属性操作，对于ES6引入的
```
map
```
登录后复制
、
```
set
```
登录后复制
这类数据结构，它无能为力。如果要在Vue 2.x中响应这些数据结构的变化，需要额外的封装或转换。

在实际开发中，除了响应式系统，Object.defineProperty还有哪些不为人知的妙用？

尽管

Object.defineProperty

登录后复制

在响应式框架中大放异彩，但它的能力远不止于此。在日常开发中，它还能在一些特定场景下提供精细的控制，解决一些看似棘手的问题：

阿里云-虚拟数字人

阿里云-虚拟数字人是什么？ ...

查看详情

创建不可修改的常量或配置项： 当你需要定义一些应用程序级别的常量或配置对象，并且希望它们在初始化后不能被意外修改时，
```
Object.defineProperty
```
登录后复制
是绝佳的选择。通过将
```
writable
```
登录后复制
设置为
```
false
```
登录后复制
，你可以确保这些值是只读的，这对于维护代码的稳定性和安全性非常有帮助。
```
const config = {};
Object.defineProperty(config, 'API_KEY', {
  value: 'your_secret_key_123',
  writable: false,
  enumerable: true,
  configurable: false
});
// config.API_KEY = 'new_key'; // 会在非严格模式下静默失败，严格模式下抛错
```
登录后复制

模拟私有属性和访问控制： 尽管JavaScript没有原生的私有属性，但

Object.defineProperty

登录后复制

结合闭包可以模拟出类似的效果。你可以将实际的数据存储在一个闭包作用域内的变量中，然后通过

getter

登录后复制

和

setter

登录后复制

来控制外部对这些数据的访问权限和逻辑。

function createCounter() {
  let _count = 0; // 私有变量
  const obj = {};
  Object.defineProperty(obj, 'count', {
    get() {
      return _count;
    },
    set(value) {
      if (typeof value === 'number' && value >= 0) {
        _count = value;
      } else {
        console.warn('Count must be a non-negative number.');
      }
    },
    enumerable: true
  });
  return obj;
}
const counter = createCounter();
counter.count = 10;
console.log(counter.count); // 10
counter.count = -5; // 警告，值不变
console.log(counter.count); // 10

登录后复制

属性的懒加载和缓存： 在某些场景下，某个属性的值可能计算成本很高，或者需要从外部资源获取。你可以利用

getter

登录后复制

来实现懒加载，即只有当属性第一次被访问时才进行计算或获取，并将结果缓存起来。后续访问直接返回缓存值，避免重复工作。

const data = {};
Object.defineProperty(data, 'expensiveResult', {
  get() {
    if (!this._cachedResult) {
      console.log('正在进行昂贵的计算...');
      this._cachedResult = 1 + 2 + 3 + 4 + 5; // 模拟耗时计算
    }
    return this._cachedResult;
  },
  enumerable: true,
  configurable: true
});
console.log(data.expensiveResult); // 第一次访问，触发计算
console.log(data.expensiveResult); // 第二次访问，直接返回缓存

登录后复制

数据校验和格式化： 在
```
setter
```
登录后复制
中加入逻辑，可以在属性被赋值时进行数据类型校验、范围检查或格式化操作。这有助于确保数据的完整性和一致性，避免无效数据进入系统。

与ES6的Proxy相比，Object.defineProperty在数据劫持方面有何异同和演进方向？

Object.defineProperty

登录后复制

和ES6的

Proxy

登录后复制

都是JavaScript中实现数据劫持的关键机制，但它们在能力和设计理念上存在显著差异，也代表了JavaScript语言在这一领域的演进方向。

相同点：

两者都能实现对对象属性的访问（

get

登录后复制

）和修改（

set

登录后复制

）进行拦截，从而在数据操作发生时执行自定义逻辑。这是构建响应式系统或进行数据监控的基础。

不同点：

拦截粒度：
- ```
Object.defineProperty
```
  登录后复制
  ：只能针对单个已存在的属性进行劫持。这意味着你必须遍历对象的每一个属性来设置
```
getter/setter
```
  登录后复制
  。对于新添加的属性，它无法直接感知。
- ```
Proxy
```
  登录后复制
  ：可以拦截整个对象的所有操作。它不是针对单个属性，而是为目标对象创建了一个代理，所有对代理对象的操作都会先经过代理的
```
handler
```
  登录后复制
  。这意味着它能够拦截属性的增删改查、函数调用、甚至
```
in
```
  登录后复制
  操作符、
```
for...in
```
  登录后复制
  循环等，提供了更全面的控制能力。
对新属性和数组的检测能力：
- ```
Object.defineProperty
```
  登录后复制
  ：这是它的最大痛点。无法直接检测对象新属性的添加和删除，也无法直接拦截数组通过索引修改元素或改变
```
length
```
  登录后复制
  的操作。
- ```
Proxy
```
  登录后复制
  ：完美解决了这些问题。由于它拦截的是整个对象，当通过代理对象添加新属性或删除属性时，
```
handler
```
  登录后复制
  中的
```
set
```
  登录后复制
  或
```
deleteProperty
```
  登录后复制
  方法会被触发。对于数组，
```
Proxy
```
  登录后复制
  也能轻松拦截通过索引修改元素的操作，因为它同样是对象属性操作的一种。
嵌套对象处理：
- ```
Object.defineProperty
```
  登录后复制
  ：需要递归遍历所有嵌套对象，为每个属性都设置
```
getter/setter
```
  登录后复制
  ，这在初始化时开销较大。
- ```
Proxy
```
  登录后复制
  ：虽然也需要递归地为嵌套对象创建
```
Proxy
```
  登录后复制
  ，但其拦截能力更强，能够更灵活地处理深层数据结构。例如，可以在
```
get
```
  登录后复制
  中按需创建子对象的
```
Proxy
```
  登录后复制
  ，实现懒代理。
性能：
- ```
Object.defineProperty
```
  登录后复制
  ：为每个属性创建
```
getter/setter
```
  登录后复制
  可能会带来一定的内存开销。
- ```
Proxy
```
  登录后复制
  ：通常被认为在某些场景下性能更优，因为它只创建了一个代理对象，而不是为每个属性都定义了拦截器。但实际性能取决于具体的实现和使用场景。
浏览器兼容性：
- ```
Object.defineProperty
```
  登录后复制
  ：兼容性非常好，几乎所有现代浏览器都支持。
- ```
Proxy
```
  登录后复制
  ：是ES6（ES2015）的特性，在IE浏览器中不被支持，但在现代浏览器中已广泛可用。

演进方向：

随着ES6及其后续版本的普及，

Proxy

登录后复制

已经成为数据劫持和响应式系统构建的首选。

Vue 3.x全面转向Proxy： 最典型的例子就是Vue 3.x的响应式系统。它完全抛弃了
```
Object.defineProperty
```
登录后复制
，转而使用
```
Proxy
```
登录后复制
。这使得Vue 3.x能够原生解决Vue 2.x中关于新属性和数组变化的痛点，极大地简化了响应式系统的实现逻辑，并提供了更强大、更一致的响应式能力。
更灵活的元编程：
```
Proxy
```
登录后复制
不仅仅用于响应式系统，它提供了20多种拦截操作（
```
trap
```
登录后复制
），使其成为JavaScript中强大的元编程工具，可以用于构建各种自定义行为，例如：验证、格式化、日志记录、访问控制、性能监控等。
Object.defineProperty的定位： 尽管
```
Proxy
```
登录后复制
功能更强大，
```
Object.defineProperty
```
登录后复制
并非完全被淘汰。它在需要对单个属性进行精确、细粒度控制，或者在不支持
```
Proxy
```
登录后复制
的旧环境（虽然现在越来越少见）中，仍然是不可替代的工具。例如，创建不可变属性、实现属性的懒加载或自定义行为时，它依然非常实用。