链式调用需每个方法显式返回this，否则默认返回undefined导致TypeError；正确做法是每步return this，结尾用result()等方法返回结果。
在 JavaScript 中，方法链式调用依赖于每个方法返回 this（即当前实例），从而让下一次调用能继续作用于同一对象。核心是：**每个可链式调用的方法必须显式返回 this**，否则链会中断（因为默认返回 undefined）。
为什么需要手动 return this？
JavaScript 中普通函数或类方法默认不自动返回 this。即使修改了内部状态，若没写 return this，调用后结果就是 undefined，后续点号调用会报 Cannot read property 'xxx' of undefined。
例如：
❌ 错误示范（无法链式）：class Calculator {
constructor(value = 0) {
this.value = value;
}
add(n) {
this.value += n;
// 忘记 return this → 返回 undefined
}
}
const calc = new Calculator();
calc.add(2).add(3); // TypeError: Cannot read property 'add' of undefined
正确实现链式调用的三要素
-
每个可链方法必须以
return this结尾（不能只改状态） -
避免在链中返回其他值（如数字、字符串、新对象），否则链断裂；如需取值，可单独设一个
end()或value()方法收尾 -
注意箭头函数不能用作类方法，因为它没有自己的
this，会捕获外层上下文，导致this指向错误
完整可运行示例
class Calculator {
constructor(value = 0) {
this.value = value;
}
add(n) {
this.value += n;
return this; // ✅ 关键：返回 this 才能继续链
}
multiply(n) {
this.value *= n;
return this;
}
subtract(n) {
this.value -= n;
return this;
}
// 收尾方法：返回最终结果，不返回 this（链在此终止）
result() {
return this.value;
}
}
// 使用：
const total = new Calculator(10)
.add(5) // this → 实例
.multiply(2) // this → 同一实例
.subtract(4) // this → 同一实例
.result(); // → 26
进阶提示：兼容非链式使用与类型安全
如果希望方法既能链式又能单独调用（比如调试时只调 add(3)），仍需坚持 return this —— 这不影响单次使用，只是多返回了对象本身。
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
立即学习“Java免费学习笔记（深入）”；
在 TypeScript 中，可为链式方法标注返回类型 this（而非 Calculator），支持子类继承后链式不丢失类型：
add(n: number): this {
this.value += n;
return this;
}
这样，子类调用 add 后仍能访问子类特有方法，不会被限定死在父类类型上。
