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!!
Share Improve this question asked Feb 23, 2011 at 2:35 DrStrangeLoveDrStrangeLove 11.6k16 gold badges63 silver badges73 bronze badges 1-
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
Reset to default 4The 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.