Firebug constructor function vs user function

Question

I have made a quick search about what is the mean of Firebug DOM tab coloring and I've got that:

Red colored bold text points "constructor function"

Green colored bold text points "user function".

here is the reference link

What is the difference between the two type of functions.

For example: I have a page that included jQuery.js, foo.js and bar.js.

You know jQuery well,

here is the small piece of code in foo.js

var Foo = function () {
    this.createDiv = function () {
        var d = document.createElement('div');
        d.style.width = '300px';
        d.style.height = '300px';
        d.style.backgroundColor = '#CCC';
        document.body.appendChild(d);
    };
}

here is the another piece of code in bar.js

$(function() {
    var ins = new Foo();
    ins.createDiv();
})

Finally, I am looking Firebug's DOM tab and the coloring is like just like that.

jQuery and $ is colored bold red that means constructor function. Foo is colored bold green that means user function.

What is the difference between them. Where I am missing something.

Thanks for your help.

Lorenzo

Answer 1

The jQuery function is a constructor function ($ is merely a reference to jQuery). You can see that when you see its definition:

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

You can reproduce this behaviour (the bold red coloring) when defining a constructor function and adding something to its prototype object, like

var testFunc = function () {
    /* nothing so far */
};

testFunc.prototype.baz = function () {
    /* nothing, this gets boring */
};

or even just a random number

testFunc.prototype.baz = 4;

Note that this doesn't comply with the actual definition of a constructor function in JavaScript. If you test the linked source code in Firebug, car will be colored green, not red. Furthermore, see The Benefits of JavaScript Prototype.

Answer 2

As Marcel's example shows, Firebug marks objects that typeof "function" and which have a property 'prototype' with at least one subproperty as a 'userClass'

http://code.google.com/p/fbug/source/browse/branches/firebug1.7/content/firebug/dom.js#431

There really isn't any such thing as a "constructor function" in Javascript, just functions that can be used as constructors. Any function can be used to create objects, but it's only really interesting if the function has a prototype.