Use A Variable Both As Function And Object Instance

I was wondering how does JQuery use '$' both as a function to return a new instance and an instance itself. I guess that it's not exactly the case but I mean, we can use $(element)

Solution 1:

Function is an object in javascript: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function You can check this code:

var f = function () { alert(1); };
f.func1 = function () { alert(2); };
f.func2 = function () { alert(3); };

and you can call f(), f.func1() and so on...

Solution 2:

It's not jQuery. In JavaScript functions are objects.

Solution 3:

In the case of $(element).method you are passing a parameter element into the jQuery function, where with the $.ajaxcall you are calling the ajax function inside of the $ jQuery object. In both cases we are talking about the same piece of code, but we are using it two different ways.

Have a look at the raw source code for jQuery and that should help to visualize this a little: https://code.jquery.com/jquery-2.1.1.js Note: the jQuery function that is used repeatedly is aliased at the bottom of the page.

Solution 4:

Remember that in JavaScript, functions are objects. So, using the specific functions you called out in your question, you could create them like this:

var $ = function(selector) {
    ...
};

$.ajax = function(url) {
    ...
};

EDIT: To respond to your edited/clarified question, you don't have to use prototyping to make constructor functions in javascript. Remember, all a constructor is doing is returning an object - here's the equivalent of your prototyping code, but without having to use the new operator to instantiate the object:

(function() {

var jQ = function (arg){

    return {
        own: arg,
        foo: function (){
                 alert("Foo");
             },
        bar: function (){
                 alert("Bar");
            }
    }

};

window.jQ = window.$ = jQ;

return jQ;
}());

I believe this style is actually preferred by Douglas Crockford because forgetting to use the new keyword won't throw an error but you'll get some very unexpected behavior.

Solution 5:

JQuery allows us to use $ without the key word new. It has a function that returns a new instance automatically.

Nothing magical here. The jQuery function simply returns an instance of another constructor (source):

// Define a local copy of jQuery
jQuery = function( selector, context ) {
    // The jQuery object is actually just the init constructor 'enhanced'
    // Need init if jQuery is called (just allow error to be thrown if not included)
    return new jQuery.fn.init( selector, context );
},

The only magic going on in the code (not shown in the example) is that jQuery.fn.init.prototype = jQuery.prototype. But jQuery.fn.init is a different function than jQuery.

---

Applied to your example:

var jQ = function (arg){
    return new jQ.prototype.init(arg);
};

jQ.prototype = {

    init: function(arg) {
        this.own = arg;
    },

    // ...

};

jQ.prototype.init.prototype = jQ.prototype;