实例化

Question

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, eg(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!!

Answer 1

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);

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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"

Answer 6

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();