JavaScript对象管家Proxy怎么使用

在现代JavaScript开发中，Proxy 是一个强大且灵活的工具，它允许开发者拦截并自定义对象的基本操作。通过使用 Proxy，我们可以实现诸如数据验证、日志记录、性能监控等功能，而无需修改原始对象的代码。本文将深入探讨 Proxy 的使用方法，并通过丰富的示例代码帮助读者掌握这一强大的特性。

1. 什么是Proxy？

Proxy 是 ES6 引入的一个新特性，它允许你创建一个代理对象，用于拦截并自定义对目标对象的操作。Proxy 可以拦截诸如属性访问、赋值、枚举、函数调用等操作，并在这些操作发生时执行自定义的逻辑。

1.1 Proxy的基本语法

Proxy 的基本语法如下：

const proxy = new Proxy(target, handler);

• target：目标对象，即你要代理的对象。
• handler：一个对象，包含了一系列的“陷阱”（trap）方法，用于拦截对目标对象的操作。

1.2 常见的陷阱方法

handler 对象中可以定义多种陷阱方法，以下是一些常见的陷阱方法：

• get(target, prop, receiver)：拦截属性读取操作。
• set(target, prop, value, receiver)：拦截属性赋值操作。
• has(target, prop)：拦截 in 操作符。
• deleteProperty(target, prop)：拦截 delete 操作符。
• apply(target, thisArg, argumentsList)：拦截函数调用。
• construct(target, argumentsList, newTarget)：拦截 new 操作符。

2. 使用Proxy拦截属性访问

2.1 拦截属性读取

我们可以使用 get 陷阱方法来拦截对目标对象属性的读取操作。以下是一个简单的示例：

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

const handler = {
  get(target, prop, receiver) {
    if (prop === 'age') {
      return target[prop] + ' years old';
    }
    return target[prop];
  }
};

const proxy = new Proxy(target, handler);

console.log(proxy.name); // 输出: Alice
console.log(proxy.age);  // 输出: 25 years old

在这个示例中，当我们访问 proxy.age 时，get 陷阱方法会被触发，并返回一个自定义的字符串。

2.2 拦截属性赋值

我们可以使用 set 陷阱方法来拦截对目标对象属性的赋值操作。以下是一个示例：

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

const handler = {
  set(target, prop, value, receiver) {
    if (prop === 'age' && typeof value !== 'number') {
      throw new TypeError('Age must be a number');
    }
    target[prop] = value;
    return true;
  }
};

const proxy = new Proxy(target, handler);

proxy.age = 30; // 正常赋值
console.log(proxy.age); // 输出: 30

proxy.age = 'thirty'; // 抛出错误: TypeError: Age must be a number

在这个示例中，当我们尝试将 proxy.age 赋值为非数字时，set 陷阱方法会抛出一个错误。

3. 使用Proxy拦截函数调用

3.1 拦截函数调用

我们可以使用 apply 陷阱方法来拦截对目标函数的调用。以下是一个示例：

function sum(a, b) {
  return a + b;
}

const handler = {
  apply(target, thisArg, argumentsList) {
    console.log(`Calling function with arguments: ${argumentsList}`);
    return target(...argumentsList);
  }
};

const proxy = new Proxy(sum, handler);

console.log(proxy(2, 3)); // 输出: Calling function with arguments: 2,3
                          // 输出: 5

在这个示例中，当我们调用 proxy(2, 3) 时，apply 陷阱方法会被触发，并输出调用函数的参数。

3.2 拦截构造函数调用

我们可以使用 construct 陷阱方法来拦截对目标构造函数的调用。以下是一个示例：

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

const handler = {
  construct(target, argumentsList, newTarget) {
    console.log(`Creating instance with arguments: ${argumentsList}`);
    return new target(...argumentsList);
  }
};

const ProxyPerson = new Proxy(Person, handler);

const alice = new ProxyPerson('Alice', 25);
console.log(alice); // 输出: Creating instance with arguments: Alice,25
                    // 输出: Person { name: 'Alice', age: 25 }

