Hey Hacker News! Lets talk about prototypal inheritance in JS!<p>What's the best way of doing it from a code reusability standpoint?<p>What's the best way of doing it from a time to create instance standpoint?<p>What's the best way of doing it from memory footprint standpoint?<p>Of the ways I've seen and tried, John's method seems the easiest to use: http://ejohn.org/blog/simple-javascript-inheritance/<p>But I hate that it has to loop through every property every time you extend a prototype.<p>Most inheritance patterns I've seen need to have the original prototype cloned or instantiated in order extend a new prototype safely. Is there a way to do it that allows all instances at all levels of the inheritance chain to still share the same common methods in memory where they aren't overridden?<p>Thanks!
To cut the story short, there is basically a single way to do "proper" inheritance in javascript, which is Crockford's prototypal inheritance [1]. There are a dozen variations on it, here is one:<p><pre><code> function inherits (child, parent) {
extend(child, parent)
function Ctor () { this.constructor = child }
Ctor.prototype = parent.prototype
child.prototype = new Ctor()
child.__super__ = parent.prototype
return child
}
function Animal ...
Animal.prototype.x = ...
function Cat ...
inherits(Cat, Animal)
</code></pre>
See Backbone's implementation [2] for another example. This eventually morphed into the standard `Object.create` method [3], supported in IE9+.<p>[1] <a href="http://javascript.crockford.com/prototypal.html" rel="nofollow">http://javascript.crockford.com/prototypal.html</a><p>[2] <a href="http://backbonejs.org/docs/backbone.html#section-186" rel="nofollow">http://backbonejs.org/docs/backbone.html#section-186</a><p>[3] <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/create" rel="nofollow">https://developer.mozilla.org/en-US/docs/JavaScript/Referenc...</a>