链式调用的核心是每个方法返回 this,使后续调用可延续;需在原型上定义方法以共享内存;异步操作应返回 promise 并配合终结方法(如 exec、value)获取结果。

JS 原型对象实现链式调用,核心是让每个方法都返回 this(即当前实例),从而能连续调用其他方法。
让方法返回 this
这是链式调用最基础、最关键的一步。只要每个操作方法末尾写 return this;,就能把调用权交还给当前对象。
- 普通方法默认返回
undefined,一旦返回了undefined,后续调用就会报错:Cannot read property 'xxx' of undefined -
this指向当前实例,返回它就维持了对象上下文 - 注意:不能在 setter 类方法里误加
return this后又想返回别的值——链式调用和返回业务结果通常要取舍,多数场景优先保链式
在原型上定义方法
把方法挂到构造函数的 prototype 上,所有实例共享,节省内存,也符合面向对象习惯。
- 避免在构造函数内用
this.xxx = function() {...}定义方法(会为每个实例重复创建) - 示例:
function Calculator() { this.value = 0; }
Calculator.prototype.add = function(n) { this.value += n; return this; };
Calculator.prototype.multiply = function(n) { this.value *= n; return this; };
new Calculator().add(5).multiply(2).value; // → 10
支持异步操作时的注意事项
如果某个方法是异步的(如发请求、定时器),直接 return this 无法等待结果,需配合 Promise 或 async/await。
- 常见做法:让异步方法返回 Promise,并在 then 中继续返回
this(或封装成链式友好的 Promise 方法) - 例如:
fetchData().then(() => { /* 处理后 return this */ });但更推荐统一返回 Promise 实例,再提供.end()或.run()触发执行 - 纯同步链式 + 异步终结点 是较清爽的设计,比如:
query.where(...).limit(...).exec(),只有exec返回 Promise
可选:添加终结方法获取结果
链式调用常用于配置阶段,最后用一个“终结方法”来真正执行并返回结果,避免中途误用返回值。
- 像 jQuery 的
.val()、Lodash 的.value()、Axios 的.then()都属于这类 - 终结方法一般不返回
this,而是返回计算值、Promise、DOM 元素等实际产出 - 这样既保持链式流畅,又明确区分“配置”和“执行”两个阶段











