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?](http://stackoverflow.com/questions/8734115/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, Apr 26 '12 at 12:24

GillesC · Answer 1 · 2012-04-26T12:57:53.000

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

score 1 · Answer 2 · answered Apr 26 '12 at 12:23

1

In Javascript, all functions are also objects.

You can write

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

someFunction.someProperty();

answered Apr 26 '12 at 12:23

SLaks

868,454
176
1,908
1,964

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

2 Answers2