链式调用是什么写法？一文看懂前端开发中的流畅语法

你有没有在写 JavaScript 的时候，看到别人一行代码连续点好几次方法，像 $('.box').fadeIn().css('color', 'red').text('Hello') 这样的写法？这种写法看起来很酷，也挺常见的，它就是“链式调用”。

链式调用的本质

链式调用不是某种特殊的语法，而是一种编程模式。它的核心在于：每个方法执行完之后，不是返回某个计算结果，而是返回对象本身（也就是 this），这样就可以继续调用下一个方法。

举个生活中的例子，就像你在咖啡店点单：先选“大杯”，再选“加糖”，然后“去冰”，最后“打包带走”。每一步操作都基于同一个订单，而不是每次重新下单。链式调用就是让一个对象能“连续被操作”。

怎么写出链式调用？

关键在于方法要返回 this。来看一个简单的 DOM 操作类：

function Element(id) {
  this.node = document.getElementById(id);
}

Element.prototype.html = function(content) {
  this.node.innerHTML = content;
  return this; // 返回实例本身
};

Element.prototype.css = function(property, value) {
  this.node.style[property] = value;
  return this;
};

Element.prototype.hide = function() {
  this.node.style.display = 'none';
  return this;
};

用了这个类之后，你就可以这样写：

const el = new Element('myDiv');
el.html('新内容').css('color', 'blue').hide();

每一行都不用重复写 el.，逻辑紧凑，读起来也顺。

jQuery 就是靠这个火起来的

早年 jQuery 能迅速流行，链式调用功不可没。以前操作 DOM 又啰嗦又难看，比如要改样式、加事件、再隐藏，得写三四行。用了 jQuery 后，直接 $('#btn').addClass('active').on('click', handler).fadeOut()，一气呵成，开发者直呼“真香”。

注意别滥用

虽然链式调用写起来爽，但也不是所有情况都适合。比如某个方法需要返回具体数据，像 getLength() 或 getValue()，这时候再返回 this 就乱套了。该断就断，别为了链而链。

另外，调试时如果链太长，出错了定位起来麻烦。可以适当拆成几步，或者利用浏览器断点逐个查看。

现代 JS 中的应用

现在很多库都在用这种模式。比如动画库 GSAP、图表库 Chart.js，甚至一些 UI 框架的配置方法，都能看到链式调用的身影。它让 API 更直观，也更符合人“一步步操作”的思维习惯。

如果你自己写工具类，也可以考虑加上这个设计。只要确保每个方法末尾 return this;，就能让用户享受“一口气点到底”的快感。