Javascript Constructors and Prototypes

http://tobyho.com/2010/11/22/javascript-constructors-and/

by nccong • 13 years ago

52 51 13 years ago

gregorkas2• 13 years ago

I wanted to read this because I believe it's a great article, but the fact that he doesn't use semicolons pretty much turned me off.

While I was looking at the JavaScript code my brain almost exploded.

pests• 13 years ago

Did you see the article he linked about why he doesn't use them?

http://mislav.uniqpath.com/2010/05/semicolons/

Not reading an article because of that would be like not reading other code because it uses 2 spaces for tabs instead of 4. Makes no difference to the language, only to you.

wldlyinaccurate• 13 years ago

The thing is, semicolons do make a difference with JavaScript.

It's now 404ing, but there was a pretty well-known argument on one of Twitter Bootstrap's GitHub issues[1]. The Bootstrap guys didn't use semicolons, and it caused problems when minifying the code. It's an edge case, I know, but it was a problem.

I never understood the whole anti-semicolon thing anyway. It just seems really hipster to me. Use CoffeeScript, if you don't want semicolons.

  [1] https://github.com/twitter/bootstrap/issues/3057

wrboyce• 13 years ago

The article (justifying not using semicolons) seems like a rant with not real aim, beside "I am right, semicolons are wrong - and I have all these half-baked ideas to back me up".

The author was actually annoying me by the time I reached "It's good coding style".

One example:

My advice on JSLint: don’t use it. Why would you use it? If you believed that it helps you have less bugs in your code, here’s a newsflash; only people can detect and solve software bugs, not tools. So instead of tools, get more people to look at your code.

Pretty sure lots of people use JSLint, pep8 checkers, gofmt, or whatever the equivalent tool for the language at hand is. They certainly help, one cannot deny that.

Then the author goes on to pick at Crockford for suggesting people space their JS with four spaces… Yep, I'm done.

stefanve2• 13 years ago

Maybe it is not necessary but I don't see anything against it. That was the weird thing about that article all kinds of semi legit reasons why it is not necessary to use them but no reason why not to use them. I would say if there are some semi legit reasons to use them and no reason not to use them than just use them :)

gregorkas2• 13 years ago

I agree with you, but still, I look at (a lot of) JavaScript every day and it's hard to explain it, but for some reason I find the lack of semicolons disturbing. I have no problem with CoffeeScript and I've also worked with Python a lot so I appreciate a language without semicolons, but I don't approve mixing the styles.

I think this is more of a psychological thing than a syntax thing because if you're used to a syntax of a language, it gets embedded in your brain and with years of practice you can spot a missing semicolon from a mile away after only a quick glance over the code. People are afraid of changes and if they are used to something and that thing is taken away they become unsettled.

Or their brain explodes if they see JavaScript with missing semicolons :P.

Donito• 13 years ago

Terrible article in my opinion teaching some really bad habits that will cause hard to find bugs over time. Truth is, omitting semi-colons is probably fine at smaller scale, but for larger javascript code base with multiple maintainers, it's definitely a better practice in my opinion. Oh well, no point in me saying what has already been said :)

coldtea• 13 years ago

Did you see the article he linked about why he doesn't use them?

Yes, it's bollocks, goes against standard practice, and abuses a misfeature of the JS interpreter.

nhebb• 13 years ago

I defer to Brendan Eich on the matter:

https://brendaneich.com/2012/04/the-infernal-semicolon/

wwweston4• 13 years ago

I totally understand the preference for using explicit statement termination in JS. I can even understand the general preference for a non-whitespace token to terminate a statement.

But I don't understand why that would cause someone's brain to explode or otherwise make it difficult for them to pick out the author's points about the language from the example code.

M4v3R• 13 years ago

I used the prototype mechanism several times when debugging a script that I couldn't easily change source code for. I just typed:

SomeClass.prototype.someMethod

Which outputs the methods source. Then you can add some debug code like console.log(xxx) or even fix a simple bug, copy the whole thing and set it again:

SomeClass.prototype.someMethod = function ...

Voila! Hot code push without an IDE. While that's obviously not ideal, it certainly works in some cases.

nccong• 13 years ago

Good point. It's a quick way to debug/experiment.

GeneralMayhem4• 13 years ago

My favorite trick along those lines:

  var cache = SomeClass.prototype.someMethod;
  SomeClass.prototype.someMethod = function () {
    debugger; // or `throw "stacktrace"`
    cache.apply(this, arguments)
  }

