[JavaScript知识库] 如何理解链式调用？

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 如何理解链式调用？ -> 正文阅读

[JavaScript知识库]如何理解链式调用？

首先在一个简单函数里：

var fun1 = function() {

     return {}
}

在这个返回的对象里现在有两个函数：

var fun1 = function() {

            return {
                fun2 : function() {
                    console.log(2);
                },
                fun3 : function() {
                    console.log(3);
                }
            }
        }

要调用里面的fun2或fun3就要先获得这两个方法所在的对象，而这个对象又是fun1函数的返回值，我们要做的就是调用fun1函数，得到的返回值就是那个对象，正常的函数调用是这样的：

var obj = fun1();
        obj.fun2();
        obj.fun3();

链式调用是这样的：

obj.fun2().fun3()

这种能在调用fun2后立即调用fun3函数，就需要fun2函数的返回值是一个对象

因为只有对象才可以调用里面的函数

fun2和fun3函数的宿主对象都是obj，只要让fun2的返回值变成obj就可以了，那如何变呢？

只要用this关键字就可以，因为this关键字永远指向当前函数的调用者，这里的调用者是obj。

所以只要在两个函数末尾返回this 关键字就可以了：

var fun1 = function() {

            return {
                fun2 : function() {
                    console.log(2);
                    return this;
                },
                fun3 : function() {
                    console.log(3);
                    return this;
                }
            }
        }