构造函数--URLSearchParams

在 JavaScript 中，构造函数是面向对象编程的重要概念。

一、什么是构造函数？

构造函数是一种特殊的函数，用于创建和初始化对象。在 JavaScript 中，构造函数通常以大写字母开头，这是一种约定俗成的命名规范。

function Person(name, age) { this.name = name; this.age = age; this.greet = function() { console.log(`Hello, my name is ${this.name}`); };}

二、new 关键字的魔法

当使用 new 调用构造函数时，JavaScript 引擎会执行以下步骤：

1. 创建一个新的空对象 {}
2. 将这个新对象的原型指向构造函数的 prototype 属性
3. 将构造函数的 this 绑定到这个新对象
4. 执行构造函数中的代码
5. 如果构造函数没有显式返回对象，则返回这个新对象

const person1 = new Person(\'Alice\', 25);person1.greet(); // 输出：Hello, my name is Alice

三、URLSearchParams

URLSearchParams 是现代 JavaScript 提供的用于处理 URL 查询字符串的构造函数。相比传统的 querystring 模块，它提供了更强大、更符合现代编程习惯的 API。

1. 基本用法

// 创建实例const params = new URLSearchParams(\'name=John&age=30\');// 获取参数console.log(params.get(\'name\')); // John// 添加参数params.append(\'gender\', \'male\');// 删除参数params.delete(\'age\');// 转换为字符串console.log(params.toString()); // name=John&gender=male

2. 与 URL 对象配合使用

const url = new URL(\'https://example.com/search?q=JavaScript\');const searchParams = url.searchParams;searchParams.append(\'page\', \'2\');console.log(url.href); // https://example.com/search?q=JavaScript&page=2

• URL 构造函数接收一个完整的 URL 字符串作为参数,它会自动解析这个 URL，将其分解为各个组成部分：
  • protocol: https:
  • hostname: example.com
  • pathname: /search
  • search: ?q=JavaScript
• searchParams 是 URL 对象的一个属性,它返回一个 URLSearchParams 对象实例
• append() 方法用于向查询字符串中添加新的参数

3. 处理数组参数

const params = new URLSearchParams();params.append(\'color\', \'red\');params.append(\'color\', \'blue\');console.log(params.getAll(\'color\')); // [\'red\', \'blue\']

四、与传统函数式编程的对比

特性 构造函数式 (URLSearchParams) 函数式 (querystring) 调用方式 new URLSearchParams() querystring.parse() API风格 面向对象 函数式 参数操作 支持增删改查 仅支持解析和序列化 编码处理 自动编码/解码 需要手动处理 浏览器兼容性 现代浏览器原生支持 Node.js特有

五、实际应用场景

1. 处理表单数据

// 浏览器环境const form = document.querySelector(\'form\');form.addEventListener(\'submit\', (e) => { e.preventDefault(); const formData = new FormData(form); const params = new URLSearchParams(formData); fetch(\'/submit\', { method: \'POST\', body: params });});

2. API请求参数处理

// 构建带查询参数的URLfunction buildApiUrl(baseUrl, queryObj) { const params = new URLSearchParams(); Object.entries(queryObj).forEach(([key, value]) => { params.append(key, value); }); return `${baseUrl}?${params.toString()}`;}