JavaScript: Using same name for class/function and object?

Question

I've looked here and basically (as far as I can tell) you can't use the same name for a function and an object, but looking at the following code, this does not seem to be the case. Can anyone tell me how this works?

;(function($){
    $.fn.superfish = function(op){

        var sf = $.fn.superfish,
            c = sf.c,
            $arrow = $(['<span class="',c.arrowClass,'"> &#187;</span>'].join('')),
...         
    };

    var sf = $.fn.superfish;
...
    sf.c = {
        bcClass     : 'sf-breadcrumb',
        menuClass   : 'sf-js-enabled',
        anchorClass : 'sf-with-ul',
        arrowClass  : 'sf-sub-indicator',
        shadowClass : 'sf-shadow'
    };  
...
})(jQuery);

And superfish has a reference to itself within its declaration. Would this not cause infinite recursion?

Superfish decelerates? Preposterous. – canon Jul 13 '12 at 18:31 — canon, Jul 13 '12 at 18:31
Your right, nothing can slow superfish down! – Nate Jul 13 '12 at 18:58 — Nate, Jul 13 '12 at 18:58

score 4 · Answer 1 · answered Jul 13 '12 at 18:32

4

It is not recursion since it is not calling itself. It is referencing the properties off of the object.

If you saw something like this:

var sf = $.fn.superfish(),

than there would be an issue. :)

answered Jul 13 '12 at 18:32

epascarello

204,599
20
195
236

Its just in my mind, sf references superfish(). sf defines properties that superfish() uses. How can it reference superfish() before defining the properties that superfish() needs? Does the act of 'var sf = $.fn.superfish;' create a "blank" $.fn.superfish object? – Nate Jul 13 '12 at 18:54
it is called after the properties are assigned to the object. – epascarello Jul 14 '12 at 00:54

jbabey · Accepted Answer · 2012-07-13T23:41:11.410

2

This is a common technique that allows you to store a reference to some deeply nested property and use that instead, for readability and performance. Crockford's article is related.

// some really deeply nested property
var o = ooo.eee.oo.ah_ah.ting.tang.walla.walla;

// i could type...
ooo.eee.oo.ah_ah.ting.tang.walla.walla.bing = true;

// or just
o.bing = true;

It just happens that, in this case, the deeply nested property is the object itself, but javascript does not care.

This fiddle demonstrates the exact javascript feature you're having trouble with. That's just the way javascript works. Not that I'd embrace this feature as a paradigm foundation, but it's possible.

edited Jul 13 '12 at 23:41

answered Jul 13 '12 at 19:03

jbabey

45,965
12
71
94

Though I'm still trying to understand how a reference can be made to the object even though the object itself requires the properties defined using the sf reference. Its like "what came first, the chicken of the egg?". Or am I just totally misinterpreting it? – Nate Jul 13 '12 at 19:14
1

memory for the object is set aside once it's referenced. This leaves place holders. Those place holders are then filled in after. If you tried using the object before they were defined you'd see "undefined" where the empty variables are. – Dan Jul 13 '12 at 19:31
Thanks. I guess I'll just have to accept the fact that nested properties can be defined through a reference to an object that isn't defined yet. I think I'm going to go cry in a corner for a bit. – Nate Jul 13 '12 at 20:41
1

@Nate added a jsfiddle example for you. – jbabey Jul 13 '12 at 23:41

JavaScript: Using same name for class/function and object?

2 Answers2