在JavaScript的世界里，有两个“黑科技”正在悄然改变着我们的编程方式。它们就是Object.defineProperty和Proxy，一个古老而强大，一个新兴而神秘。今天，就让我们一起揭开它们的面纱，看看它们在实际开发中的应用场景。

一、Object.definePropertyVSProxy：劫持与代理的较量

首先，让我们来聊聊Object.defineProperty和Proxy的基本概念。

Object.defineProperty是JavaScript中的一个经典API，它允许我们精确地控制对象属性的读取和设置行为。想象一下，你可以像魔法师一样，控制属性的每一次访问和修改。

例如：

let data = {name: '小明', age: 20};
Object.defineProperty(data, 'age', {
  get() {
    return this._age;
  },
  set(newValue) {
    this._age = newValue;
    console.log('年龄更新为:', newValue);
  }
});

data.age = 25; // 控制器生效，输出: 年龄更新为: 25

而Proxy则是ES6引入的新特性，它更为强大和灵活。Proxy可以拦截对象的所有操作，包括新增属性、删除属性、访问数组方法等。

例如：

function reactive(target) {
  const handler = {
    get(target, key, receiver) {
      console.log(`获取属性:${key}`);
      return Reflect.get(...arguments);
    },
    set(target, key, value) {
      console.log(`设置属性:${key}为${value}`);
      return Reflect.set(...arguments);
    }
  };
  return new Proxy(target, handler);
}

let data = {name: '小明', age: 20};
let proxyData = reactive(data);

proxyData.name; // 输出: 获取属性: name
proxyData.age = 30; // 输出: 设置属性: age 为 30

二、实现一个简易的响应式系统

有了上述的基础知识，我们可以尝试实现一个简易的响应式系统。

使用Object.defineProperty实现响应式：

function defineReactive(target, key, value) {
  if (typeof value === 'object') {
    observe(value);
  }
  Object.defineProperty(target, key, {
    get() {
      return value;
    },
    set(newValue) {
      if (newValue !== value) {
        value = newValue;
        console.log('视图更新');
      }
    }
  });
}

function observe(data) {
  for (let key in data) {
    defineReactive(data, key, data[key]);
  }
}

let data = {name: '小明', age: {n: 20}, likes: ['编程', '学习']};
observe(data);

data.age.n = 30; // 输出: 视图更新
data.likes.push('运动'); // 无法生效，需要重写数组方法才能生效

使用Proxy实现响应式：

function createReactiveObject(target) {
  const handler = {
    get(target, key) {
      console.log(`访问属性:${key}`);
      return key in target ? target[key] : undefined;
    },
    set(target, key, value) {
      console.log(`设置属性:${key}为${value}`);
      target[key] = value;
      console.log('视图更新');
      return true;
    }
  };
  return new Proxy(target, handler);
}

let data = {name: '小明', age: {n: 20}, likes: ['编程', '学习']};
let reactiveData = createReactiveObject(data);

reactiveData.name = '小红'; // 输出: 设置属性: name 为 小红 视图更新
reactiveData.age = 30; // 输出: 设置属性: age 为 30 视图更新
reactiveData.likes.push('吃饭'); // 可以添加进likes中

三、对比：Object.defineProperty与Proxy的特性

最后，让我们来对比一下Object.defineProperty和Proxy的特性。

• Object.defineProperty只能劫持单个属性，而Proxy可以代理整个对象。
• Object.defineProperty需要手动递归劫持，而Proxy支持按需递归。
• Object.defineProperty对数组的支持有限，无法劫持数组方法，而Proxy可以代理数组方法。
• Object.defineProperty只支持get和set操作，而Proxy支持多达13种操作。
• Object.defineProperty不支持冻结属性，而Proxy支持冻结对象的某些属性。

通过上述对比，我们可以看出Proxy在功能和灵活性上更具优势。然而，Object.defineProperty由于其简单性和对单个属性的控制力，在某些场景下仍然非常有用。

希望这篇文章能帮助你更好地理解Object.defineProperty和Proxy在JavaScript中的应用，并在实际开发中发挥它们的威力！