在这个示例中，当我们使用 new ProxyPerson('Alice', 25) 创建一个实例时，construct 陷阱方法会被触发，并输出构造函数的参数。

4. 使用Proxy实现数据验证

Proxy 可以用于实现数据验证，确保对象的属性值符合特定的规则。以下是一个示例：

const validator = {
  set(target, prop, value) {
    if (prop === 'age') {
      if (typeof value !== 'number' || value < 0 || value > 120) {
        throw new TypeError('Age must be a number between 0 and 120');
      }
    }
    target[prop] = value;
    return true;
  }
};

const person = new Proxy({}, validator);

person.age = 25; // 正常赋值
console.log(person.age); // 输出: 25

person.age = 'thirty'; // 抛出错误: TypeError: Age must be a number between 0 and 120
person.age = 150;     // 抛出错误: TypeError: Age must be a number between 0 and 120

在这个示例中，我们使用 Proxy 来确保 person.age 的值始终是一个介于 0 到 120 之间的数字。

5. 使用Proxy实现日志记录

Proxy 可以用于实现日志记录，记录对象属性的访问和修改操作。以下是一个示例：

const logger = {
  get(target, prop, receiver) {
    console.log(`Getting property "${prop}"`);
    return target[prop];
  },
  set(target, prop, value, receiver) {
    console.log(`Setting property "${prop}" to "${value}"`);
    target[prop] = value;
    return true;
  }
};

const user = new Proxy({}, logger);

user.name = 'Alice'; // 输出: Setting property "name" to "Alice"
console.log(user.name); // 输出: Getting property "name"
                        // 输出: Alice

在这个示例中，我们使用 Proxy 来记录 user 对象的属性访问和修改操作。

6. 使用Proxy实现性能监控

Proxy 可以用于实现性能监控，记录函数调用的执行时间。以下是一个示例：

function expensiveOperation() {
  let result = 0;
  for (let i = 0; i < 1000000000; i++) {
    result += i;
  }
  return result;
}

const performanceMonitor = {
  apply(target, thisArg, argumentsList) {
    const start = performance.now();
    const result = target.apply(thisArg, argumentsList);
    const end = performance.now();
    console.log(`Function took ${end - start} milliseconds to execute`);
    return result;
  }
};

const monitoredOperation = new Proxy(expensiveOperation, performanceMonitor);

monitoredOperation(); // 输出: Function took X milliseconds to execute

在这个示例中，我们使用 Proxy 来监控 expensiveOperation 函数的执行时间。

7. 使用Proxy实现缓存

Proxy 可以用于实现缓存，避免重复计算。以下是一个示例：

const cache = new Map();

const cachedFunction = new Proxy(function expensiveOperation(n) {
  if (cache.has(n)) {
    return cache.get(n);
  }
  let result = 0;
  for (let i = 0; i < n; i++) {
    result += i;
  }
  cache.set(n, result);
  return result;
}, {
  apply(target, thisArg, argumentsList) {
    const n = argumentsList[0];
    if (cache.has(n)) {
      console.log(`Cache hit for n=${n}`);
      return cache.get(n);
    }
    console.log(`Cache miss for n=${n}`);
    return target.apply(thisArg, argumentsList);
  }
});

console.log(cachedFunction(100000000)); // 输出: Cache miss for n=100000000
                                       // 输出: 4999999950000000
console.log(cachedFunction(100000000)); // 输出: Cache hit for n=100000000
                                       // 输出: 4999999950000000

在这个示例中，我们使用 Proxy 来实现一个缓存机制，避免重复计算 expensiveOperation 函数的结果。

8. 使用Proxy实现动态属性

Proxy 可以用于实现动态属性，根据属性名动态生成属性值。以下是一个示例：

const dynamicProperties = new Proxy({}, {
  get(target, prop, receiver) {
    if (prop === 'random') {
      return Math.random();
    }
    return Reflect.get(target, prop, receiver);
  }
});

console.log(dynamicProperties.random); // 输出: 0.123456789 (随机数)
console.log(dynamicProperties.random); // 输出: 0.987654321 (随机数)

