我无法理解jQuery链是如何工作的

Question

我无法理解jQuery链是如何工作的.

jQuery("div").attr("id", "_id")
    .hide()
    .show();

我做了类似链接的事情,但我不确定它是否与jQuery使用的逻辑相同.

var fun = (function (parma) {
return function () {
    return {
        start: function () {
            console.log("start");
            return this;
        },

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

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

})();

// Working
fun().start()
    .mid()
    .last();

Answer 1

如果函数的返回值是具有方法的对象,则可以立即调用该方法.就那么简单.

由于您正在返回this,因此您将返回与调用上一个方法相同的对象.这意味着您将使用所有相同的方法返回一个对象.

想一想:

var f = {
    foo: function() {
             console.log("foo");
             return b;
         }
};

var b = {
    bar: function() {
             console.log("bar");
             return f;
         } 
};

这里我们有两个对象.

• 该f对象有一个foo返回该b对象的方法.
• 该b对象有一个bar返回该f对象的方法.

因此,在打电话之后foo,我们可以打电话bar,反之亦然.

f.foo().bar().foo().bar(); // etc

但是因为f没有bar和b没有foo,我们永远不能两次调用相同的方法.

但是如果我们只有一个对象,有两个方法,并且两个方法总是返回相同的原始对象呢？

var fb = {
    foo: function() {
             console.log("foo");
             return fb;
         },
    bar: function() {
             console.log("bar");
             return fb;
         }
};

现在我们总是返回一个包含foo和bar方法的对象,因此我们可以调用任一方法.

fb.foo().bar().bar().bar().foo().foo().bar();

所以现在唯一真正的区别是我们正在返回fb而不是this,但它并不重要,因为它们是同一个对象.上面的代码可以做return this;,它会表现相同.

如果你想创建对象的几个实例,这很重要,但这是一个面向对象技术的问题,而不是方法链.