JavaScript中能否使用Proxy代理字符串、数字等原始类型值？

为什么直接传入原始值会报错 #

ECMAScript 规范明确规定 Proxy 构造函数的第一个参数 target 必须是对象类型（包括普通对象、数组、函数、包装对象等），原始值（字符串、数字、布尔值、null、undefined、Symbol、BigInt）不属于对象类型，所以直接传入会抛出类型错误。

可行实现方案 #

你可以用对应类型的包装对象作为 Proxy 的 target，配合陷阱函数模拟原始值的行为，同时代理原型方法，不需要全局修改原型。

示例：代理字符串原始值 #

// 将原始值转为包装对象作为 Proxy 的 target
const strProxy = new Proxy(new String('I am a string'), {
  // 捕获属性访问，代理原型方法
  get(target, prop, receiver) {
    // 拦截原型方法 toUpperCase
    if (prop === 'toUpperCase') {
      return () => 'CUSTOM UPPERCASE RESULT';
    }
    // 其他属性/方法正常返回，注意绑定原始包装对象的上下文
    const value = Reflect.get(target, prop, receiver);
    return typeof value === 'function' ? value.bind(target) : value;
  },
  // 让代理对象在参与运算、隐式转换时表现和原始字符串一致
  valueOf(target) {
    return target.valueOf();
  },
  toString(target) {
    return target.toString();
  }
});

// 测试效果
console.log(strProxy.toUpperCase()); // 输出自定义内容：CUSTOM UPPERCASE RESULT
console.log(strProxy.slice(0,4)); // 正常调用其他原型方法：I am
console.log(strProxy + ' test'); // 隐式转换正常：I am a string test

通用封装方案 #

可以封装一个通用函数，自动处理所有类型原始值的代理：

function proxyPrimitive(primitiveVal) {
  let wrapper;
  // 根据原始值类型生成对应包装对象
  switch (typeof primitiveVal) {
    case 'string':
      wrapper = new String(primitiveVal);
      break;
    case 'number':
      wrapper = new Number(primitiveVal);
      break;
    case 'boolean':
      wrapper = new Boolean(primitiveVal);
      break;
    case 'symbol':
      wrapper = Object(primitiveVal);
      break;
    case 'bigint':
      wrapper = Object(primitiveVal);
      break;
    default:
      throw new TypeError('无法代理 null/undefined 类型的原始值');
  }

  return new Proxy(wrapper, {
    get(target, prop, receiver) {
      // 在这里统一添加你需要的原型方法代理逻辑
      // 示例：拦截所有方法调用，打印日志
      const val = Reflect.get(target, prop, receiver);
      if (typeof val === 'function') {
        return (...args) => {
          console.log(`调用方法 ${prop}, 参数：`, args);
          return val.apply(target, args);
        };
      }
      return val;
    },
    // 兼容隐式转换
    [Symbol.toPrimitive](target) {
      return target.valueOf();
    }
  });
}

// 测试用例
const numProxy = proxyPrimitive(123);
console.log(numProxy.toFixed(2)); // 先打印调用日志，再输出 123.00
console.log(numProxy + 456); // 运算行为正常，输出 579

注意事项 #

• null 和 undefined 没有对应的包装对象，无法用该方案代理
• 严格相等判断时，代理对象和原始值不相等：proxyPrimitive('a') === 'a' 会返回 false，因为代理本身是对象类型，如果需要兼容可以在使用时手动调用 .valueOf() 取原始值。

内容的提问来源于stack exchange，提问作者Siddharth Shyniben