在这个示例中，我们使用 Proxy 来实现一个动态属性 random，每次访问时都会生成一个新的随机数。

9. 使用Proxy实现不可变对象

Proxy 可以用于实现不可变对象，防止对象属性被修改。以下是一个示例：

const immutable = new Proxy({}, {
  set(target, prop, value, receiver) {
    throw new TypeError(`Cannot set property "${prop}" on immutable object`);
  },
  deleteProperty(target, prop) {
    throw new TypeError(`Cannot delete property "${prop}" from immutable object`);
  }
});

immutable.name = 'Alice'; // 抛出错误: TypeError: Cannot set property "name" on immutable object
delete immutable.name;    // 抛出错误: TypeError: Cannot delete property "name" from immutable object

在这个示例中，我们使用 Proxy 来实现一个不可变对象，任何尝试修改或删除属性的操作都会抛出错误。

10. 使用Proxy实现链式调用

Proxy 可以用于实现链式调用，使对象的方法可以连续调用。以下是一个示例：

const chainable = new Proxy({}, {
  get(target, prop, receiver) {
    if (prop === 'then') {
      return () => receiver;
    }
    return () => {
      console.log(`Called method "${prop}"`);
      return receiver;
    };
  }
});

chainable.method1().method2().method3();
// 输出: Called method "method1"
// 输出: Called method "method2"
// 输出: Called method "method3"

在这个示例中，我们使用 Proxy 来实现一个链式调用对象，每次调用方法后都会返回对象本身，从而实现链式调用。

11. 使用Proxy实现观察者模式

Proxy 可以用于实现观察者模式，当对象属性发生变化时通知观察者。以下是一个示例：

const observers = new Set();

const observable = new Proxy({}, {
  set(target, prop, value, receiver) {
    const oldValue = target[prop];
    target[prop] = value;
    if (oldValue !== value) {
      observers.forEach(observer => observer(prop, value));
    }
    return true;
  }
});

function observe(callback) {
  observers.add(callback);
}

observe((prop, value) => {
  console.log(`Property "${prop}" changed to "${value}"`);
});

observable.name = 'Alice'; // 输出: Property "name" changed to "Alice"
observable.age = 25;       // 输出: Property "age" changed to "25"

在这个示例中，我们使用 Proxy 来实现一个可观察对象，当对象的属性发生变化时，所有观察者都会收到通知。

12. 使用Proxy实现自动保存

Proxy 可以用于实现自动保存功能，当对象属性发生变化时自动保存到本地存储。以下是一个示例：

const autosave = new Proxy({}, {
  set(target, prop, value, receiver) {
    target[prop] = value;
    localStorage.setItem(prop, JSON.stringify(value));
    return true;
  },
  get(target, prop, receiver) {
    const value = localStorage.getItem(prop);
    return value ? JSON.parse(value) : target[prop];
  }
});

autosave.name = 'Alice'; // 自动保存到 localStorage
console.log(autosave.name); // 从 localStorage 读取并输出: Alice

在这个示例中，我们使用 Proxy 来实现一个自动保存对象，当对象的属性发生变化时，属性值会自动保存到 localStorage 中。

13. 使用Proxy实现权限控制

Proxy 可以用于实现权限控制，限制对对象属性的访问和修改。以下是一个示例：

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

const adminHandler = {
  get(target, prop, receiver) {
    if (prop === 'role' && target.role !== 'admin') {
      throw new Error('Access denied');
    }
    return target[prop];
  },
  set(target, prop, value, receiver) {
    if (prop === 'role' && target.role !== 'admin') {
      throw new Error('Access denied');
    }
    target[prop] = value;
    return true;
  }
};

const adminProxy = new Proxy(user, adminHandler);

console.log(adminProxy.name); // 输出: Alice
console.log(adminProxy.role); // 抛出错误: Error: Access denied

adminProxy.role = 'admin'; // 抛出错误: Error: Access denied

在这个示例中，我们使用 Proxy 来实现权限控制，只有 role 为 admin 的用户才能访问和修改 role 属性。

