当前位置：首页 > news >正文

JavaScript中Object.defineProperty的作用和用法以及和proxy的区别

news 2025/7/15 8:09:01

在 JavaScript 中，Object.defineProperty() 是一个强大的内置方法，用于精确控制对象属性的配置。它允许你直接修改对象属性的底层特性（如可读写性、可枚举性、可配置性），甚至可以自定义属性的 getter 和 setter 方法。

核心作用

精确控制属性配置
通过设置属性描述符（descriptor），可以精确控制属性的行为。
实现数据劫持
通过 getter/setter 拦截属性的读取和赋值操作，常用于响应式系统（如 Vue.js 的数据绑定）。
阻止属性被意外修改
通过设置 writable: false 或 configurable: false 保护属性不被修改或删除。

基本语法

Object.defineProperty(obj, prop, descriptor);

obj：需要定义属性的对象。
prop：需要定义或修改的属性名称（字符串或 Symbol）。
descriptor：属性描述符对象，包含以下可选键：
- value：属性的值（默认 undefined）。
- writable：属性值是否可修改（默认 false）。
- enumerable：属性是否可被枚举（如 for...in 循环，默认 false）。
- configurable：属性是否可被删除或重新配置（默认 false）。
- get：获取属性值的函数（与 value 互斥）。
- set：设置属性值的函数（与 value 互斥）。

用法示例

1. 基本属性定义

const person = {};Object.defineProperty(person, 'name', {value: 'John',writable: true,     // 允许修改值enumerable: true,   // 可被枚举configurable: true  // 可被重新配置或删除
});console.log(person.name); // "John"
person.name = 'Jane';     // 修改有效（writable: true）
console.log(person.name); // "Jane"

2. 只读属性（`writable: false`）

const person = {};Object.defineProperty(person, 'age', {value: 30,writable: false,    // 只读enumerable: true
});console.log(person.age); // 30
person.age = 31;         // 赋值无效（严格模式下会报错）
console.log(person.age); // 30

3. 不可枚举属性（`enumerable: false`）

const person = { name: 'John' };Object.defineProperty(person, 'age', {value: 30,enumerable: false   // 不可枚举
});console.log(person.age); // 30
for (const key in person) {console.log(key); // 仅输出 "name"（age 不可枚举）
}

4. 不可配置属性（`configurable: false`）

const person = {};Object.defineProperty(person, 'name', {value: 'John',configurable: false  // 不可重新配置或删除
});delete person.name;    // 删除无效
console.log(person.name); // "John"// 尝试重新配置会报错（严格模式下）
Object.defineProperty(person, 'name', {value: 'Jane'
}); // TypeError: Cannot redefine property: name

5. 数据劫持（getter/setter）

const person = {_age: 30 // 约定使用下划线表示私有属性
};Object.defineProperty(person, 'age', {get() {console.log('读取 age');return this._age;},set(newValue) {console.log('设置 age 为', newValue);if (newValue < 0) throw new Error('年龄不能为负数');this._age = newValue;}
});console.log(person.age); // 读取 age → 30
person.age = 31;         // 设置 age 为 31
person.age = -5;         // Error: 年龄不能为负数

应用场景

实现响应式系统
Vue.js 2.x 利用 Object.defineProperty() 实现数据劫持，当属性值变化时自动更新 DOM：

function defineReactive(obj, key, value) {Object.defineProperty(obj, key, {get() {// 依赖收集return value;},set(newValue) {if (value !== newValue) {value = newValue;// 触发更新updateDOM();}}});
}

实现私有属性
通过 getter/setter 控制属性访问权限：

const person = {};
let _age = 30; // 闭包中的私有变量Object.defineProperty(person, 'age', {get() { return _age; },set(value) { _age = value; }
});

阻止对象被篡改
通过设置 configurable: false 和 writable: false 保护关键属性：

const config = { API_KEY: 'secret' };Object.defineProperty(config, 'API_KEY', {writable: false,configurable: false
});// 无法修改或删除 API_KEY

注意事项

兼容性：Object.defineProperty() 是 ES5 引入的方法，不支持 IE8 及以下版本。
性能影响：频繁触发 getter/setter 会有一定性能开销，避免在高性能场景（如大型循环）中过度使用。
深度监听：Object.defineProperty() 只能监听对象的直接属性，若要监听嵌套对象，需要递归处理。
数组监听限制：直接监听数组变化存在局限性（Vue.js 3 改用 Proxy 解决此问题）。

与 `Proxy` 的对比

特性	Object.defineProperty()	Proxy
监听范围	只能监听对象的已有属性（需逐个定义）	可以监听整个对象（包括新增属性）
数组支持	对数组的监听有限（需特殊处理）	全面支持数组操作
元编程能力	仅能控制单个属性	可以拦截多种操作（如 `in`、`delete`）
兼容性	ES5（支持 IE9+）	ES6（不支持 IE）