JavaScript Prototypes Made Easy

http://javascriptweblog.wordpress.com/2010/06/07/understanding-javascript-prototypes/

by toffeescript • 14 years ago

131 33 14 years ago

javascriptweblog.wordpress.com

ender7• 14 years ago

Unfortunately, there's no real way to make JS prototypes easy, simply because it's a poorly-designed system with way too many "wait, what?" moments.

If you want classical inheritance, there are many tiny JS libraries that will give it to you. If you want classical prototypes, there are also JS libraries that will give that to you. Or you can write your own.

But trying to make JS behave as either one by hand will just waste your time and frustrate you.

(note: this is a good article for explaining the underlying system behind JS prototypes, I just don't recommend that you interact with said system unless you have to)

johncoltrane4• 14 years ago

I agree that's a good article. I would have loved to read it 12, 10 or 8 years ago.

Coming from a design background, JavaScript was my first programming language at the end of the century. I simply learned programming through JavaScript's prototypal nature. I've used it extensively for many years before my first experience with a more classical language (AS3…). JS prototypes seem very natural to me. After a few years of AS3 (and a very short bit of C#), I'm not sure at all that the "classical" way is fundamentally better than JS's way.

Newcomers to JavaScript should drop their "classical" baggage before they embark. I'm starting to learn Python (2 week ends, now) and I'm not going to bring my AS3isms and my JSisms with me. Is that too hard to learn a new language with an open mind?

jimmytucson• 14 years ago

I also came from a scripting background (Perl) but are you seriously telling real programmers coming to Javascript from C, C++, and the like that they should change their way of thinking to fit a truly broken system originally used mostly by web designers?

hogu2• 14 years ago

I don't think that's the issue, though I did come to JS from a python background, so that that for what it's worth.

For me the problem is that people tend to use prototypal inheritance to implement class inheritance patterns, but there are so many ways to do that, so whenever you read code, it takes a while to figure out what people are doing.

If there was a large gain to prototypal inheritance, I might be willing to accept it, but I havent' seen (does anyone have examples?) of really cool/useful things you can do with prototypes that you cannot do with class based inheritance? Because the increased flexibility leads to confusion without added benefit, I don't see the point.

Contrast that with dynamic typing, where I think there are huge benefits which offset the added cost.

also - from reading that article, it seems that JS's prototypal system has a large number of gotchas, and thats bad regardless of what kind of inheritance system your language implements.

gilini• 14 years ago

I completely disagree with you. JS' prototypes may have been poorly designed, but once you understand it, there's no reason you shouldn't use it at its full capabilities.

Now, I do have a lot against enforcing OO behavior in js. Aside from the obvious performance overhead, you might be shielding developers from understanding the very language they're writing code on.

jfaucett2• 14 years ago

great article that clearly articulates js prototypes. I'd have to disagree with ender7 though, I think JS prototypes are not a "poorly-designed system" they're just different from classical forms of OOP inheritance. And contrarily, I would recommend anyone to delve deeper into prototypes - an alternative method to class based OOP.

ufo• 14 years ago

It still could be much better designed though, compareed to othe rprototipical languages. Prototypes cannot be explicitly accessed or mutated, Object.create wasn't even part of the standard and the whole syntax with function constructors and having to set the prototype property is a very ugly hack.

jfaucett2• 14 years ago

I haven't used any other prototypical languages so I can't say how js compares... Can you give me the best prototypical language? - I'd like to check it out and see for myself. Still, as far as shimming up a clean cross browser API prototyping is extremely usefull.

walrus• 14 years ago

JavaScript's prototypes really are poorly designed, though. To see how it probably should have been done, check out the programming language Io (http://iolanguage.com/) or Douglas Crockford's note on prototypal inheritance in JavaScript at http://javascript.crockford.com/prototypal.html (specifically, the 2008-04-07 update).

eragnew• 14 years ago

marked 'to read this weekend'. looks very interesting.

iMark2• 14 years ago

Really nice explanation on a subject way too many JavaScript developers are ignorant about. Definitely worth a read if you've any interest in the language.

I agree with the comments that there's nothing inherently wrong with prototypes (they can be tremendously useful and powerful, and make for a refreshing change from the rigidity of classical inheritance in languages like Java), but JavaScript's particular implementation, unfortunately, does a very good job of disguising their utility.

jsnk• 14 years ago

I haven't come across cases where I was forced to use prototypes. Can someone describe a situation where it would be necessary to use prototype? Or even advisable to use prototype?

iMark2• 14 years ago

Part of the problem with JavaScript is that prototypes are an inherent part of the language, but wrapped up behind syntactic sugar that hides them away on the fringes of the language.

If you've created an object in JavaScript, you've used prototypes, just indirectly.

If you want to use inheritance in Javascript prototypes are where it's at.

The ObjectName.prototype.fn = function() {} pattern is also a more memory efficient way of defining object methods than doing function ObjectName() {this.fn = function() {}}, as the method is only defined once in the former case, but is defined every single time a object is created in the latter case.

Basically for the most part you don't have to use prototypes directly, but more you know about them the better.

yahelc• 14 years ago

If you've ever used jQuery, you've used prototypes directly. For example, with $("a").click(), "click" is a function on the jQuery object's prototype; ie, $.prototype.click . Since you're likely to have multiple jQuery objects in a script, it makes sense performance wise for all those functions to be on the prototype instead of properties of a newly created object every time you instantiate that object.

ricardobeat• 14 years ago

Any time you want to use OO abstractions, share methods between many objects, inheritance, encapsulate related actions, etc. You can do purely functional programming in JS, but more complex projects require OO least they turn into spaguetti.

gruseom• 14 years ago

I'm with you. This is one of those things people use because it's there, which is how we get Everests of complexity.

mitjak2• 14 years ago

May I just compliment the author on the clever "dots" at the ends of the "J" glyphs on the website logo that stay in place as you scroll.

mahcuz• 14 years ago

What on earth are you talking about, man?

lukifer• 14 years ago

I see it too, it seems like a CSS bug. The original commenter was probably being sarcastic.

TazeTSchnitzel• 14 years ago

I got that too, but upon further inspection, it's a rendering bug.

lightblade• 14 years ago

Cool! When do we get a NodeJS binding? XD

sopooneo• 14 years ago

If I am reading this right, then you can get efficiency gains by attaching methods to an object's prototype rather than defining them directly in a constructor. This way, the method is only created once, and is just reference by all instances of whatever object.

If I am correct about all that, my point of confusion is simply that this seems like a very awkward way to design things. Isn't it easier to read a program if all of an object's properties and methods are defined together in it's constructor, rather than spread out later as attachments to a prototype?

darkstalker• 14 years ago

Looks similar to Lua's metatables with __index property

justincormack2• 14 years ago

Yes, Lua is a prototypal language too.

JavaScript Prototypes Made Easy

Related Stories