smart javascript jquery object

Question

Well, i find this really amusing, and of course, if i were to dive into the code a little further more than this, i would of surely know how they manage to do it. What i'm talking about is JQuery library. Take a look at the code below -

 $.prototype.mymethod=function(str){
    alert(str);
}

//now call the added method
$(document).mymethod('hello') //alert out hello

If $ is a pure normal javascript function (not using jquery library), the added method wont work as expected unless the new keyword is prepended before $

new $(document).mymethod('hello')

But with JQuery, new keyword is very optional!

Can someone give more insights into it as to how they did it without me having to go through their library?

EDIT: After a hard struggle, finally I dug out the actual root mechanism of how the above works (constructing a JavaScript object without using the new keyword)! I believe this will serve as a good futere reference for anyone desiring to learn advanved javascript!

function a(){
    return a.prototype;
}
a.prototype.fn=function(){
    alert('hello')
}

a.prototype.test=123;

console.log(a().test)//123 
a().fn()//alerts out hello

Denys Séguret · Answer 1 · 2013-03-15T19:28:35.507

3

From the source code :

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

The new is already called when you call $(document).

If you want to do the same thing the jQuery way, here's how it can be :

var A = function(str){
    return new A.prototype.init(str);
}
A.prototype.init =function(str){
     this.str = str;
     return this;
};
A.prototype.init.prototype = A.prototype;

A.prototype.f = function(arg){ // add your function
   console.log(this.str+' '+arg);
};
A('hello').f('world'); // logs "hello world"
A('bye').f('bye'); // logs "bye bye"

edited Mar 15 '13 at 19:28

answered Mar 15 '13 at 18:12

Denys Séguret

372,613
87
782
758

@spaceman12: There is nothing special about it. Just create a function which, when called, creates a new object and returns it. For example: `function A() { return new B(); }`. – Felix Kling Mar 15 '13 at 18:38
But if i want to add method to `A` and not B, and call it as A().mymethod() , how would you return the new created object for A? – spaceman12 Mar 15 '13 at 18:47
Wouldn't `A().mymethod()` call `mymethod` on whatever is returned by A, not A itself? I think it you want to return a new object for A you would need `A.mymethod()`, which will return a new created object for A if `mymethod` creates one... – ckersch Mar 15 '13 at 18:56
@spaceman12: If you want to create a new instance of `A` without calling `new`, have a look at [this question](http://stackoverflow.com/questions/1889014/can-i-construct-a-javascript-object-without-using-the-new-keyword). Note though that this is not what jQuery is doing. – Felix Kling Mar 15 '13 at 19:06
@spaceman12 I edited with an exemple of how to reproduce jQuery's trick. – Denys Séguret Mar 15 '13 at 19:23
thanks all for the help. The edits made by @dystroy is very helpful. However, i just posted in as edits in the question a much better and simpler one just in case if there are any js enthusiast desiring to learn more :) – spaceman12 Mar 15 '13 at 20:41
1

@spaceman12: The "problem" with your solution is that you are always returning the same object. You won't be able to access any arguments passed to `a` as function. – Felix Kling Mar 15 '13 at 21:22
of course, if i want any arguments be passed into the constructor function, i can modify it but thats just plain easy function a(obj){ return new a.init.init(obj) } a.init=a.prototype={ init:function(obj){ alert(obj) return this; } } And much more – spaceman12 Mar 15 '13 at 21:37

smart javascript jquery object

1 Answers1