CODEWITHSUNDEEP
javascriptjquery
David G
David G

Reputation: 96810

How is jQuery's $ a function and an object?

I mean object as in {} [object Object]. How does it do $(selector) and $.fn.init at the same time?

Can you give me a simple example please?

Upvotes: 27

Views: 11205

Answers (8)

Lumic
Lumic

Reputation: 53

var q=function(){};

var s = function(){
    alert("base");
    window.s = s;
    return new q()};

q.fn = q.prototype = {};

q.fn.x = s.x = function(){alert("x");return this;};
q.fn.y = s.y = function(){alert("y");return this;};
q.fn.z = s.z = function(){alert("z");return this;};

s().y().z().x();
s.z().x().y();

Upvotes: 2

Fizer Khan
Fizer Khan

Reputation: 92745

jQuery or $ is an function(you know $ is an alias of jQuery).

// Define a local copy of jQuery
jQuery = function( selector, context ) {
    // The jQuery object is actually just the init constructor 'enhanced'
    return new jQuery.fn.init( selector, context, rootjQuery );
},

In Javascript, everything is an object even function too. Hence You can directly add properties to function.

   jQuery.find = function () {
   }

Upvotes: 3

Baz1nga
Baz1nga

Reputation: 15579

people play around with javascript functions and it leads to interesting design patterns.. Jquery uses of many of these patterns and creates a nice wrapper around many functions.. so ultimately jquery is like a static class using which one can do really neat stuff..

like all classes it has a name and the default Name is jQuery. The $ is nothing buy an identifier that is tied into the jQuery Library and stops you from having to type “jQuery” as the identifier.

The fact that it is a $ symbol is arbitrary. At some point a decision was made to use the $ symbol but the fact of the matter is that it could have been almost any type of ECMAScript acceptable identifier.

The main reason we use $ as the identifier is that you are less likely to make simple typo mistakes when typing one character instead of a string.

Hope that makes things clear.. please correct me guys if I hv got something wrong

A simple example of say my own library would be say a calculator class

var Calculator= (function()
{

    function add(a,b)
    {
     return a+b;
    }
    function subtract(a,b)
    {
     return a-b;
    }
    function multiply()
    {
     return a*b;
    }
    function log()
    {
      console.log("log 123")
    }
    return
    {
     add: add,
     subtract: subtract,
     multiply: multiply
    }
}());

Now I can perform operation using the Calculator class as follows:

Calculator.multiply(Calculator.add(2,3),5);

add my local functions are private and are not exposed to be used outside. In this case my log function can't be accessed using Calculator.log it will say method not found on object.

Now coming back to your question you could do something like this:

var _=Calculator;

and now use the calc functions like

_.multiply(_.add(2,3),5);

Interestingly there is a library called underscore too..

Upvotes: 2

numbers1311407
numbers1311407

Reputation: 34072

This isn't unique to jQuery, but an aspect of javascript. All functions are objects. E.g.:

var f = function() { alert('yo'); }
f.foo = "bar";

alert(f.foo); // alerts "bar"
f();          // alerts "yo"

Upvotes: 36

Kakashi
Kakashi

Reputation: 2195

$ is a function. a method of $ can return any thing.

For example: 

$ = function() {
     return {
                 foo : function() { return 'baa'; },
                 r1: 1,
                 r2 : 'string'
            }
};

typeof $ <- function 
typeof $() <- object
typeof $().foo <- function 
typeof $().foo() <- string
typeof $().r1; <- number 
typeof $().r2 <- string

Upvotes: 6

Matt Briggs
Matt Briggs

Reputation: 42208

Javascript is an object oriented language, so functions ARE objects, just fancy ones that you can call.

foo = function() { console.log("foo") }
foo.bar = function() { console.log("bar") }
foo() //=> prints "foo"
foo.bar() //=> prints "bar"

Upvotes: 6

Maxim Krizhanovsky
Maxim Krizhanovsky

Reputation: 26699

var s = function(){};
s.test = function(){console.log('inside s');}
s.test();

is perfectly legal code.

Upvotes: 1

Naftali
Naftali

Reputation: 146310

It is an object.

$ holds different functions.

You can test this yourself by making your own object:

var $ = {
     select: function(id){return document.getElementById(id);}
}

function $(id){
      return $.select(id);
}

Upvotes: 2

Related Questions