面试题：JavaScript 复杂场景下 Proxy 与 Reflect 的深度优化

Question

在一个大型的 JavaScript 应用中，有多个模块会频繁访问和修改一个复杂的嵌套对象。为了提高性能和可维护性，需要使用 Proxy 和 Reflect 来实现以下功能：1. 缓存对象属性的访问结果，避免重复计算；2. 在属性发生变化时，自动通知相关模块进行更新。请详细描述实现思路，并给出关键代码片段。

Answer 1

实现思路

1. 缓存属性访问结果：使用 Proxy 的 get 陷阱来拦截对象属性的访问。当访问一个属性时，首先检查缓存中是否已经存在该属性的计算结果，如果存在则直接返回，否则进行计算并将结果存入缓存。
2. 属性变化通知：使用 Proxy 的 set 陷阱来拦截对象属性的设置操作。当属性值发生变化时，遍历所有相关模块的回调函数并执行，以通知它们进行更新。同时，为了避免缓存过期，属性值变化时需要清除相关属性的缓存。

关键代码片段

const cache = new Map();
const subscribers = new Set();

function subscribe(callback) {
    subscribers.add(callback);
}

function unsubscribe(callback) {
    subscribers.delete(callback);
}

function notifySubscribers() {
    subscribers.forEach(callback => callback());
}

function createProxy(target) {
    return new Proxy(target, {
        get(target, property) {
            if (cache.has(property)) {
                return cache.get(property);
            }
            const value = Reflect.get(target, property);
            cache.set(property, value);
            return value;
        },
        set(target, property, value) {
            const oldValue = Reflect.get(target, property);
            const result = Reflect.set(target, property, value);
            if (result && oldValue!== value) {
                cache.delete(property);
                notifySubscribers();
            }
            return result;
        }
    });
}

// 使用示例
const complexObject = {
    nested: {
        value: 'initial'
    }
};
const proxy = createProxy(complexObject);

// 订阅更新
subscribe(() => {
    console.log('相关模块收到更新通知');
});

// 访问属性，触发缓存
console.log(proxy.nested.value);

// 修改属性，触发通知
proxy.nested.value = 'updated';