在前端开发的黄金年代，jQuery凭借其简洁的API和强大的链式调用特性，成为了无数开发者的首选工具。链式调用让代码从冗长的多次调用，变成了流畅的”一句话”操作，极大提升了开发效率和代码可读性。本文将带你彻底搞懂jQuery链式调用的实现原理，并通过实战Demo手把手教你实现自己的链式调用库。
一、先搞懂：什么是jQuery链式调用？
在开始剖析原理前，我们先看一个最经典的jQuery链式调用示例，感受它的魅力：
// 传统写法（无链式）
$('#box').css('color', 'red');
$('#box').addClass('active');
$('#box').fadeIn(1000);
// jQuery链式调用写法
$('#box').css('color', 'red').addClass('active').fadeIn(1000);
可以看到，链式调用允许我们在同一个元素对象上连续调用多个方法，无需重复获取DOM元素，代码更简洁、更易读。
二、核心原理：一句话讲透
jQuery链式调用的实现核心只有两个关键点：
1. 方法的执行上下文是当前对象：所有方法都挂载在jQuery实例（对象）上，方法内部通过this指向当前实例；
2. 每个方法执行完毕后返回当前实例（this）：方法最后通过return this将当前对象返回，使得后续方法可以继续在该对象上调用。
简单来说：方法执行完把自己”还回去”，就能继续调用下一个方法。
三、从零实现：迷你版链式调用库
为了让原理更直观，我们不依赖jQuery，自己手写一个极简的链式调用库，模拟jQuery的核心逻辑。
3.1 完整Demo代码
/**
* 迷你版链式调用库：MiniQuery
* 模拟jQuery核心链式调用原理
*/
class MiniQuery {
// 构造函数：接收选择器，获取DOM元素
constructor(selector) {
// 存储选中的DOM元素（模拟jQuery的DOM集合）
this.elements = document.querySelectorAll(selector);
// 返回实例本身（确保new调用时能链式）
return this;
}
// 方法1：设置文本内容 - 支持链式
text(content) {
// 遍历所有选中的元素，设置文本
this.elements.forEach(el => {
el.textContent = content;
});
// 核心：返回当前实例，实现链式调用
return this;
}
// 方法2：设置样式 - 支持链式
css(prop, value) {
this.elements.forEach(el => {
el.style[prop] = value;
});
return this;
}
// 方法3：添加类名 - 支持链式
addClass(className) {
this.elements.forEach(el => {
el.classList.add(className);
});
return this;
}
// 方法4：绑定点击事件 - 支持链式
click(callback) {
this.elements.forEach(el => {
el.addEventListener('click', callback);
});
return this;
}
}
// 模拟jQuery的$函数：简化实例化
function $(selector) {
return new MiniQuery(selector);
}
// 实战使用：链式调用演示
$(document).ready(() => {
// 链式调用示例：给#demo元素设置样式、文本、类名，并绑定点击事件
$('#demo')
.text('我是链式调用演示文本') // 设置文本
.css('color', '#2c3e50') // 设置文字颜色
.css('font-size', '18px') // 设置字体大小
.addClass('demo-box') // 添加类名
.click(() => { // 绑定点击事件
alert('链式调用的点击事件触发啦！');
// 事件内部也能继续链式调用
$(this).css('background-color', '#f1c40f');
});
});
3.2 HTML测试页面
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>链式调用Demo</title>
<style>
.demo-box {
padding: 20px;
border: 1px solid #ddd;
cursor: pointer;
transition: background-color 0.3s;
}
</style>
</head>
<body>
<div id="demo"></div>
<script src="mini-query.js"></script>
</body>
</html>
四、关键细节拆解
4.1 构造函数的作用
MiniQuery的构造函数接收选择器（如#demo），通过document.querySelectorAll获取DOM元素并存储在实例的elements属性中，为后续方法操作DOM提供数据支撑。
4.2 核心：return this
每个方法（text/css/addClass/click）的最后都有return this，这个this指向当前的MiniQuery实例。例如：
css(prop, value) {
this.elements.forEach(el => {
el.style[prop] = value;
});
// 返回实例本身，让后续方法能继续调用
return this;
}
当执行$('#demo').css('color', 'red')时，css方法执行完会返回$('#demo')这个实例，因此可以接着调用.addClass('active')。
4.3 模拟$函数
jQuery的$()函数本质是一个工厂函数，帮我们省略了new关键字，让调用更简洁：
function $(selector) {
return new MiniQuery(selector);
}
这样我们就能像jQuery一样，用$('#demo')代替new MiniQuery('#demo')。
4.4 特殊场景：不支持链式的方法
并非所有jQuery方法都支持链式调用，比如text()不传参数时是”获取文本”，此时需要返回文本值而非this：
// 扩展：支持获取/设置文本的双向功能
text(content) {
// 如果不传content，返回第一个元素的文本（不支持链式）
if (typeof content === 'undefined') {
return this.elements[0]?.textContent;
}
// 传了content，设置文本并返回this（支持链式）
this.elements.forEach(el => {
el.textContent = content;
});
return this;
}
// 使用示例
const demoText = $('#demo').text(); // 获取文本（无链式）
$('#demo').text('新文本'); // 设置文本（支持链式）
五、总结
核心要点回顾
- 链式调用的本质：方法执行完毕后返回当前实例（
return this），让后续方法能在同一个实例上调用； - jQuery的实现逻辑：所有DOM操作方法都挂载在jQuery实例上，通过
this指向实例，最终返回this； - 灵活扩展：需要返回具体值的方法（如获取文本、获取属性）可以不返回
this，放弃链式调用以实现功能。
链式调用不仅是jQuery的特色，也是现代前端开发中常见的设计模式（如Promise、Axios等都用到了类似思想）。理解其原理，不仅能帮你更好地使用jQuery，也能让你在自定义工具库时写出更优雅的代码。
