JavaScript中的Object.defineProperty与属性拦截

描述
Object.defineProperty是JavaScript中用于精确控制对象属性行为的核心API，它允许开发者通过属性描述符定义或修改对象的属性特性（如可枚举性、可写性等），并可通过getter/setter实现属性拦截（数据绑定、响应式系统的底层基础）。Vue 2的响应式原理正是基于此API实现。

知识要点分步讲解

1. 属性描述符的类型与作用

   • 数据描述符：包含value（属性值）、writable（是否可修改）、enumerable（是否可枚举，如for-in循环中可见）、configurable（是否可删除或修改描述符）。
   • 存取描述符：包含get（读取属性时触发）、set（修改属性时触发），与数据描述符互斥（不能同时定义value和get）。

   // 数据描述符示例
   const obj = {};
   Object.defineProperty(obj, 'name', {
     value: 'Alice',
     writable: false, // 不可修改
     enumerable: true // 可被枚举
   });
   
   // 存取描述符示例
   let value = 'initial';
   Object.defineProperty(obj, 'data', {
     get() { return value; },
     set(newValue) { value = newValue; },
     enumerable: true
   });
   

2. 属性拦截的实现逻辑

   • 当使用存取描述符时，对属性的读取和赋值操作会被getter和setter函数拦截，开发者可在setter中添加额外逻辑（如触发视图更新）。

   const book = {};
   let title = '';
   Object.defineProperty(book, 'title', {
     get() {
       console.log('读取title属性');
       return title;
     },
     set(newTitle) {
       console.log('修改title属性为：', newTitle);
       title = newTitle;
     }
   });
   
   book.title = 'JavaScript Guide'; // 输出"修改title属性为： JavaScript Guide"
   console.log(book.title); // 输出"读取title属性" + "JavaScript Guide"
   

3. 应用场景：简易响应式系统

   • 结合递归遍历对象属性，可为所有属性添加getter/setter，实现数据变化监听：

   function observe(obj) {
     if (typeof obj !== 'object' || obj === null) return;
   
     Object.keys(obj).forEach(key => {
       let value = obj[key];
       Object.defineProperty(obj, key, {
         get() {
           console.log(`获取 ${key}: ${value}`);
           return value;
         },
         set(newValue) {
           console.log(`设置 ${key} 为 ${newValue}`);
           value = newValue;
         }
       });
       observe(value); // 递归处理嵌套对象
     });
   }
   
   const data = { user: { name: 'Bob' } };
   observe(data);
   data.user.name = 'Ann'; // 输出"设置 name 为 Ann"
   

4. 局限性及注意事项

   • 无法监听新增属性：Vue 2中需使用Vue.set解决。
   • 数组限制：直接通过索引修改数组（如arr[0]=1）或修改数组长度无法触发拦截，需重写数组方法（push、pop等）。
   • 性能考虑：递归遍历大型对象或频繁操作属性时可能影响性能。

总结
Object.defineProperty通过属性描述符提供了对对象属性的精细控制，尤其是存取描述符能够实现属性拦截，为响应式编程奠定基础。尽管存在局限性，但其设计思想深刻影响了现代前端框架的发展。