简述版

Proxy 和 Object.defineProperty 是 JavaScript 中用于实现对象拦截和代理的两种不同机制。

Object.defineProperty 是一种在对象上定义新属性或修改现有属性的方式。
它接受三个参数：目标对象、属性名和属性描述符对象。
通过定义属性描述符对象，可以控制属性的行为，例如设置属性的值、可写性、可枚举性和可配置性等。
使用 Object.defineProperty 可以对对象的单个属性进行拦截，并在属性被访问、赋值或删除时执行自定义的逻辑，但它只能拦截单个属性操作。

示例：

const obj = {};
let value;

Object.defineProperty(obj, 'name', {
  get() {
    console.log('Getting name');
    return value;
  },
  set(newValue) {
    console.log('Setting name to', newValue);
    value = newValue;
  }
});

obj.name = 'Alice'; // Setting name to Alice
console.log(obj.name); // Getting name, Alice

Proxy 则是一种更强大的代理机制，它可以拦截并改变对目标对象的各种操作，包括属性的读取、赋值、删除、函数调用等。通过创建一个代理对象，可以通过在代理对象上定义各种拦截器（handler）来捕获并处理对目标对象的操作。代理对象中的拦截器提供了对底层操作的细粒度控制，并可以以声明式的方式进行操作。

示例：

const obj = {
  name: 'Alice'
};

const handler = {
  get(target, prop, receiver) {
    console.log('Getting', prop);
    return Reflect.get(target, prop, receiver);
  },
  set(target, prop, value, receiver) {
    console.log('Setting', prop, 'to', value);
    return Reflect.set(target, prop, value, receiver);
  }
};

const proxy = new Proxy(obj, handler);

proxy.name = 'Bob'; // Setting name to Bob
console.log(proxy.name); // Getting name, Bob

可以看到，通过 Proxy，我们可以定义拦截器来控制对目标对象的各种操作。当访问或修改属性时，拦截器会被触发并执行相应的自定义逻辑。相比之下，Object.defineProperty 只能拦截单个属性的读取、赋值和删除，并且需要显式地为每个属性定义拦截逻辑。

总结来说，Object.defineProperty 是一种定义和拦截对象属性的简单方式，而 Proxy 提供了更灵活和强大的机制，可以拦截和改变更多类型的对象操作。在需要对整个对象或多个属性进行拦截和代理时，Proxy 是更常用和推荐的选择。

详解版

Proxy 和 Object.defineProperty 的异同点可以概括如下：

相同点

都可以用来拦截和控制对对象的访问、赋值和删除操作。
都可以定义自定义的行为逻辑来处理拦截操作。

不同点

1. 功能不同

Object.defineProperty 可以对单个属性进行拦截，而 Proxy 可以对整个对象进行拦截，并且可以拦截更多类型的操作，如函数调用等。

当涉及到功能上的区别时，下面的代码示例将更详细地展示 Proxy 和 Object.defineProperty 在拦截和代理对象操作方面的不同行为。

首先，我们将使用 Object.defineProperty 来拦截和代理单个属性的读取和写入：

const obj = {};
let value;

Object.defineProperty(obj, 'name', {
  get() {
    console.log('Getting name');
    return value;
  },
  set(newValue) {
    console.log('Setting name to', newValue);
    value = newValue;
  }
});

obj.name = 'Alice'; // Setting name to Alice
console.log(obj.name); // Getting name, Alice

现在，我们将使用 Proxy 来拦截和代理整个对象的操作：

const obj = {
  name: 'Alice',
  age: 25
};

const handler = {
  get(target, prop, receiver) {
    console.log('Getting', prop);
    return Reflect.get(target, prop, receiver);
  },
  set(target, prop, value, receiver) {
    console.log('Setting', prop, 'to', value);
    return Reflect.set(target, prop, value, receiver);
  },
  deleteProperty(target, prop) {
    console.log('Deleting', prop);
    return Reflect.deleteProperty(target, prop);
  }
};

const proxy = new Proxy(obj, handler);

proxy.name = 'Bob'; // Setting name to Bob
console.log(proxy.name); // Getting name, Bob

delete proxy.age; // Deleting age
console.log(proxy.age); // undefined

从以上示例中可以看出，在功能上的区别点包括：

Object.defineProperty 可以用来定义单个属性的拦截，通过设置 get 和 set 来拦截属性的读取和赋值。而 Proxy 可以拦截整个对象的操作，包括属性的访问、赋值和删除等。
Object.defineProperty 需要显式地为每个属性设置拦截逻辑，而 Proxy 是通过定义代理对象上的拦截器函数来处理所有操作，使得代码更集中和声明式。
Proxy 的拦截器函数可以拦截各种类型的操作，如函数调用、属性枚举等，而 Object.defineProperty 不能拦截其他类型的操作。
Proxy 在捕获和处理对象操作时具有更多的灵活性，但相对来说性能也稍逊于 Object.defineProperty。

这些示例展示了 Proxy 和 Object.defineProperty 在功能上的区别，以及它们在拦截和代理对象操作方面的不同行为。

2. 语法和使用方式不同

