链式调用要求每个方法返回 this 以维持调用链，需避免遗漏 return this、构造函数返回新对象、异步中混用同步返回、this 绑定丢失等问题。
每个方法必须返回 this
链式调用的本质是让上一个方法的返回值能直接调用下一个方法。在实例方法中，this 指向当前对象，所以绝大多数链式 API 的每个方法末尾都显式写 return this。
常见错误是忘了这句，比如：
class Calculator {
constructor(value = 0) {
this.value = value;
}
add(n) {
this.value += n;
// ❌ 忘了 return this → 链式中断
}
}
修复后：
add(n) {
this.value += n;
return this; // ✅
}
注意：如果方法需要返回原始值（如 getValue()），就不要返回 this，否则会破坏链式终点逻辑 —— 这类方法通常放在链末尾，作为“求值出口”。
立即学习“Java免费学习笔记（深入）”；
避免在构造函数里返回新对象
有些开发者想“美化”初始化写法，比如这样：
function $() {
return new Query(); // ❌ 返回新实例，但脱离了调用上下文
}
// 导致 $(...).find(...).css(...) 失败，因为 $() 不是实例方法调用
正确做法是确保调用起点仍是实例本身：
- 用
class+new显式创建（最清晰） - 或工厂函数内部用
Object.assign(new ThisClass(), ...)保证原型链完整 - 避免在普通函数中
return {}或return Object.create(...)后丢失原型方法
谨慎处理异步操作
Promise 本身支持链式（.then().catch()），但如果你希望自定义方法也参与链式，就得统一返回 Promise，并在每个方法里 return this 或 return Promise.resolve(this)。
例如：
async load(url) {
const res = await fetch(url);
this.data = await res.json();
return this; // ✅ 保持链式
}
// 调用：api.load('/x').filter(...).render()
但要注意：一旦某个方法返回的是原生 Promise（比如没包装的 fetch），后续就不能直接接同步方法了。混合同步/异步链容易出错，建议分两条路径：同步链用 return this，异步链统一用 return Promise.resolve(this) 并要求用户最后用 .then() 收口。
this 绑定失效是高频坑点
当把链式方法赋值给变量或传入回调时，this 会丢失：
const btn = new Button();
const clickHandler = btn.onClick; // ❌ this 指向丢失
element.addEventListener('click', clickHandler); // 调用时报错
解决方式有三种：
- 在构造函数里绑定：
this.onClick = this.onClick.bind(this) - 用箭头函数定义方法（仅适用于 class 字段语法）：
onClick = () => { ... } - 调用时用箭头函数包装：
element.addEventListener('click', () => btn.onClick())
链式 API 对 this 稳定性极度敏感，漏绑一个方法，整条链在某些调用场景下就断了 —— 这个问题往往在线上才暴露，调试成本高。
