Most efficient way to use inheritance in this example?
<p>So I've been messing around with some JavaScript inheritance techniques and here's one case in which I'm trying to derive a strong solution.</p>

<p>Here's a simple example:
<a href="http://jsfiddle.net/JgrYu/" rel="nofollow">http://jsfiddle.net/JgrYu/</a></p>

<p><strong>The Issue:</strong> Logically we'd expect the two div's to be both 0's.  But since we're just newing the extended class we don't re-generate our "c" variable.</p>

<p>A potential fix for this is to use Functional inheritance:
<a href="http://jsfiddle.net/h8xtz/" rel="nofollow">http://jsfiddle.net/h8xtz/</a></p>

<pre><code>function mybase() {
    var that = {};
    var c = 0;

    that.hi = function() {
        var ele = $('&lt;div&gt;&lt;/div&gt;');
        ele.html(c++);
        $('body').append(ele);
    }

    return that;
}

function myextended() {
    var that = mybase();

    that.hi();

    return that;
}

myextended.prototype = new mybase();

$(document).ready(function() {
    var a = myextended();
    var b = myextended();
})​
</code></pre>

<p><strong>However</strong> the issue with this is that we clutter the global namespace and each object duplicates the functional properties when in reality we just want duplication of the private variables. </p>

<p><strong>So,</strong> what I'm looking for is a better approach than functional inheritance to solve this issue.  I've thought about making a psuedo classical inheritance structure where I separate the private and public variables/functions but I haven't been able to come up with a version with less overhead than the functional inheritance.</p>
