如何使用Proxy监听全局变量stage从undefined变为已定义

嘿，刚上手Proxy踩点小坑太正常啦，别担心～我来帮你捋捋问题出在哪，再给你几个可行的方案。

首先看你当前代码的核心问题：你创建的st对象里的stage是全局stage的值副本，不是引用——也就是说，当全局stage后来被赋值为实例时，st.stage还是原来的undefined，Proxy自然不会触发任何拦截逻辑。而且你现在的Proxy只在访问st.stage的时候才会触发get处理器，但你并没有主动去访问它，所以哪怕st.stage变了，也不会自动执行代码。

那怎么实现「当全局stage不再是undefined时自动执行代码」呢？这里有两种常用思路：

方案1：用Proxy监控stage的赋值操作（推荐） #

如果stage是通过你自己的代码赋值的，那可以把stage包裹在一个对象里，用Proxy的set拦截器监听赋值动作，一旦赋值为非undefined的值，就立即执行实例化逻辑：

let myObj;
// 把stage放在对象里，因为基本类型无法直接被Proxy代理
const stageWrapper = {
  stage: undefined
};

const proxyHandler = {
  set(target, prop, value) {
    // 当给stage赋值，且值不是undefined时
    if (prop === 'stage' && value !== undefined) {
      myObj = new SomeObjThatNeedsStage(value);
      console.log('SomeObjThatNeedsStage 已成功实例化！');
    }
    // 完成赋值（必须做这一步，否则赋值不会生效）
    target[prop] = value;
    return true; // 告诉JS引擎赋值成功
  }
};

const proxiedStage = new Proxy(stageWrapper, proxyHandler);

// 模拟后续初始化stage的场景
setTimeout(() => {
  // 通过proxy赋值，会触发上面的set拦截器
  proxiedStage.stage = new Stage();
}, 1000);

方案2：用Proxy监控stage的访问操作（适配外部修改场景） #

如果stage可能被外部代码直接修改（不通过你的Proxy），那可以在get拦截器里做检查——每次访问stage时，判断它是否已经是非undefined，如果是且还没创建myObj，就执行实例化：

let stage = undefined;
let myObj;

const stageWrapper = {
  get stage() {
    return stage;
  },
  set stage(value) {
    stage = value;
  }
};

const proxyHandler = {
  get(target, prop) {
    if (prop === 'stage' && target[prop] !== undefined && !myObj) {
      myObj = new SomeObjThatNeedsStage(target[prop]);
      console.log('检测到stage已初始化，创建SomeObjThatNeedsStage实例');
    }
    return target[prop];
  }
};

const proxiedStage = new Proxy(stageWrapper, proxyHandler);

// 模拟外部直接修改全局stage的场景
setTimeout(() => {
  stage = new Stage();
  // 访问一下proxiedStage.stage，触发get拦截器的检查逻辑
  proxiedStage.stage;
}, 1000);

关键注意点 #

• 基本类型（比如let stage = undefined这种原始值）不能直接被Proxy代理，必须用对象包裹，因为Proxy只能代理引用类型。
• 记得在拦截器里返回正确的值或返回true（set拦截器），否则会导致属性访问/赋值异常。

如果还有细节没搞懂，随时唠～

内容的提问来源于stack exchange，提问作者Jared Tomaszewski