Prototypal vs Functional OOP in JavaScript

Question

What are the pros and cons of each type/approach in writing Object Oriented scripts?

Personally, I have found closures (functional? approach) as a way to encapsulate state more natural and perhaps more elegant. I, however, have heard that this use of closures is slower in JavaScript implementations.

I would at least like to know where a prototypal approach would be most appropriate.

Answer 1

"Functional" Style (most people would call this "traditional OOP"):

• Advantage: OOP that works the way everyone (or at least Java programmers) is/are familiar with, including "truly" private methods and variables
• Disadvantage: Javascript wasn't designed for this type of OOP, so you wind up jumping through a lot of hoops to make it work. These hoops make debugging more difficult, and also add a performance cost (although the exact cost will depend on how/how much you use them)

Prototype Style:

• Advantage: It's OOP in the way Javascript was designed for.
• Disadvantage: It's not what you're used to (unless you have a background in other protoype inheritance languages)

So if performance isn't a huge issue for you and you're only familiar with traditional OOP ... go for it (Pro Javascript Design Patterns, from APress, has a good pattern for this). But if performance matters or you're worried about the extra layer of abstraction complicating your debugging, take the time to read up on how prototype inheritance works; you'll be a better Javascript programmer for it.

P.S. If you're worried about not having true "private" methods with the prototype style, I strongly recommend reading: http://snook.ca/archives/javascript/no-love-for-module-pattern It provides a great explanation of why true "private" members are actually a bad thing (at least in most JS development environments).

Answer 2

use prototypes to indicate object inheritance. it's pretty involved to duplicate that with functional code (I assume you mean the pattern where you have private members in a closure and return an object that contains your public members?)

function Animal() { }
function Cat () { }

Animal.prototype.sleep = function() { /* blah */ };
Cat.prototype = new Animal;
Cat.prototype.meow = function() { /* blah */ };

var simon = new Cat();
simon.sleep();
simon.meow();