面试题：JavaScript代理对象兼容性挑战下的Polyfill实现

Question

假设在某些不支持代理对象的旧浏览器环境中，需要实现类似代理对象的功能，你会如何编写一个Polyfill来解决这个兼容性问题？请阐述思路并给出关键代码示例。

Answer 1

思路

1. 理解代理对象功能：代理对象（Proxy）主要功能是可以对目标对象的操作进行拦截和自定义行为。比如读取属性、设置属性、枚举属性等操作。
2. 模拟拦截操作：在不支持Proxy的旧浏览器中，我们可以通过自定义函数来模拟这些拦截行为。对于对象属性的读取，可以通过定义一个函数来包装原对象，在函数内部处理属性读取逻辑。对于属性设置，同样可以在自定义函数内进行相关逻辑处理。

关键代码示例

// 模拟代理对象的Polyfill
function createPolyfillProxy(target, handler) {
    // 存储代理后的对象
    let proxy = {};

    // 处理get操作
    function get(target, prop) {
        if (typeof handler.get === 'function') {
            return handler.get(target, prop);
        }
        return target[prop];
    }

    // 处理set操作
    function set(target, prop, value) {
        if (typeof handler.set === 'function') {
            return handler.set(target, prop, value);
        }
        target[prop] = value;
        return true;
    }

    // 为代理对象定义getter和setter
    for (let prop in target) {
        Object.defineProperty(proxy, prop, {
            get: function() {
                return get(target, prop);
            },
            set: function(value) {
                return set(target, prop, value);
            }
        });
    }

    return proxy;
}

// 使用示例
let target = { name: 'John' };
let handler = {
    get(target, prop) {
        console.log(`Getting property ${prop}`);
        return target[prop];
    },
    set(target, prop, value) {
        console.log(`Setting property ${prop} to ${value}`);
        target[prop] = value;
        return true;
    }
};

let polyfillProxy = createPolyfillProxy(target, handler);
console.log(polyfillProxy.name);
polyfillProxy.name = 'Jane';