jQuery如何进行方法链接？ [英] How can jQuery do method chaining?

问题描述

可能重复：

jquery链接如何工作？

这是正常的你会在jQuery代码中看到的东西：

This is a normal thing you would see in a jQuery code:

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

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

So, in the above code, in the function $(), it has a function called html(). And what I don't understand is, what I normally will do is:

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

现在这令人困惑：

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

funcB 如何知道 funcA ？

jQuery如何实现这一目标？

How can funcB knows the arguments in funcA?
How can jQuery achieve this?

谢谢。

推荐答案

//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 function返回一个包含你想要的任何方法的对象。因此，当您拨打 foo 时，您会收到：

In this one, the foo function returns an object containing whatever methods you wish. So when you call foo, you receive this:

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

elem foo 时出现$ c>。如果您要在栏的顶部添加 console.log（elem），您会发现它是与传递给 foo 的内容相同。

elem is present from your call to foo. If you were to add a console.log( elem ) at the top of bar, you'd see that it's the same thing as what you passed to 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 );
    };
}());

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

This is a little more complex, and actually divided into two.

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

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

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

Who doesn't love prototypical inheritance mixed with classical inheritance names? Anyway...functions act as both regular functions and as constructors. Meaning, when called with the new keyword, two special things happen:

1. foo 内的是指 foo.prototype


2. foo.prototype （除非 foo 返回对象）

1. this inside of the foo refers to a freshly made copy of foo.prototype
2. foo.prototype is returned (unless foo returns an object)

请注意 foo.prototype 不是魔术值。它就像任何其他对象属性一样。

Note that foo.prototype isn't a magic value. It's just like any other object property.

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

So, inside the foo function/constructor, we're merely setting foo.prototype.elem, but not directly. Think of it like this (a little inaccurate, but it'll do): foo.prototype is the blueprint of a product. Whenever you wish to make more, you use the blueprint - duplicate what's inside, pass it along. Inside of foo, this refers to such a replication of the blueprint.

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

However, by explicitly setting values on foo.prototype, we're altering the blueprint itself. Whenever foo is called, it'll be called with this altered blueprint.

最后，一次 foo 完成后，返回复制（重复的蓝图，但在 foo 之后用它完成的东西）。此复制包含原始蓝图以及我们可能添加的所有其他内容 - 在此示例中， elem 。

Finally, once foo is finished, the replication (the duplicated blueprint, but after foo has done stuff with it) is returned. This replication contains the original blueprint, and everything else we might have added - in this example, elem.

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

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

We create a nameless function and immediately execute it.

(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

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

Like all other functions, they can return values. And these values can be captured into variables.

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 。

Returns a function which receives an argument, and that function is now assigned to foo.

该功能的内部：

return new foo( elem );

是为了确保我上面提到的特殊条件 - 它确保了新的副本通过明确地执行 new 操作来制造蓝图。这实际上可以这样复制：

Is to ensure the special conditions I've spoken about above - it ensures that a new copy of the blueprint is manufactured, by explicitly doing the new operation. This can actually be replicated like this:

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

只要您始终致电 foo 使用 new 关键字。

As long as you always call foo with the new keyword.

这篇关于jQuery如何进行方法链接？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！