如何让浏览器执行JS代码时用自定义Proxy替代window作为全局对象？

在浏览器环境中，未声明的变量赋值/读取默认会绑定到window对象，要让这类操作指向自定义的Proxy对象，有几种可行但带局限性的方法：

使用with语句 #

with语句会将指定对象添加到当前作用域链的顶端，当访问未声明的变量时，会优先从该对象中查找或赋值。示例代码如下：

const proxy = new Proxy({}, {
  get(target, prop) {
    console.log(`读取属性：${prop}`);
    return target[prop];
  },
  set(target, prop, value) {
    console.log(`设置属性：${prop} = ${value}`);
    target[prop] = value;
    return true; // 必须返回true表示设置成功
  }
});

with(proxy) {
  a = 10; // 触发proxy的set方法
  console.log(a); // 触发proxy的get方法，输出10
}

但with存在明显缺陷：

• 严格模式下会直接报错，无法使用；
• 会降低代码可读性与性能，JS引擎无法对with块内的代码做优化；
• 容易引发变量名冲突问题。

其他局限性说明 #

如果要在全局层面完全替代window的作用，目前没有完美的原生实现：

• 模块作用域中，顶层变量默认不会挂载到window，但也无法直接让未声明变量指向自定义Proxy；
• 严格模式下，未声明变量的赋值操作会直接抛出ReferenceError，根本不会绑定到window，自然也无法转向Proxy。

总结：只有with语句能实现你要的效果，但它的局限性很大，不建议在生产代码中使用。

内容的提问来源于stack exchange，提问作者Hit and Run