一、前言

在 Vue3 出现之前，Object.defineProperty() 无疑是前端开发者绕不开的重要知识点，之所以如此重要，是因为它是 Vue2 中变化侦测的底层实现方式，理解了它，就等于掌握了一半的双向数据绑定原理。这使得它成为了前端开发中不可或缺的一部分，无论是在理论学习还是实际项目开发中，都有着至关重要的作用。本文将对 Object.defineProperty() 展开深入的分析和讲解，用最通俗易懂的方式讲明白其用法和原理。

二、Object.defineProperty()的基本信息

Object.defineProperty()是 JavaScript 中用于定义对象属性的方法，它允许精确地控制对象属性的行为和特性。简单来讲，就是如果你想监听一个对象属性的访问和修改动作，那么，用它就对了。

1. 语法

Object.defineProperty(obj, prop, descriptor)

obj： 要定义属性的目标对象（要监听的对象）。

prop： 要定义或修改的属性的名称。

descriptor： 用于定义属性的特性（可以理解成：监听对象的配置项）。

2. descriptor 里的属性和方法

value： 属性的值

// 为obj对象增加name属性，并赋值
const obj = {};
Object.defineProperty(obj, 'name', {value: 'zhihao'});
console.log(obj.name);  // 'zhihao'

writable： 决定属性值是否可以被修改，值是布尔类型，默认为 false

const obj = {};
Object.defineProperty(obj, 'name', { value: 'zhihao', writable: false });
obj.name = 'juejin'; // 不会生效，因为 writable 为 false
console.log(obj.name); // 'zhihao'

configurable： 决定属性是否可以被删除以及属性描述符是否可以被修改,默认为 false

const obj = {};
Object.defineProperty(obj, 'name', { value: 'zhihao', configurable: false });
delete obj.name; // 不会成功删除属性，因为 configurable 为 false

enumerable： 决定属性是否会在for...in循环和Object.keys()等枚举操作中出现，默认为false

const obj = {};
Object.defineProperty(obj, 'myProperty', { value: 42, enumerable: false });
for (const key in obj) {
  console.log(key); // 不会输出'myProperty'
}

getter()： 当访问属性时，会自动调用这个函数并返回其结果，可以在获取属性值时执行特定的逻辑。

const obj = {};
let count = 0;
// 监听obj对象中的total属性
Object.defineProperty(obj, 'total', {
  get() {
    return count * 2;
  }
});
// 访问obj.total时，会自动调用get函数
count = 5;
// 通过get方法返回处理好的数据
console.log(obj.total); // 10

setter()： 当修改属性值时，会自动调用这个函数，可以在设置属性值时进行验证、处理或触发其他操作。

const obj = {};
let name = '';
// 监听obj对象中的myName属性
Object.defineProperty(obj, 'myName', {
  // 访问myName属性时，触发get方法，这里就不做处理了，直接返回就行
  get() {
    return name;
  },
  // 修改或赋值改属性的时候，触发set方法，这里对属性值做了数据类型校验
  // newName是设置的最新属性值
  set(newName) {
    // 判断新属性值必须是字符串
    if (typeof newName === 'string' && newName.length > 0) {
      name = newName;
    }
  }
});
obj.myName = 'Alice';
console.log(obj.myName); // 'Alice'
obj.myName = null; // 不会设置属性值，因为不满足条件
console.log(obj.myName); // 'Alice'

三、Object.defineProperty() 的缺点

无法监听数组的变化： 对于数组的操作，如push、pop、splice等，不能直接通过Object.defineProperty()进行监听，需要通过重写数组的这些方法来实现监听，增加了实现的复杂性。

深度监听复杂对象的性能问题： 当需要对一个复杂的嵌套对象进行深度监听时，需要递归地使用Object.defineProperty()来定义每个属性的访问器，这可能会导致性能问题，特别是在对象结构复杂且频繁变化的情况下。

// 一个复杂的嵌套对象
const complexObject = {
  level1: {
    level2: {
      level3: {
        value: 10
      }
    }
  }
};

function deepObserve(obj) {
  // 循环定义每个属性的访问器
  for (let key in obj) {
    if (obj.hasOwnProperty(key) && typeof obj[key] === 'object') {
      deepObserve(obj[key]);
    }
    Object.defineProperty(obj, key, {
      enumerable: true,
      configurable: true,
      get() {
        console.log(`获取属性 ${key}: ${obj[key]}`);
        return obj[key];
      },
      set(newValue) {
        console.log(`设置属性 ${key}: ${newValue}`);
        if (typeof newValue === 'object' && newValue!== null) {
          deepObserve(newValue);
        }
        obj[key] = newValue;
      }
    });
  }
  return obj;
}

deepObserve(complexObject);

// 频繁修改复杂对象的属性
for (let i = 0; i < 1000; i++) {
  complexObject.level1.level2.level3.value++;
}

在这个例子中，对一个复杂的嵌套对象进行深度监听。当频繁修改嵌套对象的属性时，由于每次修改都会触发一系列的 getter 和 setter 调用，可能会导致性能问题。

不能直接监听新属性的添加和删除： 只能对已经存在的属性进行定义和监听。如果在运行时动态添加新的属性，无法自动对新属性进行监听，需要手动再次调用Object.defineProperty()来进行定义。

四、总结

Object.defineProperty() 是 JavaScript 中一个非常强大的方法，它可以精细的控制对象属性，而且在大多数现代浏览器中都有较好的支持。当然它也有一定的局限性，对于一些简单的应用场景，可能使用其他更简单的方法就足够了，而对于需要精细控制属性和实现复杂数据绑定的场景，Object.defineProperty() 仍然是一个非常有用的工具。

一文读懂 object.defineProperty | 详细讲解