JavaScript 中对象 API 怎么使用 Object.defineProperty 定义带有拦截特性的属性-js教程-PHP中文网

object.defineproperty用于单个属性的精细控制，如只读、不可枚举或通过get/set拦截读写；但不支持对象级响应式，无法自动代理新增属性、数组索引等，推荐用proxy替代。

javascript 中对象 api 怎么使用 object.defineproperty 定义带有拦截特性的属性

使用 Object.defineProperty 可以定义**单个属性的精细行为**，比如只读、不可枚举、或通过 get/set 实现拦截逻辑。但它本身不提供“响应式拦截”（如 Vue 2 的数据劫持），而是为每个属性单独配置访问器（accessor）或数据描述符（data descriptor）。

定义带 get/set 的响应式属性

通过设置 get 和 set，你可以拦截对该属性的读取和赋值操作，在其中插入自定义逻辑（如日志、校验、通知更新等）：

必须省略 value 和 writable —— 否则会报错（访问器属性不能同时有 value 或 writable）
get 函数无参数，返回值即属性读取结果；set 接收一个参数（新值），通常用于更新内部状态
推荐用闭包或 WeakMap 存储私有值，避免在对象上直接暴露原始数据

示例：

const obj = {};
let _name = 'Alice';

Object.defineProperty(obj, 'name', {
  get() {
    console.log('读取 name');
    return _name;
  },
  set(value) {
    console.log('设置 name 为：', value);
    if (typeof value === 'string') {
      _name = value;
    }
  },
  // configurable: true,  // 允许后续 delete 或重新 define
  // enumerable: true    // 会让 for...in 和 Object.keys 看到该属性（默认 false）
});

控制属性的可配置性与可枚举性

这两个布尔选项影响属性能否被修改或遍历：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

configurable: false → 无法再用 defineProperty 修改该属性描述符，也不能 delete 它（除非是 writable: true 且先改为 value 形式）
enumerable: false（默认）→ 属性不会出现在 for...in、Object.keys()、JSON.stringify() 中，但可通过 obj.prop 直接访问

例如隐藏内部计数器：

let _count = 0;
Object.defineProperty(obj, 'count', {
  get() { return _count; },
  set(v) { _count = Math.max(0, v); },
  enumerable: false,
  configurable: false
});

注意：无法批量代理整个对象

Object.defineProperty 是**逐属性定义**的，对已存在属性重定义需确保 configurable: true；对新增属性需手动调用一次。它不适合自动拦截所有未来属性（那是 Proxy 的职责）：

给对象添加新属性时，不会自动应用拦截逻辑，必须显式调用 defineProperty
数组索引、length 属性、动态属性名（如 obj[key]）都无法被单个 defineProperty 覆盖
Vue 2 使用它递归遍历 data 对象的每一层属性来实现响应式，但深层嵌套或新增属性仍有限制

替代方案：优先考虑 Proxy

若需真正意义上的对象级拦截（如捕获任意属性读写、in、delete、函数调用等），应使用 Proxy：

const handler = {
  get(target, prop) {
    console.log('访问属性：', prop);
    return target[prop];
  },
  set(target, prop, value) {
    console.log('设置属性：', prop, '=', value);
    target[prop] = value;
    return true;
  }
};

const proxy = new Proxy({}, handler);
proxy.foo = 42; // 触发 set
console.log(proxy.foo); // 触发 get

Proxy 更灵活、可撤销、支持 13 种 trap，是现代 JS 拦截对象行为的首选方式。