ansaurus

Question

Answer 1

+3 A:

See http://stackoverflow.com/questions/1595611/how-to-properly-create-a-custom-object-in-javascript#1598077 for a summary. (Might as well link it, since I wasted so much time typing it out!)

this:

Dog.prototype = new Animal();

would generally be avoided. You see it in example/tutorial code, but it's a horrible mess because it's basing a class on an instance, and an instance constructed in a faulty way: name is undefined. Any more complicated constructor is going to get upset at that sort of thing.

Object.prototype.inherit=

Is a better approach for constructing, but prototyping anything into Object is considered very poor taste. It runs the risk of messing up use of objects as trivial maps and breaking other code. You can put this helper function elsewhere, eg. Function.prototype.subclass.

prototype.constructor

Personally I would tend to avoid, because constructor has a special meaning in JavaScript (as implemented in Firefox and some other browsers; not IE's JScript), and that meaning is not what constructor does here nor what you would expect any such property to do; it's confusing and almost always best avoided. So if including a link to the constructor function in the instance in a class system I would prefer to name it something else.

bobince 2009-10-29 16:55:30

Thanks for your feedback. I agree about Object.prototype.inherit and I think I mention this in my essay but I'll at least add it to the comments on the code and/or put it in a wrapper function. Thanks for catching that! Dog.prototype = new Animal() I give alternatives in later patterns. Thanks for your input Bob.

Rob 2009-10-29 17:36:47

I went ahead and updated the code (and edited the above code listing) to use a helper object as opposed to clobbering Object.

Rob 2009-10-29 17:54:57

Yup, I went back and read my essay and I say: 'There's of course nothing requiring you to monkey patch Object – you could create a wrapper that returns such functionality if you wish.' Just plain lazy!!! Thanks for making me "do it right"!

Rob 2009-10-29 18:01:52

Answer 2

A:

I've got at least half a dozen implementations of various inheritance patterns lying around in my dev/web/stuff folder, but they are mostly toys.

What I actually sometimes use is the following thin wrapper over JavaScript's default pseudo-class-based approach to make inheritance easier:

Function.prototype.derive = (function() {
    function Dummy() {}
    return function() {
        Dummy.prototype = this.prototype;
        return new Dummy;
    };
})();

Example code:

function Pet(owner, type, name) {
    this.owner = owner;
    this.type = type;
    this.name = name;
}

Pet.prototype.toString = function() {
    return this.owner + '\'s ' + this.type + ' ' + this.name;
};

function Cat(owner, name) {
    Pet.call(this, owner, 'cat', name);
}

Cat.prototype = Pet.derive();

var souris = new Cat('Christoph', 'Souris');

Another interesting one is the following, which automatically adds factory methods to a proper prototypal approach:

var Proto = new (function() {
    function Dummy() {}

    this.clone = function() {
        Dummy.prototype = this;
        return new Dummy;
    };

    this.init = function() {};

    this.create = function() {
        var obj = this.clone();
        this.init.apply(obj, arguments);
        return obj;
    };
});

Example code:

var Pet = Proto.clone();

Pet.init = function(owner, type, name) {
    this.owner = owner;
    this.type = type;
    this.name = name;
};

Pet.toString = function() {
    return this.owner + '\'s ' + this.type + ' ' + this.name;
};

Cat = Pet.clone();

Cat.init = function(owner, name) {
    Pet.init.call(this, owner, 'cat', name);
};

// use factory method
var filou = Cat.create('Christoph', 'Filou');

// use cloning (the proper prototypal approach)
var red = filou.clone();
red.name = 'Red';

You've already seen my implementation of classes.

Christoph 2009-10-29 18:37:54

Hi Christoph! Thanks. So your derive method is really the same as my inherit method except it returns a closure and calls 'itself'; the pattern also uses constructor stealing - I think it's essentially a combination inheritance pattern (prototypal and constructor stealing combined). I'm going to need to stare at the other pattern a bit longer - I think I'll play with it tonight and report back ;-) Thanks for sharing Christoph.

Rob 2009-10-29 21:31:47

Answer 3

A:

This is one of my attempt at OOPs JS - Class, inheritance, interfaces, abstract, final methods etc. http://code.google.com/p/oopsjs/

Rajendra 2010-09-06 17:55:32

This will get mangled in a comment but you can use the Crockford that = this before going in to the inner method (read your FAQ which said this is not accessible in inner functions). Just put var that = this in your outer function and then this will be accessible as that. Just try and do a console.log(that) and you'll see it does NOT point to window but your proper this.

Rob 2010-09-06 19:12:06

ansaurus

tags:

views:

answers:

Popular JavaScript Inheritance Patterns

related questions