链式调用的原理

在搬砖的过程中，可能会遇到很多的链式调用，最常见的那就是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();

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

小知识：

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

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

******************************************************************************************************

*********************************demo地址！欢迎star*********************************************

******************************************************************************************************

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