Object.freeze对URL的searchParams.set()无效，如何强制克隆URL对象？

问题原因 #

你遇到的情况本质是：

• Object.freeze() 和 Object.seal() 仅作用于对象自身的可枚举属性，无法限制内部嵌套对象或内置方法的行为。URL实例的searchParams是一个返回URLSearchParams实例的getter，冻结URL本身无法约束这个内部对象的修改。
• URLSearchParams的set/delete等方法是内置逻辑，这些方法修改的是对象内部状态，而非对象的可枚举属性，所以即使冻结URLSearchParams实例，也拦不住这些方法调用。

解决方案 #

要实现真正不可修改的URL对象，可通过包装器+Proxy代理拦截所有修改操作，或者直接构建只读的URL接口：

方案1：带拦截的URL包装器

创建冻结的URL包装对象，用Proxy拦截searchParams的修改方法，调用时直接抛出错误：

function createImmutableURL(urlStr) {
  const originalUrl = new URL(urlStr);
  // 冻结原始URL实例的自身属性
  Object.freeze(originalUrl);

  // 为searchParams创建只读代理
  const readonlySearchParams = new Proxy(originalUrl.searchParams, {
    get(target, prop) {
      // 拦截所有修改类方法
      if (['set', 'delete', 'append', 'sort', 'clear'].includes(prop)) {
        throw new Error('无法修改不可变URL的查询参数');
      }
      // 读取类方法/属性正常返回
      return target[prop];
    }
  });

  // 返回冻结的包装对象，替换searchParams为只读代理
  return Object.freeze({
    ...originalUrl,
    searchParams: readonlySearchParams
  });
}

// 使用示例
const immutableUrl = createImmutableURL('http://example.com');
console.log(immutableUrl.toString()); // 输出: http://example.com/

try {
  immutableUrl.searchParams.set('a', 'b'); // 抛出错误
} catch (e) {
  console.error(e.message); // 输出: 无法修改不可变URL的查询参数
}
console.log(immutableUrl.toString()); // 仍为 http://example.com/

方案2：基于原始字符串的只读接口

直接基于原始URL字符串构建只读属性，每次获取状态都从原始字符串生成，彻底避免修改：

function createImmutableURL(urlStr) {
  const baseUrl = new URL(urlStr);
  // 预计算只读属性值
  const origin = baseUrl.origin;
  const pathname = baseUrl.pathname;
  const search = baseUrl.search;

  return Object.freeze({
    get href() { return urlStr; },
    get origin() { return origin; },
    get pathname() { return pathname; },
    get search() { return search; },
    toString: () => urlStr,
    get searchParams() {
      // 返回冻结且拦截修改的URLSearchParams副本
      const sp = new URLSearchParams(search);
      Object.freeze(sp);
      return new Proxy(sp, {
        get(target, prop) {
          if (['set', 'delete', 'append', 'sort', 'clear'].includes(prop)) {
            throw new Error('无法修改不可变查询参数');
          }
          return target[prop];
        }
      });
    }
  });
}

效果验证 #

以上两种方案中，任何尝试修改URL或其searchParams的操作都会抛出错误，完全符合你“冻结后修改报错”的需求。

内容的提问来源于stack exchange，提问作者Get Off My Lawn