链式调用的原理

偏执的太偏执、 2021-08-13 21:19 380阅读 0赞

在搬砖的过程中，可能会遇到很多的链式调用，最常见的那就是jquery中链式调用，如下图：

$("p").css("color","red").height("100px");

那么问题来了，它是怎么实现的呢？

## 原理 ##

首先咱们先用js来模拟一下这个效果：

class Person {
            constructor(name) {
                this.name = name;
            }
            eat() {
                console.log(this.name + '正在吃饭');
                return this;
            }
            drink() {
                console.log(this.name + '正在喝水');
                return this;
            }
            end() {
                console.log(this.name + '测试完毕');
                return this;
            }
        }
        var p = new Person("果果");
        p.eat().drink().end();

![20190923160538654.png][]

现在，咱们仔细观察一下，这个类，其实就是每一个方法的后面添加了return this，将当前的this指针return回去，那么就可以继续调用函数中的方法了，实现链式调用；

**小知识**：

（1） 函数在没有显示的return的情况下，默认return undefined

（2）this是在一个类或者一个对象中，指向的是当前的类或者对象，那么返回this之后，就可以继续调用当前对象中属性和方法了

\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*

\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*[demo地址][demo]！欢迎star\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*

原创不易，自由转载，保留出处

[20190923160538654.png]: /images/20210813/eeab042bccaf4d2d9b50d2d0a479be5d.png
[demo]: https://github.com/GuoYuFu123/js-library/blob/master/tools/chainCall/chainCall.html