链式调用依赖方法返回this实现串联,原型链用于共享方法以节省内存、统一逻辑;es6 class本质仍是原型操作,应将操作方法置于原型并返回this,仅终止方法如getresult()不返回this。

链式调用本身不依赖原型链,而是靠方法返回 this 实现;原型链的作用是让多个实例共享同一套可链式调用的方法,从而减少内存占用、统一行为逻辑。真正的“流畅”来自两者配合:原型上定义方法 + 每个方法返回当前实例。
方法必须返回 this 才能串联
无论方法写在构造函数内部还是原型上,只要执行完操作后返回 this,后续就能继续调用。原型上的方法天然被所有实例复用,比在构造函数里重复绑定更轻量。
- 写在原型上:节省内存,适合通用行为(如 add、set、filter)
- 写在构造函数内:适合需闭包保存私有状态的场景,但会为每个实例创建新函数
- 错误示范:
add(num) { this.value += num; }—— 缺少return this,链就断了
原型链让链式接口保持一致性
把链式方法挂到 Constructor.prototype 上,所有实例都能访问同一份逻辑。比如 jQuery 的 $('div').css().on().show() 就是靠原型方法逐层返回 jQuery 实例实现的。
- 避免在每次 new 时重新定义函数,提升性能
- 便于后期统一修改或扩展(改一处,全部生效)
- 支持继承:子类原型链指向父类实例后,也能延续链式调用(前提是父类方法都返回 this)
ES6 class 是语法糖,底层仍是原型操作
class Calculator 看似新语法,编译后仍是向 Calculator.prototype 添加方法。所以你写的 add() { ... return this; },实际就是往原型上加了一个返回 this 的函数。
- constructor 中初始化状态(如
this.value = 0) - 其余操作方法全放原型,统一返回
this - 若需链式终止并取值,单独提供一个不返回 this 的方法(如
getResult()或end())
注意边界:不是所有方法都该参与链式
有些操作天然不适合链式,比如异步结果获取、销毁动作、返回原始值的计算。强行返回 this 反而破坏语义。
- 推荐做法:只对“配置类”“构建类”“流式处理类”启用链式(如表单验证器、请求构造器)
- 避免过长链条(超过 4–5 个点),可拆成变量或封装为新方法
- 调试时注意:链式调用中某步出错,堆栈定位可能略模糊,建议关键步骤加简单日志或断点