Inserts a stack trace right in the middle of executing someone else's code, which is nice for tracking down why/when that function gets called if documentation is poor, without changing functionality.

kybernetikos• 13 years ago

I wrote an interactive guide to javascript that covers a lot of the same material.

http://caplin.github.io/new2JS/

stefanve2• 13 years ago

Looks nice and it helpful, thanks. Maybe you could change the output so the latest output is on top instead on the bottom (more blog style). Also it would be nice to reset the output altogether

aleclarsoniv• 13 years ago

If the arguments you wanted to pass to a constructor were variable in length, why not just send them in an array normally instead of having to jury-rig this? Are there benefits I'm missing?

itsbits• 13 years ago

oh God!! why do some people have problem with adding semicolon?

warbastard• 13 years ago

It's breathe not breath...

GeneralMayhem4• 13 years ago

This article does two things that are very dangerous, and never mentions the reasons why they're dangerous.

* Messing with Function's prototype is very strongly frowned upon. It's tantamount to setting global variables. At the very least, give that definition an if (!Function.new) guard to prevent redefining another implementation that another script (or the browser!) has already given.

* Adding methods in the constructor is awful even if you're not using inheritance, because it burns memory like crazy. If you define sayHi on Person.prototype, then every Person gets a reference to the same sayHi method. If you define this.sayHi in the constructor, then each Person you create gets its own copy of the function, making every Person heavier in memory. Not a big deal for a simple console.log, but if you have more complicated objects with a few dozen methods that you're using a bunch of you can really make things chug.

mdigi• 13 years ago

"In the first version, each time you create a person, a new sayHi function will be created for him, where as in the second version, only one sayHi function is ever created, and is shared amongst all persons that are created - because Person.prototype is their parent. Thus, declaring methods on the prototype is more memory efficient."

GeneralMayhem4• 13 years ago

Ah, you're right, I missed that. Small amount of bile revoked.

But it should have been MUCH more strongly emphasized as the only way to do it, unless you have a very good reason, not tucked down in the bottom as "oh, if you feel like it, here's a trick to make your code a little better." Especially in a tutorial that's meant for beginners in JS.

esailija• 13 years ago

Since this is usually downplayed because the "code is shared", to be more specific, for example in V8 in x64 (node.js, Google Chrome), the theoretical minimum memory used by a function object is 72 bytes:

- Map pointer: 8

- Properties pointer: 8

- Elements pointer: 8

- Code entry pointer: 8

- Initial Map/prototype pointer: 8

- SharedFunctionInfo pointer: 8

- Context pointer: 8

- Literals/Bindings pointer: 8

- Weak fields pointer: 8

So if you have a Person class with 30 methods, the methods are taking 30 * 72 = 2160 bytes at the very least. The actual data for a person might take 200 bytes, if we store e.g. full name, age and address so in this case there is like 10x overhead. If you print the details of 200 people per page request and there are 100 people connecting to your server, you are wasting 200 * 100 * 2160 =~ 40 megabytes on memory on storing all these useless function objects at that moment. That is just crazy.

And in GC language it's never just memory, a GC will eat exponentinally more CPU time when the amount of memory you use reaches closer and closer to limits.

ludwigvan• 13 years ago

If you define this.sayHi in the constructor, then each Person you create gets its own copy of the function, making every Person heavier in memory.

Does anyone know whether this is true for more sophisticated JS engines like v8? I seem to recall reading something like that, that it detects that it is the same function, but I might be misremembering it.

GeneralMayhem4• 13 years ago

I don't know, but I would suspect it's still the case, because doing anything else would require a lot of analysis of the code's behavior. In order to safely merge all those definitions into one, the engine would have to know:

* That the function in question never accesses anything in its closure that could be different for each construction

* That hasOwnProperty() is never called on the object to check which way the method is declared (alternatively, remember that it had done this optimization, and spoof the return value)

* That the function is never used as a constructor. Otherwise, Person could update sayHi's prototype and wind up changing its effects for all Persons, where it was supposed to create a customized inner class.

And if you think any of these are easy, remember that you can get a pointer to that function via the following:

  var a = 'say', b = 'hi'
  var sayHi = (new Person)[a + b]

wwweston4• 13 years ago

It's especially weird that the author did this after:

(a) showing awareness that polluting the global namespace is bad

(b) demonstrating a technique for being able to use a constructor with apply (the "newless" constructor he shows earlier)

