obj.foo() and obj(a).foo - how is the solution to do this ? (idea by jQuery)

Question

At first - sorry for my terrible english. I must practice it and will give my very best.

I'll try something new for me in javascript. i get the idea by jQuery libary. There are two

different ways to work with 'jQuery' or '$'.

jQuery(arg).foo(); // first way jQuery.foo(); // second way

Now i wanted to do the same with an object.

obj(arg).foo(); obj.foo();

My first question was: How can jQuery be an function that returns an object and be an object in

the same way ?

obj(arg).foo();

seems like a function that returns an object. But

obj.foo();

seems like an object.

I tried something to work with obj.foo() and obj().foo() but nothing worked - in any way i tried out something an error returned: foo() is undefined.

Do you know how jQuery solved it, to register the variable jQuery in this unnormaly way ?

The following is what i want to realize (the code doenst work!):

myClass = function () { this.foo() { window.alert('foo()!'); return this; } } var myObj = new myClass(); function obj() { return myObj.foo(arguments); } var obj = { secondFoo : function () { myObj.foo(); } }; obj('arg').foo(); // alert(foo()!) && alert(foo()!) obj.secondFoo(); // alert(foo()!) obj('arg'); // alert(foo()!)

possible duplicate of How can jQuery behave like an object and a function? (the jQuery approach is slightly more complicated than you expect, because it includes a solution which eliminates the need to prefix new before the jQuery constructor). — Rob W
– Rob W, Commented Apr 26, 2012 at 12:24

GillesC · Accepted Answer · 2012-04-26 12:57:53Z

here is a little fiddle that display how jQuery does it (well not exactly but the core logic is there) http://jsfiddle.net/UD2Mv/1/

Basically jQuery always returned itself (actually not the jQuery object but an instance of jQuery.fn) unless the function call is expected to return something.

Because it return itself all the properties and methods are returned and are available as a chain. The trick that jQuery does is that it stores element inside this but by using integer keys like in an array.

Which is what I do in the example with this line

this[0] = document.getElementById(id);

This mean the element is now store and available to all methods that are part of this, so when I call colorMe this[0] gives me the targetted element.

Here is the code

function wrap(id) { return new wrap.init(id); }; wrap.init = function(id) { this[0] = document.getElementById(id); return this; }; wrap.init.prototype = { colorMe: function(color) { this[0].style.color = color; return this; } }; $(function() { wrap('boo').colorMe('red'); });

SLaks · Accepted Answer · 2012-04-26 12:23:05Z

In Javascript, all functions are also objects.

You can write

someFunction.someProperty = function() { ... }; someFunction.someProperty();

Collectives™ on Stack Overflow

obj.foo() and obj(a).foo - how is the solution to do this ? (idea by jQuery)

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related