Object.defineProperty 是通过设置属性描述符对象来定义拦截行为，而 Proxy 是创建一个代理对象并定义拦截器函数来实现拦截。

下面是一些代码示例，用于详细说明 Proxy 和 Object.defineProperty 在语法和使用方式上的差异：

使用 Object.defineProperty：

const obj = {};

Object.defineProperty(obj, 'name', {
  value: 'Alice',
  writable: true,
  enumerable: true,
  configurable: true
});

console.log(obj.name); // Alice

obj.name = 'Bob'; // 此处将成功修改属性值

for (let key in obj) {
  console.log(key); // name
}

delete obj.name; // 此处删除成功

console.log(obj.name); // undefined

使用 Proxy：

const obj = { name: 'Alice' };

const handler = {
  get(target, prop) {
    console.log('Getting', prop);
    return target[prop];
  },
  set(target, prop, value) {
    console.log('Setting', prop, 'to', value);
    target[prop] = value;
  },
  deleteProperty(target, prop) {
    console.log('Deleting', prop);
    delete target[prop];
  }
};

const proxy = new Proxy(obj, handler);

console.log(proxy.name); // Getting name, Alice

proxy.name = 'Bob'; // Setting name to Bob

for (let key in proxy) {
  console.log(key); // 此处不会输出任何内容
}

delete proxy.name; // Deleting name

console.log(proxy.name); // Getting name, undefined

从上述示例中可以看出，在语法和使用方式上的不同点包括：

Object.defineProperty 是通过设置属性描述符对象来定义拦截行为。通过直接操作对象的属性描述符，可以控制属性的可写性、可枚举性、可配置性等。
Proxy 是通过创建代理对象并定义拦截器函数来实现拦截。代理对象会在访问和操作时调用拦截器函数，根据不同的拦截行为进行处理。Proxy 可以更灵活地处理各种类型的操作，如属性的读取、设置、删除，函数调用等。
使用 Object.defineProperty 需要显式为每个属性设置拦截行为，繁琐且不灵活。而 Proxy 通过统一的拦截器函数处理所有操作，提供了更集中和声明式的方式来定义拦截行为。
在语法上，Object.defineProperty 在设置属性描述符时可以一次性定义多个属性，而 Proxy 则是针对整个对象进行拦截操作。
Object.defineProperty 是较早的 JavaScript 特性，较低版本的 JavaScript 中也可使用。而 Proxy 是 ES6 中新增的特性，可能在某些较旧的 JavaScript 环境中不被支持。

这些示例展示了 Proxy 和 Object.defineProperty 在语法和使用方式上的差异，以及它们在定义拦截行为方面的不同方式。

3. 支持程度不同

Object.defineProperty 在较低版本的 JavaScript 中支持较好，而 Proxy 是 ES6 中新增的特性，可能在某些较旧的 JavaScript 环境中不被支持。

Proxy 和 Object.defineProperty 在支持程度上有一些差异。下面是一些代码示例，用于详细说明它们在支持程度方面的不同表现：

Proxy 的支持程度：

if (typeof Proxy !== 'undefined') {
  const obj = { name: 'Alice' };
  const handler = {};

  const proxy = new Proxy(obj, handler);
  console.log(proxy.name); // Alice
} else {
  console.log('Proxy is not supported');
}

Object.defineProperty 的支持程度：

const obj = {};
if (typeof Object.defineProperty !== 'undefined') {
  Object.defineProperty(obj, 'name', {
    value: 'Alice',
    writable: true,
    enumerable: true,
    configurable: true
  });
  console.log(obj.name); // Alice
} else {
  console.log('Object.defineProperty is not supported');
}

上述示例展示了对 Proxy 和 Object.defineProperty 进行支持性检查并执行相应的代码。通过检查这两个功能是否被定义（即类型是否为 ‘undefined’），我们可以确定它们是否受到支持。

请注意，Proxy 是 ES6 中新增的功能，因此在较旧的 JavaScript 环境中可能不受支持。而 Object.defineProperty 是较早的 JavaScript 特性，基本上支持所有的现代浏览器。

通过执行上述代码并观察输出结果，您可以了解当前环境对 Proxy 和 Object.defineProperty 的支持程度，并根据需要采取适当的兼容性处理。

4. 性能差异

通常情况下，Object.defineProperty 的性能比 Proxy 更高效，因为 Proxy 需要动态地捕获和处理对象的每个操作。

Proxy 和 Object.defineProperty 在性能方面也存在一些差异。下面是一些代码示例，用于详细说明它们在性能上的表现差异：

Proxy 的性能表现：

const obj = { name: 'Alice' };
const handler = {};

const proxy = new Proxy(obj, handler);

console.time('Proxy');
for (let i = 0; i < 10000; i++) {
  console.log(proxy.name);
}
console.timeEnd('Proxy');

Object.defineProperty 的性能表现：

const obj = {};
Object.defineProperty(obj, 'name', {
  value: 'Alice',
  writable: true,
  enumerable: true,
  configurable: true
});

console.time('Object.defineProperty');
for (let i = 0; i < 10000; i++) {
  console.log(obj.name);
}
console.timeEnd('Object.defineProperty');