14. 使用Proxy实现虚拟属性

Proxy 可以用于实现虚拟属性，这些属性并不实际存在于对象中，而是通过计算或逻辑生成。以下是一个示例：

const virtualProperties = new Proxy({}, {
  get(target, prop, receiver) {
    if (prop === 'fullName') {
      return `${target.firstName} ${target.lastName}`;
    }
    return target[prop];
  },
  set(target, prop, value, receiver) {
    if (prop === 'fullName') {
      const [firstName, lastName] = value.split(' ');
      target.firstName = firstName;
      target.lastName = lastName;
    } else {
      target[prop] = value;
    }
    return true;
  }
});

virtualProperties.firstName = 'Alice';
virtualProperties.lastName = 'Smith';
console.log(virtualProperties.fullName); // 输出: Alice Smith

virtualProperties.fullName = 'Bob Johnson';
console.log(virtualProperties.firstName); // 输出: Bob
console.log(virtualProperties.lastName);  // 输出: Johnson

在这个示例中，我们使用 Proxy 来实现一个虚拟属性 fullName，它由 firstName 和 lastName 组合而成。

15. 使用Proxy实现延迟加载

Proxy 可以用于实现延迟加载，只有在访问属性时才加载数据。以下是一个示例：

const lazyLoad = new Proxy({}, {
  get(target, prop, receiver) {
    if (!target[prop]) {
      console.log(`Loading property "${prop}"`);
      target[prop] = `Value for ${prop}`;
    }
    return target[prop];
  }
});

console.log(lazyLoad.name); // 输出: Loading property "name"
                           // 输出: Value for name
console.log(lazyLoad.name); // 输出: Value for name

在这个示例中，我们使用 Proxy 来实现延迟加载，只有在访问属性时才加载数据。

16. 使用Proxy实现数据绑定

Proxy 可以用于实现数据绑定，当对象属性发生变化时自动更新视图。以下是一个示例：

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

const view = document.createElement('div');
document.body.appendChild(view);

const binding = new Proxy(data, {
  set(target, prop, value, receiver) {
    target[prop] = value;
    view.textContent = `Name: ${target.name}, Age: ${target.age}`;
    return true;
  }
});

binding.name = 'Bob'; // 更新视图: Name: Bob, Age: 25
binding.age = 30;    // 更新视图: Name: Bob, Age: 30

在这个示例中，我们使用 Proxy 来实现数据绑定，当 data 对象的属性发生变化时，视图会自动更新。

17. 使用Proxy实现事件委托

Proxy 可以用于实现事件委托，将事件处理逻辑集中到一个代理对象中。以下是一个示例：

const eventDelegator = new Proxy({}, {
  get(target, prop, receiver) {
    if (prop.startsWith('on')) {
      return (event) => {
        console.log(`Handling ${prop} event`);
        // 处理事件逻辑
      };
    }
    return target[prop];
  }
});

const button = document.createElement('button');
button.textContent = 'Click me';
document.body.appendChild(button);

button.addEventListener('click', eventDelegator.onClick);
button.click(); // 输出: Handling onClick event

在这个示例中，我们使用 Proxy 来实现事件委托，所有以 on 开头的事件处理逻辑都集中到 eventDelegator 对象中。

18. 使用Proxy实现动态方法

Proxy 可以用于实现动态方法，根据方法名动态生成方法逻辑。以下是一个示例：

const dynamicMethods = new Proxy({}, {
  get(target, prop, receiver) {
    if (prop.startsWith('say')) {
      return () => {
        const message = prop.slice(3).toLowerCase();
        console.log(`Saying: ${message}`);
      };
    }
    return target[prop];
  }
});

dynamicMethods.sayHello(); // 输出: Saying: hello
dynamicMethods.sayGoodbye(); // 输出: Saying: goodbye

在这个示例中，我们使用 Proxy 来实现动态方法，所有以 say 开头的方法都会动态生成相应的逻辑。

19. 使用Proxy实现自动补全

Proxy 可以用于实现自动补全，当访问