【JS】Object.defineProperty与Proxy的对比并通过Vue2、3的实现证明Proxy性能优于Object.defineProperty

一、Object.defineProperty

这里只是简单描述，具体请看另一篇文章：Object.defineProperty。

Object.defineProperty 是 JavaScript 中用于定义或修改对象属性的功能强大的方法。它可以精确地控制属性的行为，如是否可枚举、可配置、可写等。

基本用法

Object.defineProperty(obj, prop, descriptor)

Object.defineProperty 方法接受三个参数：

1. 『目标对象』：要在其上定义属性的对象。
2. 『属性名称』：要定义或修改的属性名称。
3. 『描述符对象』：属性描述符对象，用于描述该属性的行为。
   属性描述符对象可以包含以下键：
   value：属性的值。默认为 undefined。
   writable：属性是否可写。默认为 false。
   configurable：属性是否可配置。默认为 false。
   enumerable：属性是否可枚举。默认为 false。
   get：属性的 getter 函数。如果没有 getter，值为 undefined。
   set：属性的 setter 函数。如果没有 setter，值为 undefined。

用例

1. 定义一个只读属性

let obj = {
   };

Object.defineProperty(obj, 'message', {
   
    value: 'Hello, world!',
    writable: false
});

console.log(obj.message); // 输出 "Hello, world!"
obj.message = 'Hi!'; // 无效，因为属性是只读的
console.log(obj.message); // 仍然输出 "Hello, world!"

2. 定义一个不可枚举属性

let obj = {
   };

Object.defineProperty(obj, 'message', {
   
    value: 'Hello, world!',
    enumerable: false
});

console.log(obj.message); // 输出 "Hello, world!"
console.log(Object.keys(obj)); // 输出 [], 因为属性不可枚举

3. getter与setter

let obj = {
   };
let value = 'Hello, world!';

Object.defineProperty(obj, 'message', {
   
    get() {
   
        return value;
    },
    set(newValue) {
   
        value = newValue;
    },
    enumerable: true,
    configurable: true
});

console.log(obj.message); // 输出 "Hello, world!"
obj.message = 'Hi!';
console.log(obj.message); // 输出 "Hi!"

4. 定义不可配置属性

let obj = {
   }