defineProperty和Proxy基础功能及性能对比

在JavaScript中，若想对一个对象进行拦截、监听或是改变其属性的状态，可以使用defineProperty和Proxy两个API。这两个API都是功能很强大的，但又各有所长。本文将详细讲解它们的基础功能和性能对比。

defineProperty的基础功能

在介绍defineProperty的基础功能之前，需要明确一点：defineProperty只能对已经存在的对象的属性进行监听和改变，也就是我们只能通过defineProperty修改已有的属性。

defineProperty的基础功能是定义一个对象的属性，并且可以为该属性定义一系列的特征。示例代码如下：

let obj = {};
Object.defineProperty(obj, 'name', {
  value: 'Tom',
  writable: false, // 不可修改
  configurable: false, // 配置不可删除
  enumerable: true // 枚举
});

console.log(obj.name); // 输出Tom
obj.name = 'John'; // 不会修改name属性
delete obj.name; // 不会删除name属性

上面的代码中，我们通过Object.defineProperty方法定义了obj对象的name属性，其中包含四个特征：value、writable、configurable和enumerable。

value特征：指定该属性的值，如果没有指定则默认为undefined。
writable特征：指定该属性是否可以被修改，默认为true。如果指定为false，则这个属性的值不能被修改。
configurable特征：指定该属性是否可以被删除，默认为true。如果指定为false，则这个属性不能被delete删除，而且不能再次使用Object.defineProperty修改该属性的任何特性。
enumerable特征：指定该属性是否可以使用for...in语句循环出来，默认为true。如果指定为false，则该属性不能被枚举。

通过对上述特征的组合，我们可以控制对象的属性，从而实现对对象的监听、拦截、过滤等功能。

Proxy的基础功能

Proxy是ES6中新引入的功能点，它也可以实现对对象的监听、拦截、过滤等功能。不同于defineProperty方法的是，Proxy是新建一个对象来进行代理操作，并且可以对该对象的任何属性进行操作。

下面是使用Proxy来监听一个对象的示例代码：

let obj = { name: 'Tom', age: 18 };

let proxy = new Proxy(obj, {
  get(target, key) {
    console.log(`get ${key}: ${target[key]}`);
    return target[key];
  },
  set(target, key, value) {
    console.log(`set ${key}: ${value}`);
    target[key] = value;
  }
});

proxy.name; // 输出 get name: Tom
proxy.age = 20; // 输出 set age: 20
console.log(proxy.age); // 输出 get age: 20

上面的代码中，我们基于obj对象创建了一个proxy对象，并且在proxy对象上定义了get和set方法。当我们通过proxy对象获取或修改一个属性时，get和set方法会被调用，从而实现对该对象的监听、拦截、过滤等功能。

注意，Proxy的代理操作可以拦截的不仅仅是get和set方法，还有很多其他操作。具体的代理操作可查看MDN文档。

defineProperty和Proxy的性能对比

尽管defineProperty和Proxy都可以实现对对象的拦截、监听等功能，但它们在性能上有较大的差异。这也是很多开发者在实际项目中选择使用Proxy的原因之一。

在后续的性能对比中，我们将通过两个小实验来验证defineProperty和Proxy的性能差异。

实验一

首先，我们分别定义了一个obj对象和一个proxy对象，并且在两个对象中定义了1000个属性：

let obj = {};
for (let i = 0; i < 1000; i++) {
  Object.defineProperty(obj, `key${i}`, {
    value: i
  });
}

let proxy = new Proxy({}, {
  get(target, key) {
    return target[key];
  },
  set(target, key, value) {
    target[key] = value;
  }
});
for (let i = 0; i < 1000; i++) {
  proxy[`key${i}`] = i;
}

接着，我们在两个对象中均获取随机数（0~999）属性的值100万次，并记录代码运行的耗时：

let start = Date.now();
for (let i = 0; i < 1000000; i++) {
  let randomKey = `key${Math.floor(Math.random() * 1000)}`;
  obj[randomKey];
}
console.log(`defineProperty: ${Date.now() - start}ms`);

start = Date.now();
for (let i = 0; i < 1000000; i++) {
  let randomKey = `key${Math.floor(Math.random() * 1000)}`;
  proxy[randomKey];
}
console.log(`Proxy: ${Date.now() - start}ms`);

最后，我们观察代码输出结果：

defineProperty: 1002ms
Proxy: 12431ms

通过这个实验，我们发现defineProperty比Proxy在执行相同的操作时要快得多。

实验二

接下来，我们定义一个空对象，并在该对象上利用defineProperty和Proxy方法分别定义1000个属性属性，并记录代码运行的耗时：

let start = Date.now();
let obj = {};
for (let i = 0; i < 1000; i++) {
  Object.defineProperty(obj, `key${i}`, {
    value: i
  });
}
console.log(`defineProperty: ${Date.now() - start}ms`);

start = Date.now();
let proxy = new Proxy({}, {
  get(target, key) {
    return target[key];
  },
  set(target, key, value) {
    target[key] = value;
  }
});
for (let i = 0; i < 1000; i++) {
  proxy[`key${i}`] = i;
}
console.log(`Proxy: ${Date.now() - start}ms`);

最后，我们观察代码输出结果：