链式调用的基本概念

链式调用是一种编程模式，允许连续调用同一对象的多个方法。通过在每个方法末尾返回当前实例（this），开发者可以将多个操作串联成一条语句，从而提升代码可读性和简洁性。这种模式虽未被列入传统的23种设计模式，但在现代JavaScript开发中被广泛采用。

核心实现机制

链式调用的关键在于方法必须返回一个可供后续调用的对象。最常见的方式是返回 this，使得调用者可以继续访问该对象上的其他方法。

使用构造函数和原型链实现

function User() {
    this.name = '';
    this.age = 0;
}

User.prototype.setName = function(name) {
    this.name = name;
    return this; // 返回当前实例
};

User.prototype.setAge = function(age) {
    this.age = age;
    return this;
};

User.prototype.info = function() {
    console.log(`姓名：${this.name}，年龄：${this.age}`);
    return this;
};

// 链式调用示例
const user = new User();
user.setName('Alice').setAge(25).info(); // 姓名：Alice，年龄：25

基于对象字面量的实现

对于不需要创建多个实例的场景，可以直接在普通对象上实现链式调用：

const calculator = {
    value: 0,

    add(num) {
        this.value += num;
        return this;
    },

    multiply(num) {
        this.value *= num;
        return this;
    },

    result() {
        console.log(this.value);
        return this;
    }
};

calculator.add(5).multiply(2).result(); // 输出 10

利用闭包与递归函数实现流式调用

某些情况下可通过闭包封装状态，并返回函数自身以支持无限链式调用：

function createChain(start) {
    let current = start;

    function chain(nextValue) {
        current = `${current} → ${nextValue}`;
        return chain;
    }

    chain.end = function() {
        return current;
    };

    return chain;
}

const sequence = createChain(1)(2)(3)(4).end();
console.log(sequence); // 1 → 2 → 3 → 4

可选链操作符（Optional Chaining）

ES2020 引入了可选链操作符 ?.，用于安全地访问深层嵌套对象属性，避免因中间节点为 null 或 undefined 而导致程序报错。

语法形式

• obj?.prop —— 访问属性
• obj?.[expr] —— 动态属性访问
• arr?.[index] —— 数组元素访问
• func?.() —— 可选函数调用

实际应用示例

const userData = {
    profile: {
        settings: {
            theme: 'dark'
        }
    }
};

// 安全访问深层属性
console.log(userData?.profile?.settings?.theme); // 'dark'
console.log(userData?.account?.email); // undefined，不会抛出错误

// 可选函数调用
const logger = null;
logger?.('消息'); // 不执行，也不报错

// 可选数组索引
const list = [1, 2, 3];
console.log(list?.[1]); // 2
console.log(list?.[5]?.toString()); // undefined

模拟 jQuery 的链式选择器机制

jQuery 的核心优势之一就是其流畅的链式API。其内部通过巧妙设置原型链来实现既可实例化又保持方法可链的效果。

function $$(selector) {
    return new $$.fn.init(selector);
}

$$.fn = $$.prototype = {
    constructor: $$,
    
    init: function(sel) {
        const element = document.querySelector(sel);
        if (element) {
            this[0] = element;
            this.length = 1;
        } else {
            this.length = 0;
        }
        return this;
    },

    css: function(property, value) {
        if (this[0]) {
            this[0].style[property] = value;
        }
        return this; // 支持链式调用
    },

    hide: function() {
        if (this[0]) {
            this[0].style.display = 'none';
        }
        return this;
    },

    show: function() {
        if (this[0]) {
            this[0].style.display = '';
        }
        return this;
    },

    text: function(content) {
        if (this[0]) {
            this[0].textContent = content;
        }
        return this;
    }
};

// 将 init 的原型指向主原型，确保继承所有方法
$$.fn.init.prototype = $$.fn;

// 使用示例
$$('body').css('background', '#f0f0f0').text('Hello World').hide().show();

上述实现中，关键点在于：
- $$() 函数返回的是 init 的新实例；
- init.prototype 指向 $$.fn，使实例能够继承所有定义的方法；
- 每个方法都返回 this，维持链式结构。