jQuery链式操作实现原理

jQuery 是一个快速，小巧，功能丰富的 JavaScript 库。jQuery 的一个特点就是链式操作。本文粗略讲解其原理。

• 相信大家对链式 jQuery 的链式操作并不陌生，在这里简单的介绍一下链式操作的实现思路（用原生 JS 实现链式操作）。
• 首先我们观察一下 jQuery 的基本语法

$(selector).action();

• 基本语法由选择器和执行函数组成，jQuery 选择器返回的是一个自建对象（Object），jQuery 函数的方法是属于这个对象的，也就是说这些方法只能由这个对象来调用，所以实现链式操作只需要在执行一个函数后返回对象就行了。
• 示例如下：

JavaScript

var obj = {
    sayName: function (name) {
        comsole.log("i am " + name);
        return this;
    },
    action: function (action) {
        comsole.log("i am " + action);
        return this;
    },
};

• 这里的return this返回了一个对象，通过obj.sayName("jQuery").actoin("chaining")就可以实现连续调用函数了。
• 其实并非是 jQuery 中才有这种链式操作，原生 js 中同样有的，比如有很多字符串和数组的方法都会返回字符串或者数组（字符串通过包装类返回字符串对象并拥有方法），例如反序输出字符串：

var str="Wellcome"；
str.split('').reverse().join('')

• 综上所述，在一个方法中返回一个 Object 类型的值就能实现类似 jQuery 的链式操作。

本文作者：KylinLee

本文链接：https://kylin.dev/2019/06/03/jQuery链式操作实现原理

版权声明：本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。