JS使用Proxy代理WebGL对象触发TypeError: Illegal invocation问题排查

问题出在WebGL API方法的上下文绑定上。当你通过Proxy的get捕获器直接返回WebGL对象的方法时，这些方法的this上下文会丢失——调用proxyGl.viewport()时，方法内部的this不再指向原始的WebGL上下文实例，而是指向proxyGl（或严格模式下变为undefined），而WebGL原生方法要求this必须是它自身的实例，因此触发了非法调用错误。

修复方法很直接：在get捕获器里判断如果取到的属性是函数，就把它绑定到原始的WebGL对象上再返回。修改后的createProxy函数如下：

function createProxy(glObj) {
  const handler = {
    get(target, prop, receiver) {
      console.log('FN', prop);
      const value = Reflect.get(target, prop, receiver);
      // 若为函数，绑定this到原始WebGL实例
      if (typeof value === 'function') {
        return value.bind(target);
      }
      return value;
    }
  };

  return new Proxy(glObj, handler);
}

这样修改后，调用proxyGl.viewport()时，方法内部的this依然指向原始的gl实例，完全符合WebGL API的调用要求，就不会再报错了。

内容的提问来源于stack exchange，提问作者Andre M