but I think a lot of the article is less "here's a set of good practices" and more "let's play with some of the less-familiar corners of JS and demonstrate how flexible it is."

alexdf• 13 years ago

>Cat.prototype = new Mammal()

This is only useful if Mamaml has only methods and no properties which does not happen that often.

> Cat.prototype.constructor = Cat

I never saw a practical usage of this one :-)

I think these days the standard way of doing inheritance should be -> MyClass.prototype = Object.create(baseClass.prototype)

drunken_thor• 13 years ago

The article could have addressed overriding methods and calling the super method. Because that isn't simple.

raju• 13 years ago

I wrote a similar (2 series) article a while back that attempts to explain the same thing, but with a few diagrams. I know sketching out what was going on really helped me ...

http://www.looselytyped.com/blog/2012/08/18/on-prototypal-in...

http://www.looselytyped.com/blog/2012/08/22/on-prototypal-in...

acjohnson552• 13 years ago

I'm bracing for the downvote, but I'm going to say this anyway: are we all taking crazy pills?

I understand that we're more or less stuck with JavaScript, but this is nuts. JS has got to be one of the least intuitive, cobbled together languages I've ever had to work with. In what other language are people still having holy wars over how to separate statements?

Why the heck would a constructor be a regular function if calling it without new pollutes the global namespace? JS gives us prototypes so that we can have inheritance! Great, but that doesn't actually give us a simple ability to call super. Using functions as everything is fine and good, until you have to shoehorn all the functionality you actually need into mysterious constructs like prototype, new, and apply. When the symmetries are so half-assed, at some point, it seems to me to make way more since to stop overloading the same language construct and make separate constructs for separate uses.

And don't even get me started on implicit variable declaration, function hoisting, the double-equals, for...in, the necessity of self-calling functions, etc.

Thank God we have libraries and alternative syntaxes now that more or less smooth over these issues and coerce the programmer into writing reasonable JS code, because green field JS is a complete quagmire. Are we seriously incapable of doing better?

wwweston4• 13 years ago

In what other language are people still having holy wars over how to separate statements?

Probably most of the languages in popular use. It's just that the fight is usually directed towards another language.

JS happens to be one of the minority where the standard allows some flexibility and debate about usage.

mysterious constructs like prototype, new, and apply

They're well-defined, so they're not particularly mysterious if you take the time.

Are we seriously incapable of doing better?

Really depends on how much effort you're willing to invest in learning JavaScript, instead of trying to write the code you're used to from $OTHER_OO_LANGUAGE. Everyone unwilling to do that is probably never going to be capable of doing better.

This isn't to say there's anything wrong with finding another familiar set of abstractions friendly or personally productive, but personally, I find greenfield JS is pretty fun, flexible, and capable.

Then again, I think the same thing about Perl (which everyone knows is one of the worst languages ever), so YMMV.

acjohnson552• 13 years ago

Maybe mysterious wasn't the best choice of word, but my point is that it's quite possible for something to be well-defined and yet poorly usable.

I long since gave up on trying to write the code I'm used to in other OO languages in JS. When I'm in JS Land, I put a lot of effort into using best practices. I just find it frustrating that so many of those best practices do not at all seem to adhere to any sort of principle of least surprise. And I wouldn't say that my problem is being too tightly bound to a particular OO paradigm; I've had great fun programming in functional styles and Prolog.

wwweston4• 13 years ago

"Someone pointed out though, that you can prevent this polluting of the namespace (those are just big words for creating global variables) by using this trick:

     function Person(name){
        if (!(this instanceof Person))
            return new Person(name)
        this.name = name
     }"

This is useful for situations where you might want to be able to create anonymous objects and call a series of methods on them, which can be a nice API as any user of jQuery knows.

It's also an arguably cleaner way of achieving the constructor+apply thing he does later -- no global modification of the Function prototype.

A lot of the time, though, I'll just consider this my default "class" definition:

    function Person (args) { this.init(args); }

If you want to be warned (or want others to be warned) when Person is called w/o new, this will do it (unless someone has defined init on the global namespace, so avoid that).

This also makes it easier to hand around the method that does the actual construction, which is helpful for cases like constructor + apply:

    var p = new Person;
    p.init.apply(p,args);

(again, without global modification of the Function prototype) or for cases where you want to refer to "superclass" methods down an inheritance hierarchy.

Javascript Constructors and Prototypes

Related Stories