如何用JavaScript原型实现可链式调用的嵌套函数（类似jQuery格式）

嘿，这个需求太常见了——想做出像jQuery那样丝滑的链式调用，用原型确实是最优雅的实现方式之一，我来给你一步步拆解怎么搞。

核心思路拆解 #

要实现mainFunction().childFunction()这种调用，本质上需要满足两个关键条件：

1. mainFunction()调用后要返回一个包含子方法的实例对象
2. 子方法执行后最好返回this（当前实例），这样才能继续链式调用更多方法

具体实现步骤 #

1. 定义构造函数（承载实例状态）

先写一个构造函数，用来存储每个实例独有的数据（比如自定义属性、选中的DOM元素等）：

// 构造函数，负责初始化实例专属属性
function MainCore(initValue) {
  // 这里可以放实例独有的状态，比如初始值
  this.value = initValue || 0;
}

2. 给原型挂载子方法

把所有需要链式调用的子方法挂载到构造函数的原型上，这样所有实例都能共享这些方法，避免重复创建浪费内存：

// 在原型上添加第一个子方法
MainCore.prototype.add = function(num) {
  this.value += num;
  console.log(`当前值：${this.value}`);
  // 关键！返回当前实例，才能继续链式调用
  return this;
};

// 再添加一个子方法
MainCore.prototype.multiply = function(num) {
  this.value *= num;
  console.log(`当前值：${this.value}`);
  return this;
};

3. 封装工厂函数（简化调用）

用户不想每次都写new MainCore()，所以我们封装一个顶层函数，直接返回构造函数的实例：

function mainFunction(initValue) {
  // 隐藏new操作，让调用更简洁直观
  return new MainCore(initValue);
}

4. 测试链式调用

现在就能像你想要的那样调用了：

// 链式调用示例：初始值为2，加3，再乘以2
mainFunction(2).add(3).multiply(2);
// 输出：
// 当前值：5
// 当前值：10

进阶：贴近jQuery的DOM操作示例 #

如果是做类似jQuery的DOM操作，逻辑也是一样的，只是构造函数里处理DOM元素：

function DOMCore(selector) {
  // 初始化选中的DOM元素集合
  this.elements = document.querySelectorAll(selector);
}

// 隐藏元素的方法
DOMCore.prototype.hide = function() {
  this.elements.forEach(el => el.style.display = 'none');
  return this;
};

// 添加类名的方法
DOMCore.prototype.addClass = function(className) {
  this.elements.forEach(el => el.classList.add(className));
  return this;
};

// 顶层调用函数（模仿jQuery的$）
function $ (selector) {
  return new DOMCore(selector);
}

// 链式调用：隐藏所有p标签，然后给它们加个类
$('p').hide().addClass('hidden-paragraph');

关键注意点 #

• 原型挂载方法：不要把方法写在构造函数内部，否则每个实例都会创建一份方法副本，浪费内存
• 返回this：所有需要链式调用的方法必须返回this，这样调用完方法后依然持有当前实例的引用
• 工厂函数封装：让用户不用显式写new，调用体验更友好

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