The Illusion of Class | Hacker News Reader

The Illusion of Class

blog.javascriptroom.com

37 pointsmaniator33 comments

I generally write my constructor functions so I can easily forget 'new':

  function Point(x, y){
    if (!(this instanceof Point)) {
      return new Point(x, y);
    }
    this.x = x;
    this.y = y;
  }

then you can just call:

  var point = Point(x, y);

HT to issacs (node, npm) who I picked that up from.

Good workaround! I like it.

Don't use

  Point3d.prototype = new Point();

if the constructor has side effects. Instead,

  function fn(){}; fn.prototype = Point.prototype; Point3d.prototype = new fn;

does what you want.

That is an excellent point. I mean, ideally the constructor doesn't have side effects, but this is a good defense against those that do.

Even side-effect free constructors can make this pattern painful. Consider the case where we're trying to maintain the invariant that all Points always have valid numbers for all their coordinates:

    var Point = function(x, y)
    {
        if (typeof(x)!='number' || typeof(y)!='number'){
            throw new Error("...");
        }
        this.x = x;
        this.y = y;
    }

Now you're forced to pick an arbitrary point when setting up the prototype, which is kinda gross.

My point is that people write constructors with the expectation that they'll only be used for constructing meaningful objects.

Indeed.

I think I'll be updating the article to include your modifications. Thanks (and how should I attribute? ef4 on HN?)

Sure, but I wasn't the original poster above, give them the credit for the code.

Alternatively, if you're only supporting modern-ish browsers,

    Point3d.prototype = Object.create(Point.prototype);

which does the same thing but does not require multiple statements (and allows adding property definitions as the second argument)

and some sell javascript as simple and well designed...

Simple, sure. Well-designed? Nah.

And keep in mind that this is a "classical" system tacked on top of a prototypal system. Not exactly elegant.

I don't think I've ever heard even the staunchest JavaScript writers refer to it as "well-designed".

vs? every language has worts

Or if you're using Node, it's just:

    util.inherits(Point3d, Point);

The JavaScript prototype pattern is the most poorly designed aspect of the JavaScript language. Cross-browser prototype compatibility is a total headache too.

My solution: abstract away the headache. Use Underscore's extends function or take a look at how Prototype.js handles inheritance: http://prototypejs.org/learn/class-inheritance .

Both solutions are much more simple and do the same thing.

Also, if you are going into a JavaScript interview, know the stupid prototype pattern, someone always asks about it.

I disagree. I think the prototype pattern is quite well designed. It's just not well-supported across browsers.

The Pseudo-Classical/Constructor pattern is the one that's broken.

Whenever I find myself needing to roll my own class-based system in JavaScript I use this function:

    function subclass(constructor, superConstructor)
    {
        function surrogateConstructor()
        {
        }

        surrogateConstructor.prototype = superConstructor.prototype;

        var prototypeObject = new surrogateConstructor();
        prototypeObject.constructor = constructor;

        constructor.prototype = prototypeObject;
    }

Then you can say things like:

    subclass(DerivedConstructor, BaseConstructor);

There's a full write-up of this approach at http://www.golimojo.com/etc/js-subclass.html.

This technique of the surrogate constructor is exactly what CoffeeScript uses under the table when using the extends operator. E.g. http://coffeescript.org/#try:class%20Derived%20extends%20Bas.... It also copies all the properties on the super constructor to the derived constructor, so you can have the "class level methods" in the derived classes too.

One of the main benefits i found of using CoffeeScript's sugar for classical inheritance is that i no longer need to stop and think "ok, so am i doing things right here?" every time i inherit from a class or call a "super" method, which was the case when writing JS. It Just Works (TM).

Question: in the object tree for Point3d, it looks like there are two __proto__ attributes at the same level of nesting. Should the second belong to Point and be indented? (I'm not that experienced with javascript so I could simply be confused.)

Yes it should! Good catch. (This has been updated)

Wow, that was super confusing. I had better reread. Otherwise, great article and examples. I had a pretty good notion of prototype, et. al., but felt like this article really escalated my intrinsic understanding.

Can't help but picture GOB Bluth: "Illuuuusions, Michael!"

Great article though! This is a constant source of confusion for anyone not intimately familiar with JavaScript.

For a Class based approach -- CoffeeScript

What is a "classically trained programmer"?

A programmer trained in classical (as opposed to prototypal) languages. Languages like C++, Java, and PHP are classical. JavaScript and Self are prototypal.

I thought that might be how he meant it , just seems an odd way to say it since it seems more like saying "classically trained musician".

ryankinal is the author of the post.

Reply on news.ycombinator.com