为何将jQuery.extend定义为函数属性？函数拓展原理存疑

Great question—this is one of those jQuery intricacies that confuses even experienced developers when they first dig into the source code. Let’s break this down step by step:

1. Functions Are Objects in JavaScript #

First, the core point you might be missing: in JavaScript, functions are first-class objects. Every function is an instance of the Function constructor, which means you can treat them like any other object—including adding, modifying, or deleting properties directly on the function itself.

For example, this is completely valid JavaScript:

function MyFunction() {}
MyFunction.myProperty = "Hello";
console.log(MyFunction.myProperty); // Logs "Hello"

jQuery is just a function, but as an object, it can have properties like extend attached to it—no new instance required.

2. jQuery.extend as a Static Method #

jQuery defines jQuery.extend as a property of the jQuery function to create static methods—functionality that belongs to the jQuery "class" itself, not to individual jQuery instances.

When you call jQuery.extend({ myStaticMethod: function() {} }), you’re adding a method directly to the jQuery function. You can then call it like jQuery.myStaticMethod() without ever creating a jQuery instance (like $("div")).

3. Reusing the Same Function for jQuery.extend and jQuery.fn.extend #

The line jQuery.extend = jQuery.fn.extend = function() {...} is a clever way to reuse the same underlying logic for two different purposes. The difference comes down to what this points to when the function is called:

• When you call jQuery.extend(), this refers to the jQuery function itself (since you’re invoking a method directly on the jQuery object/function).
• When you call jQuery.fn.extend(), this refers to jQuery.fn—which is just an alias for jQuery.prototype. So any properties you extend here become available to all jQuery instances (like the ones returned by $("div")).

4. The Single-Argument Behavior #

Let’s look at that code snippet you mentioned:

// Extend jQuery itself if only one argument is passed
if (i === length) {
  target = this;
  i--;
}

When you pass only one argument to jQuery.extend, target gets set to this—which is the jQuery function. So you’re effectively merging the argument’s properties directly into the jQuery function itself.

For example:

jQuery.extend({ version: "1.0.0" });
console.log(jQuery.version); // Logs "1.0.0"

If you did the same with jQuery.fn.extend({ myMethod: function() {} }), this would be jQuery.prototype, so all jQuery instances would have access to .myMethod().

5. jQuery’s Constructor Quirk #

You’re right that new jQuery() returns a new jQuery.fn.init() instance—this is jQuery’s way of simplifying instance creation (so you don’t have to write new $("div")). But the jQuery function itself remains a function (and an object) that can be extended via jQuery.extend.

Wrap-Up #

To recap:

• jQuery is a function, but functions are objects in JS—so it can have properties like extend.
• jQuery.extend is for extending the jQuery function (static methods/properties).
• jQuery.fn.extend is for extending the jQuery prototype (instance methods/properties).
• The same function is used for both, with this determining the target of the extension.

内容的提问来源于stack exchange，提问作者john blair