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
– canon

2012-07-13 18:31:49 +00:00
Commented Jul 13, 2012 at 18:31 — canon
– canon, Commented Jul 13, 2012 at 18:31
Your right, nothing can slow superfish down!

Nate
– Nate

2012-07-13 18:58:03 +00:00
Commented Jul 13, 2012 at 18:58 — Nate
– Nate, Commented Jul 13, 2012 at 18:58

epascarello · Accepted Answer · 2012-07-13 18:32:02Z

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, 2012 at 18:32

epascarello

208k20 gold badges206 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nate Over a year ago

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?

epascarello Over a year ago

it is called after the properties are assigned to the object.

jbabey · Accepted Answer · 2012-07-13 23:41:11Z

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, 2012 at 23:41

answered Jul 13, 2012 at 19:03

jbabey

46.7k12 gold badges73 silver badges94 bronze badges

4 Comments

Nate Over a year ago

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?

Dan Over a year ago

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.

Nate Over a year ago

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.

jbabey Over a year ago

@Nate added a jsfiddle example for you.

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related