我无法理解jQuery的链接作品[关闭](I am not able to understand h

我无法理解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; 它会表现得一样。

如果你想创建对象的多个实例会的问题，但是这是面向对象的技术问题，不是方法链接 。

Answer 2:

在return的每一个功能是一个jQuery对象。每个jQuery对象将有参考的所有功能，如show/hide ，所以你可以简单的写

jQuery("#myDiv")         //returns a jQuery object 
    .attr("id", "_id")   //sets the ID and returns the jQuery object
    .hide()              //Hides the element with ID myDiv and returns jQuery object
    .show();             //show the element with ID myDiv and returns jQuery object

Answer 3:

想想看这样的：

var myLib = {
    foo: function() {
        alert("FOO!");
        return this;
    },
    bar: function() {
        alert("BAR!");
        return this;
    }
}

myLib.foo().bar();

jQuery的不这样做完全一样，但是这是获得一个链接功能的一种方式。这尤其是一个不存储有关当前对象的信息。

jQuery对象有返回修改后的jQuery对象，允许你调用它的多个方法的方法。

Answer 4:

如果我没有记错，jQuery使用一个经典方法链内它的原型有一个例外，它也有一个enhanced构造在它的init原型。下面是一个简单的模式：

function myQuery(elem){
   return new myQuery.prototype.init(elem);
};

myQuery.prototype.init = function(elem) { // the constructor "enhanced"
    this.elem = elem;
};

// now copy the myQuery prototypes into init.prototype
myQuery.prototype.init.prototype = myQuery.prototype;

// here comes the chainable prototypes:

myQuery.prototype.start = function() {
    this.elem.className = 'start';
    return this; // returning the instance allows further chaining
};

myQuery.prototype.finish = function() {
    this.elem.className = 'finish';
    return this;
};

// now use it
myQuery(document.body).start().finish();

链接原型更有效，因为你可以重复使用每个实例的原型方法。 jQuery是经常初始化多次在文档中，如果你每次创建新对象与所有可链接的方法，它会增加不必要的开销和可能的泄漏。