OOP usually requires instantiation (creating an instance of class before using) like this:

var x = new String();

In jQuery (and other frameworks) we can use object without instantiation, e.g.(no 'new'):

$('#myid').click(function(){
//code
});

Here's my question: how do framework authors make it?? How to make framework ready for use without 'new' instantiation??

Thanks in advance!!

OOP usually requires instantiation (creating an instance of class before using) like this:

var x = new String();

In jQuery (and other frameworks) we can use object without instantiation, e.g.(no 'new'):

$('#myid').click(function(){
//code
});

Here's my question: how do framework authors make it?? How to make framework ready for use without 'new' instantiation??

Thanks in advance!!

• javascript
• jquery
• oop

• I can't tell if you're asking about the '#myid' string, or the jQuery object. – user113716 Commented Feb 23, 2011 at 2:55

6 Answers 6

The simplest, hand-waviest answer (that leaves out a lot about how JavaScript is different from class-based languages) is that a new object is created and returned from the jQuery function.

One of the first things you'll see in the jQuery source:

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

You can see that $ is simply an alias for jQuery later in the source:

// Expose jQuery to the global object
return (window.jQuery = window.$ = jQuery);

javascript is a prototype based language, there is no inheritance - all behavior is achieved by cloning objects and/or attaching new fields to existing objects.

In the example you have given

$('#myid').click(function(){
//code
});

you are actually passing an anonymous function to the click function which is defined as an inner function on an object defined by the jQuery library - which is created via the global parametrized $ function (which internally uses new as pointed out by @lwburk in his answer). Functions are first class citizens in javascript - they can be used directly, or as part of an object, which then makes them appear as if they were methods within the outer object:

 [object returned by function]
 $            ('#myid')       .click(          function() {} );
 ^             ^               ^
 function      parameters      inner function  ^ parameter of type function

You can make a method that is wrapped with a self-evoking function.

(function() {
    var iAm = window.iAm || {};

    iAm = {
        Awesome: function()
        {
            alert('Yea you are!');
        },

        Lame: function()
        {
            alert('aww man.');
        }
    };

    window.iAm = iAm;

})();

iAm.Awesome(); // will alert "Yea you are!"
iAm.Lame(); // will alert "aww man."

According to the Crockford school, to embrace the true prototypical nature of JavaScript you have to abolish pseudo-classical elements such as the new operator or the .prototype reference.

While lwburk is right in that in jQuery, $() is just a wrapper, you can actually 'instantiate' an object without new.

var myClass = function () {
  var privateVar,

  instance = {
    member: 'foo',
    method: function () {
      privateVar = 'bar';
    }
  };

  return instance;
};

var newInstance = myClass();

Because JS is prototypal, functional and class-less, the new keyword is a bit different from other languages.

The difference between

var D = new Dog();

and

var D = Dog();

is that using the new keyword will return the object for which it is invoking.

Consider this:

function Dog() {

  // a property
  this.breed = "chocolate lab";

  // a method
  this.bark = function(){
    alert("woof");
  }
}

Then you can call methods and pull properties from the object.

var D = new Dog();

    D.breed; // [string] 'chocolate lab'
    D.bark(); // alerts "woof"

JavaScript is a dynamic, scripting, prototype-based language. The instantiation and memory management es from the interpreter.