Question

jQuery或$似乎是一个功能：

typeof $; // "function"

它就像一个人：

$('div').removeClass(); // $ constructs a new object with some methods like removeClass

但是当我删除函数括号时，它的行为就像一个对象：

$.each(/* parameters */); // $ is an object with some methods like each

我想知道这是如何可行的，以及如何将这种行为实现到我自己的函数中。

Answer 1

函数也是对象，因此可以用与Object类似的方式定义$.each。

JavaScript是一种原型语言。对于jQuery，这意味着$的每个实例都从jQuery.prototype继承方法。^参见注释

一个非常粗略的演示，以实现类似的行为：

(function() { // Closure to not leak local variables to the global scope
    function f(a, b) {
        //Do something
    }
    // Prototype. All properties of f.prototype are inherited by instances of f.
    // An instance of f can be obtained by:    new f, new f(), Object.create(f)
    f.prototype.removeClass = function(a) {
        return a;
    };
    function $(a, b) {
        return new f(a, b); // <--- "new f" !  
    } 
    $.each = function(a) {
        alert(a);             
    };
    window.$ = $; // Publish public methods
})();

//Tests (these do not represent jQuery methods):
$.each("Foo");                   // Alerts "Foo" (alert defined at $.each)
alert($().removeClass('Blabla'));// Alerts "Blabla"

备注

jQuery的root方法定义如下（仅显示相关部分）：

(function(win) {
    var jQuery = function (selector, context) {
        return new jQuery.fn.init(selector, context, rootjQuery);
    };
    //$.fn = jQuery.fn is a shorthand for defining "jQuery plugins".
    jQuery.fn = jQuery.prototype = {
        constructor: jQuery,
        init: function( /* ..parameters.. */ ) { 
            //.... sets default properties...
        }
        //....other methods, such as size, get, etc...
        //.... other properties, such as selector, length, etc...
    };
    jQuery.fn.removeClass = function() { // (Actually via jQuery.fn.extend)
        // ... method logic...
    };  //...lots of other stuff...

    win.$ = win.jQuery = jQuery; //Publish method
})(window);

prototype方法的优点是链接方法和属性非常容易。例如：

$("body").find("div:first").addClass("foo");

实现此功能的方法可能是：

$.fn.find = function(selector) {
    ...
    return $(...);
};

如果您对jQuery的实际实现感兴趣，请查看带注释的源代码：

jQuery core - 构造函数和基本方法的定义。
jQuery.fn.extend用于add removeClass, etc. to jQuery。
jQuery 1.7.1。

Answer 2

所有功能都以这种方式运作。

function fn() {
    alert("hi mom");
}

fn.foo = "bar";

Answer 3

在JavaScript中，函数是一种对象。具体来说，函数是从Object派生的Function对象的实例。 jQuery利用了这一事实并从jQuery函数对象中挂起了一些“静态”方法。

jQuery的创建者John Resig在http://ejohn.org/apps/learn/有一个很好的关于这个主题的教程。这可能会为您提供有关如何在您自己的代码中利用JavaScript的这一功能的一些想法。

jQuery如何表现得像一个对象和一个函数？

3 个答案:

备注