jQuery的$.each()如何工作？

Question

也许标题不太好，但这是我的问题： 我正在构建一个框架，以学习更多关于javascript的知识。我想使用“jQuery”风格。

如何编写一个函数，在该函数中，小括号()可以选择性省略？

$("p").fadeOut(); //() is there
$.each(arr, function(k, v) {...}); //Dropped the (), but HOW?

这是我想出来的，但它不起作用：

$2DC = function(selector)
{
    return new function() {
        return {
            circle : function()
            {
                //...
            }
        }
    }
}


$2DC("#id1"); //Work
$2DC("#id2").circle(); //Work
$2DC.circle(); //DONT WORK

- Sawny

---

您的标题有些令人困惑。我认为$.()甚至不是有效的JavaScript代码。 - Álvaro González

“jQuery”变量如何既是函数又是对象？的副本 - user1106925

如果你想从jQuery中学习，我认为最好查看源代码：https://github.com/jquery/jquery - Felix Kling

Answer 1

$实际上只是jQuery函数的一个别名。 你可以使用以下任一方式调用该函数：

jQuery("p"); 或 $("p");

但记住，在JavaScript中，您可以直接向函数添加内容。

function foo(){
}
foo.blah = "hi";
foo.func = function() { alert("hi"); };

foo.func(); //alerts "hi"

这就是（概念上）jQuery的each函数被定义的方式。

jQuery.each = function(someArr, callback) { ...

现在，jQuery.each 是一个可以像这样调用的函数：

jQuery.each([1, 2, 3], function(i, val) {
});

或者更常见的

$.each([1, 2, 3], function(i, val) {
});

所以对于你的特定情况，要支持：

$2DC.circle(); 

你需要直接将 circle 函数添加到 $2DC 中：

$2DC.circle = function(){
   // code
};

- Adam Rackis

---

谢谢！ :) 那真的很简单... 通过构建框架我学到了很多。 - Sawny

@Sawny - 当然没问题。JavaScript非常有趣。 - Adam Rackis

Answer 2

在JavaScript中，函数是对象。因此，它们可以像int、字符串等变量一样使用。

在你的例子中，$2DC是一个返回包含circle函数的对象的函数。

$2DC.circle();不起作用，因为circle仅是返回的对象的属性，而不是$2DC本身的属性。

在$.each的情况下，这是可行的，因为$包含一个each属性。你的$2DC也可以这样做。像这样：

$2DC.circle = function(){
}

现在，$2DC.circle(); 将起作用。因此，正如您所看到的，函数是对象，因此可以像其他对象一样具有属性。

- gen_Eric

---

+1，尽管你比我快4秒获得了“开明徽章” :-) - Adam Rackis

@AdamRackis：我是一个回答忍者 ^_^ - gen_Eric

Answer 3

$2DC.circle(); //DONT WORK

这个不起作用是因为$2DC没有任何名为circle的函数。它只是一个函数。

而$2DC("#id2")返回一个包含circle函数的对象的新函数，所以$2DC("#id2").circle();对你来说可以正常工作。

如果你定义

$2DC.circle = function(){

};

你可以使用 $2DC.circle();

- ShankarSangoli

Answer 4

创建您的基础函数，然后向该函数添加方法。

var f = function(text){
    alert(text);
}
f.fn1 = function(text){
    alert('fn:'+text);
}
f.fn2 = function(text){
    alert('fn2:'+text);
}

f('hi'); //hi;
f.fn1('hi'); //fn:hi;
f.fn2('hi'); //fn2:hi;

- Will Stern

Answer 5

可以使用类似这样的方法来实现。

$.fn.each = function (otherparams);

$.each = function (collection, otherparams) {
  return $.fn.each.apply(collection, arguments.slice(1));
};

将每个属性添加为 fn 的属性（它只是 jQuery.prototype 的别名）意味着它作为每个 jQuery 集合的方法可用。第二段代码意味着它可以作为参数传递到集合中。

apply（和 call）是一些最有用的 JavaScript 特性，一旦你习惯了它们。

- wheresrhys

Answer 6

你所提到的$.each方法是$函数对象的一个属性。

在jQuery中，$对象是一个函数对象，就像JavaScript中的任何对象一样，你可以在对象上分配属性。

调用$函数对象作为构造函数，并返回由jQuery.fn.init()函数创建的新对象实例。将jQuery的原型复制到jQuery.fn.init，以便新创建的对象实例可以访问在jQuery上定义的方法和插件。

- Russ Cam

Answer 7

可以尝试这样做：

$2DC = (function(selector)
{
    return new function() {
        return {
            circle : function()
            {
                //...
            }
        }
    }
})();

这样，$2DC 就是函数返回的对象，而不是函数本身。

- André Alçada Padez

---

给那个投了我反对票的人，你一定是个真正的天才：http://jsfiddle.net/andrepadez/Pdvju/ - André Alçada Padez

它是一个返回函数的对象，就像jQuery一样！试试这个fiddle。 - André Alçada Padez

jQuery 是一个函数（也是一个对象）。可以这样调用它：jQuery('p')。在你的答案中，$2DC 只是一个普通的对象（不是一个函数），所以 $2DC('p') 不起作用。 - gen_Eric

var jQuery = (function() { ... })( window ); 这是jQuery的源代码，还想再争论一下吗？ - André Alçada Padez

哦，是的...我忘记包含那个细节了。对此我很抱歉。 - André Alçada Padez