Proxy和DefineProperty的区别

发布时间：2023-05-18

一、基本介绍

Proxy和DefineProperty均为ES6中的特性，用于对JavaScript对象进行拦截和控制。其中Proxy可以对整个对象进行拦截，而DefineProperty只能对对象的单个属性进行控制。

二、Proxy和DefineProperty的应用场景

Proxy和DefineProperty均可以被应用于以下场景：

  1. 数据验证和处理：可以通过拦截和控制来对数据进行验证和处理，防止出现错误或者异常。
  2. 数据提供：可以通过拦截和控制来对数据进行提供，可以使用这两种特性来实现数据动态生成或者获取，从而提高效率。
  3. 数据监控：可以通过拦截和控制来对数据进行监控，当数据发生变化时可以及时响应。

三、Proxy和DefineProperty的不同之处

1、操作对象上的属性时

在操作对象上的属性时，Proxy可以拦截到更多的操作，比如in操作符、delete操作符、for...in循环、Object.keys方法等，而DefineProperty只能拦截到一些关键的操作，比如get、set、enumerable等。

Proxy代码示例：

const obj = {
  name: 'Alice',
  age: 18
};
const proxyObj = new Proxy(obj, {
  has(target, key) {
    console.log(`拦截了in操作符：${key}`);
    return key in target;
  },
  deleteProperty(target, key) {
    console.log(`拦截了delete操作符：${key}`);
    delete target[key];
    return true;
  },
  ownKeys(target) {
    console.log('拦截了Object.keys方法');
    return Reflect.ownKeys(target);
  },
  forin(target) {
    console.log('拦截了for...in循环');
    return Reflect.forin(target);
  }
});
console.log('name' in proxyObj);  // 拦截了in操作符：name true
console.log('age' in proxyObj);   // 拦截了in操作符：age true
delete proxyObj.name;             // 拦截了delete操作符：name
console.log(proxyObj.name);       // undefined
console.log(Object.keys(proxyObj));  // 拦截了Object.keys方法 ["age"]
for (const key in proxyObj) {     // 拦截了for...in循环
  console.log(key, proxyObj[key]);
}

DefineProperty代码示例：

const obj = {
  name: 'Alice',
  age: 18
};
Object.defineProperty(obj, 'name', {
  get() {
    console.log('拦截了get操作');
    return this._name;
  },
  set(value) {
    console.log('拦截了set操作');
    this._name = value;
  },
  enumerable: true
});
console.log(obj.name);   // 拦截了get操作 "Alice"
obj.name = 'Bob';        // 拦截了set操作
console.log(obj.name);   // 拦截了get操作 "Bob"
console.log(obj.age);    // 18

2、操作数组时

在操作数组时，Proxy和DefineProperty的表现也有所不同。Proxy可以拦截到push、pop、shift、unshift等操作，而DefineProperty只能拦截到length、[index]这些相对简单的操作。

Proxy代码示例：

const arr = [1, 2, 3];
const proxyArr = new Proxy(arr, {
  set(target, key, value) {
    console.log(`拦截了数组元素的设置操作：${key}:${value}`);
    if (Number(key) === key && key >= 0) { // 如果key为数字
      if (parseInt(key) === target.length) { // 如果key等于数组长度
        target.push(value);
      } else {  // 如果key小于数组长度
        target[key] = value;
      }
    } else {  // 如果key为字符串或者其他类型
      target[key] = value;
    }
    return true;
  },
  deleteProperty(target, key) {
    console.log(`拦截了数组元素的删除操作：${key}`);
    if (Number(key) === key && key >= 0 && parseInt(key) === target.length - 1) {
      target.pop();
    } else {
      delete target[key];
    }
    return true;
  }
});
proxyArr.push(4);               // 拦截了数组元素的设置操作：3:4
console.log(proxyArr);          // [1, 2, 3, 4]
delete proxyArr[3];             // 拦截了数组元素的删除操作：3
console.log(proxyArr);          // [1, 2, 3]

DefineProperty代码示例：

const arr = [1, 2, 3];
Object.defineProperty(arr, 'length', {
  set(value) {
    console.log('拦截了数组长度的设置操作');
    this._length = value;
    if (value < this._length) {
      this.length = value;
    }
  },
  get() {
    console.log('拦截了数组长度的获取操作');
    return this._length || 0;
  }
});
console.log(arr.length);         // 拦截了数组长度的获取操作 3
arr.length = 2;                  // 拦截了数组长度的设置操作
console.log(arr.length, arr);    // 拦截了数组长度的获取操作 2 [1, 2]
arr.pop();                       // 2
console.log(arr.length, arr);    // 拦截了数组长度的获取操作 2 [1, 2]

3、对比性能

在对比性能方面，普遍认为Proxy比DefineProperty更慢一些，可以使用以下代码测试：

Proxy和DefineProperty性能对比代码示例：

let obj = new Proxy({}, {
  get(target, key, receiver) {
    return Reflect.get(target, key, receiver);
  },
  set(target, key, value, receiver) {
    return Reflect.set(target, key, value, receiver);
  }
});
let start = Date.now();
for (let i = 0; i < 1000000; i++) {
  obj[i] = i;
}
let end = Date.now();
console.log(`Proxy耗时：${end - start}ms`);
obj = {};
Object.defineProperty(obj, 'test', {
  set(value) {
    this._test = value;
  },
  get() {
    return this._test;
  }
});
start = Date.now();
for (let i = 0; i < 1000000; i++) {
  obj.test = i;
}
end = Date.now();
console.log(`DefineProperty时：${end - start}ms`);

总结

以上是Proxy和DefineProperty的区别的详细阐述。从不同的角度对二者进行了对比。需要注意的是，虽然Proxy能够拦截到更多的操作，但是其性能相比DefineProperty较差，需要根据具体的需求进行选择。

推荐文章