jQuery方法链式调用的原理

在使用jQuery库的时候，是可以连续调用多个方法的，这是怎么实现的呢？如：

$("div").width("100px").height("100px");

1、实现原理：

这里使用原生js来模拟这样的效果：

let fun = {
    fun1: function() {
        console.log("fun1");
        return this;
    },

    fun2: function() {
        console.log("fun2");
        return this;
    },

    fun3: function() {
        console.log("fun3");
        return this;
    }
}

fun.fun1().fun2().fun3();

这样就可以连续的输出字符串的fun1、fun2、fun3 了，原因是在每个方法后面加了一个return this。

如果没有加上return this语句的话，那么执行完一个函数之后，会默认返回undefined，这个是js内部自己隐式添加的。返回undefined的时候，再调用另一个方法肯定就会报错，因为undefined是没有方法的。

2、为什么要返回this？

因为在一个对象里面，this指向的是对象本身，而我们连续调用方法的时候，这些方法都是在对象内部定义的，所以this是可以访问到这些方法。