1

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).method and for exemple $.ajax without brackets (.ajax will still be a method).

EDIT : I think that I misspoke. I know how objects work in JavaScript and my question was not about that. JQuery allows us to use $ without the key word new. It has a function that returns a new instance automatically. So my question was about how it can use $ both as a function to instanciate a new object and an object itself. Let's say we have

(function() {

var jQ = function (arg){

    this.own = arg;

};

jQ.prototype = {

    foo : function (){

        alert("Foo");

    },

    bar : function (){

        alert("Bar");

    }

};

window.jQ = window.$ = jQ;

return jQ;

}()); In this exemple, i have to go througth the key word new if I want to use my object. So how does JQuery do to avoid us this step ?

2
  • 2
    Do you know what prototype means in JavaScript? Commented Dec 16, 2014 at 0:27
  • 3
    Functions are objects and can be used as such. Commented Dec 16, 2014 at 0:28

5 Answers 5

2

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...

Sign up to request clarification or add additional context in comments.

Comments

1

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

Comments

0

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.

Comments

0

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.

Comments

0

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;

8 Comments

I've already seen that and I know the .fn is just the .prototype. So how can we have the same behavior with the exemple above ?
Try to call the method foo with your update using $... Or add a property which already has a value and display it using $.property.
jsfiddle.net/jb358df8 ... and what should I do then? I don't understand the point of your comment.
jsfiddle ... take a look. I'm not perfect in english so maybe that I'm not explaining well
It's expected that prop is undefined. prop is a property of the object return ed by $(), not $ itself. That's how jQuery works as well. Just try $.on(). It throws, because .on is a property of a jQuery object, not the jQuery function itself. I think you have a false idea of how jQuery works. $ and $() are two different objects and they don't have shared properties. Every function you find on $ was explicitly assigned to it.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.