jquery class inheritance

Question

var A=function(){
};

$.extend(A.prototype, {
    init:function(){
        alert(\'A init\');
    }
});
var B=function(){

};

$.extend(B.prototype,A.prototype,{
            


        

Answer 1

I was looking for something similar. None of the answers given really appealed to me, so I finally had a crack at it myself...

http://jsfiddle.net/tn9upue0/1/

Example Classes

• $.Animal() creates a generic animal, with a default of 4 legs, that can be passed a name in it's options, and can describe itself. $.Dog() is a subclass of Animal that goes "woof", and may know some tricks. $.Cat() is a subclass of Animal that goes "meow". $.Bird() is a subclass of Animal that has 2 legs and goes "tweet".

Class implementation

• Each animal subclass creates an instance of $.Animal called parent, which can be used later to call methods of the parent. When calling a parent method, context can be important. When it is, the method should be called via $.proxy() passing this as the context.

Example output

My name is unknown. I am an animal with 4 legs.

My name is Rover. I am an animal with 4 legs. I say "woof". I can sit, stay, and roll over.

My name is Mittens. I am an animal with 4 legs. I say "meow".

My name is unknown. I am an animal with 2 legs. I say "tweet".

Sample code

$.Animal = function (options) {
    return {
        options: options || {},

        _getName: function () {
            return this.options.name || 'unknown';
        },

        _getLegs: function () {
            return 4;
        },

        describe: function () {
            return 'My name is ' + this._getName() + '. I am an animal with ' + this._getLegs() + ' legs.';
        }
    }
};

$.Dog = function (options) {
    var parent = $.Animal(options);
    return $.extend({}, parent, {
        describe: function () {
            var s = $.proxy(parent.describe, this)() + ' I say  "woof".';
            if (this.options.tricks) {
                s += ' I can ' + this.options.tricks + '.';
            }
            return s;
        }
    });
};

$.Cat = function (options) {
    var parent = $.Animal(options);
    return $.extend({}, parent, {
        describe: function () {
            return $.proxy(parent.describe, this)() + ' I say  "meow".';
        }
    });
};

$.Bird = function (options) {
    var parent = $.Animal(options);
    return $.extend({}, parent, {
        _getLegs: function () {
            return 2;
        },

        describe: function () {
            return $.proxy(parent.describe, this)() + ' I say "tweet".';
        }
    });
};

var animal = $.Animal(),
    rover = $.Dog({name: 'Rover', tricks: 'sit, stay, and roll over'}),
    mittens = $.Cat({name: 'Mittens'}),
    bird = $.Bird();
$('#out').html(
    animal.describe() + '
' +
        rover.describe() + '
' +
        mittens.describe() + '
' +
        bird.describe()
);