Question

可能重复：
how does jquery chaining work?

这是你在jQuery代码中看到的正常事情：

$("div.selected").html("Blah.");

因此，在上面的代码中，在函数$()中，它有一个名为html()的函数。而我不明白的是，我通常会做的是：

funcA("blah");  //normal function, cool.
funcA.funcB("blah");  //normal function in an object, still cool.

现在这令人困惑：

funcA("blah").funcB("blah")  //huh??

funcB如何知道funcA中的论据？ jQuery如何实现这一目标？

感谢。

Answer 1

执行funcA("blah").funcB("blah")后，无论funcB次返回，都会调用funcA。所以你funcA返回一个有funcB的对象，然后调用它。

在jQuery的情况下，大多数jQuery函数返回jQuery对象，因此可以根据需要链接函数调用。许多jQuery函数旨在修改返回的jQuery对象的内容。因此，在您的示例中，对html()的调用“不知道”传递给$()函数的内容的情况并非如此。相反，$()函数返回一个jQuery对象，该对象指向与给定选择器匹配的DOM元素。然后，对该jQuery对象上的函数的进一步调用将影响那些选定的元素。

Answer 2

//function returning an object is a possibility. bar has access to elem because of
// the shared scope
function foo ( elem ) {
    return {
        bar : function () {
            return elem.id;
        }
    };
}

在这一个中，foo函数返回一个包含你想要的任何方法的对象。因此，当您致电foo时，您会收到：

{
    bar : function () {
        return elem.id;
    }
}

您致电elem时出现

foo。如果您要在console.log( elem )的顶部添加bar，则会看到它与您传递给foo的内容相同。

//this is kinda how jQuery does it:
var foo = (function() {
    function foo ( elem ) {
        this.elem = elem;
    }

    foo.prototype.bar = function () {
        return this.elem.id;
    };

    return function ( elem ) {
        return new foo( elem );
    };
}());

这有点复杂，实际上分为两部分。

function foo ( elem ) {
    this.elem = elem;
}

foo.prototype.bar = function () {
    return this.elem.id;
};

谁不喜欢与典型继承名称混合的原型继承？无论如何......函数既充当常规函数又充当构造函数。含义，当使用new关键字调用时，会发生两件特殊事情：

this

foo

foo.prototype

foo.prototype（除非foo返回一个对象）

请注意，foo.prototype不是神奇的值。它就像任何其他对象属性一样。

因此，在foo函数/构造函数中，我们只是设置foo.prototype.elem，而不是直接设置foo.prototype。可以这样想（有点不准确，但它会这样做）：foo是产品的蓝图。每当你想要制作更多东西时，你都会使用蓝图 - 复制里面的东西，传递它。在this内，foo.prototype指的是蓝图的复制。

但是，通过在foo上明确设置值，我们正在改变蓝图本身。每当调用foo时，都会使用此更改的蓝图调用它。

最后，一旦foo完成，就会返回复制（重复的蓝图，但在elem完成之后）。此复制包含原始蓝图以及我们可能添加的所有其他内容 - 在此示例中为var foo = (function() { ... return function ( elem ) { return new foo( elem ); }; }());。

(function () {
    console.log( 'meep' );
}());

//is the equivalent of:
var something = function () {
    console.log( 'meep' );
};
something();
something = undefined; //we can no longer use it

//and of this
function () {
    console.log( 'meep' );
}(); //<--notice the parens
//however, it's considered good practice to wrap these self-executing-anonymous-functions
// in parens

我们创建一个无名函数并立即执行它。

var answer = (function () {
    return 42;
}());
answer ==== 42;

var counter = (function () {
    var c = 0;
    return function () {
        return c++;
    };
}());
//counter is now a function, as a function was returned
counter(); //0
counter(); //1
counter(); //2...

与所有其他功能一样，它们可以返回值。这些值可以捕获到变量中。

var foo = (function () {
    ...
    return function ( elem ) {
        ...
    };
}());

所以：

foo

返回一个接收参数的函数，该函数现已分配给return new foo( elem );。

该职能的内部：

new

是为了确保我上面提到的特殊条件 - 通过明确执行function foo ( elem ) { this.elem = elem; } foo.prototype.bar = function () {...};操作，确保制作蓝图的新副本。这实际上可以这样复制：

foo

只要您始终使用new关键字致电{{1}}。

Answer 3

jquery中的大多数函数返回一个包含一组元素的jquery对象。 html并不完全知道$()的参数，更多的是$()的结果具有一组基于传递给$()的参数创建的元素。

在funcA和funcB的示例中，您可以轻松地funcA返回一个具有名为funcB的函数的对象。此对象还可以包含传递给funcA的值，然后调用funcB也可以“知道”该值。

http://jsfiddle.net/ScENm/

Answer 4

function funcA(arg1) {

    var enclosedVariable= arg1;

    return {
       funcB: function () {
          alert(enclosedVariable);
       }
    };
}

这是一个快速而肮脏的例子。 ^^

funcA接受一个参数并保存它然后返回一个包含单个函数的对象。它已经被封闭了＃34;现在funcB可以访问此内容。

从技术上讲，您甚至不需要保存它...... arg1也可以funcB使用。{/ p>

Answer 5

你应该研究链接，这就是你所描述的。您可以谷歌"jQuery chaining"开始使用。另请查看jQuery's pluging tutorial了解更多信息

Answer 6

一个函数不是什么特别的东西，你可以在一个对象中返回一个函数。举个简单的例子：

function $() {
    return {
        html: function() {
        }
    };
}

$().html(); // You just called the function!

jQuery没有任何特殊之处。当你在jQuery中调用一个没有返回值的函数时，它通常会返回它被调用的jQuery对象，如下所示：

var obj = {
    doSomething: function() {
        return this;
    },
    doSomethingElse: function() {
        alert('Hi!');
    }
};

obj.doSomething().doSomethingElse(); // Alerts "Hi!"

因为它只是一个对象。

Answer 7

链接通常基于方法应返回的对象来完成。如果object A是class A的实例，并且其中的方法返回object A，则返回的对象可以再次应用于同一个类，并且可以以链接方式排列。或者说class A的对象返回class B的对象，然后返回的对象可以应用于class B的方法。

objectOfA->methodOfA(arg)->methodOfB(args);

在这种情况下，如果objectOfA->methodOfA(arg)返回class B的对象，那么可以调用class B的方法并将其链接到上面。

在你的情况下，

$('div.selected').html('Blah ..')

这里$('div.selected')返回一个jquery元素对象（或对象数组）;因为该方法仅适用于jquery的元素对象，所以可以应用方法.html()。它只是像其他编程语言一样链接。

对于PHP，这种情况看起来像

$class->method1(argument)->method(2)

在这种情况下，如果类A有两个方法method1，方法2和方法1返回它自己的实例，那么方法2再次适用于它。

这也可以与功能相关。让我们假设我有这样的功能;

def function1(name):
    return name

def function2(arg):
    print len(name)

现在，这两个函数可以简单地链接为

function2(function1('My Name is blah ...'))

由于function1返回一个值，因此值的类型必须与function2的输入参数匹配，这就是对象的工作方式。

jQuery如何进行方法链接？

7 个答案: