概念

链式调用（Method Chaining）是 JavaScript 中一种常见的编程模式，允许通过连续调用对象的方法来简化代码。这种模式的核心在于每个方法返回调用对象本身（通常是 this），从而可以继续调用其他方法。

链式调用的关键在于每个方法返回当前对象（this）。这样，每次方法调用后，可以立即调用下一个方法。例如：

const obj = {method1() {// 执行逻辑return this;},method2() {// 执行逻辑return this;}
};obj.method1().method2();

优点

1. 代码简洁：减少重复代码，避免多次引用同一对象。
2. 可读性高：链式调用的代码通常更接近自然语言，易于理解。
3. 流畅接口：适合构建流畅的 API 或 DSL（领域特定语言）。

常见应用场景

1. jQuery：jQuery 是链式调用的经典例子，例如：

   $('div').addClass('active').css('color', 'red').fadeOut();
   

2. 数组操作：部分数组方法（如 map、filter）可以链式调用：

   const result = [1, 2, 3].map(x => x * 2).filter(x => x > 3);
   

3. 构建器模式：用于构造复杂对象，例如：

   const query = new QueryBuilder().select('name').from('users').where('age > 18').limit(10);
   

实现自定义链式调用

下面是一个简单的自定义链式调用的例子：

class Calculator {constructor(value = 0) {this.value = value;}add(num) {this.value += num;return this;}subtract(num) {this.value -= num;return this;}multiply(num) {this.value *= num;return this;}getResult() {return this.value;}
}const calc = new Calculator(10);
const result = calc.add(5).subtract(3).multiply(2).getResult(); // 24

注意事项

1. 不可变对象：如果需要保持对象不可变，链式调用可能不适用，因为每次方法调用都会返回新对象。
2. 调试困难：过长的链式调用可能增加调试难度，建议适度拆分。
3. 错误处理：链式调用中某个方法出错时，可能需要额外的错误处理机制。

链式调用是一种强大的模式，但需根据具体场景合理使用。

---

面试题（wxg）

var data = [{ price: 13, name: 'A-apple' },{ price: 9, name: 'B-apple' },{ price: 16, name: 'A-orange' },{ price: 10, name: 'B-orange' },{ price: 20, name: null }
];var find = function (origin) {// your code are here...
};// 查找 data 中,符合条件的数据,并进行排序
var result = find(data).where({ 'name': /^A/ }).orderBy('price', 'desc');
console.log(result);
// 预期输出: [ { price: 16, name: 'A-orange' }, { price: 13, name: 'A-apple' } ]

分析：where 函数中传递的参数表示条件，key 是 data 中的属性，value 是比较的规则（正则表达式）；orderBy 传递两个参数，第一个表示比较哪个属性，第二个是排序规则（正序或倒序）

// 原始数据
var data = [{ price: 13, name: 'A-apple' },{ price: 9, name: 'B-apple' },{ price: 16, name: 'A-orange' },{ price: 10, name: 'B-orange' },{ price: 20, name: null }
];// 实现find函数
var find = function (origin) {// 创建一个查询对象var query = {data: origin,// where方法用于过滤数据where: function(conditions) {this.data = this.data.filter(function(item) {// 遍历条件对象，筛选出符合所有条件的记录for (var key in conditions) {var condition = conditions[key];// 如果条件值是正则表达式if (condition instanceof RegExp) {if (!condition.test(item[key])) {return false;}} // 如果条件值是普通值else {if (item[key] !== condition) {return false;}}}return true;});return this; // 返回this以支持链式调用},// orderBy方法用于排序orderBy: function(field, direction) {this.data.sort(function(a, b) {var aVal = a[field];var bVal = b[field];// 处理null值if (aVal === null) aVal = 0;if (bVal === null) bVal = 0;if (direction === 'desc') {return bVal - aVal; // 降序} else {return aVal - bVal; // 升序}});return this.data; // 返回排序后的数组}};return query;
};// 查找 data 中,符合条件的数据,并进行排序
var result = find(data).where({ 'name': /^A/ }).orderBy('price', 'desc');
console.log(result);// 预期输出: [ { price: 16, name: 'A-orange' }, { price: 13, name: 'A-apple' } ]