héritage des classes jquery

Question

var A=function(){
};

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

};

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

Est-ce que la méthode ci-dessus est la meilleure façon de créer une classe et un héritage dans jQuery ? Dans l'init de B, comment puis-je invoquer l'init du parent (similaire à super.init() dans les langages OO) ?

Answer 1

Je cherchais quelque chose de similaire. Aucune des réponses données ne me plaisait vraiment, alors j'ai fini par essayer moi-même...

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

Exemples de classes

• $.Animal() crée un animal générique, avec 4 pattes par défaut, auquel on peut peut recevoir un nom dans ses options, et peut se décrire lui-même. $.Dog() est une sous-classe d'Animal qui fait "woof", et qui peut connaître quelques trucs. $.Cat() est une sous-classe d'Animal qui fait "miaou". $.Bird() est une sous-classe d'animal qui a deux pattes et qui fait "tweet".

Mise en œuvre de la classe

• Chaque sous-classe d'animal crée une instance de $.Animal appelée parent, qui pourra être utilisée ultérieurement pour appeler les méthodes du parent. Lorsque vous appelez une méthode parent, le contexte peut être important. Lorsqu'il l'est, la méthode doit être appelée via $.proxy() en passant par cette instance comme contexte.

Exemple de sortie

Mon nom est inconnu. Je suis un animal à 4 pattes.

Mon nom est Rover. Je suis un animal à 4 pattes. Je dis "woof". Je sais m'asseoir, rester et me retourner.

Je m'appelle Mittens. Je suis un animal à 4 pattes. Je dis "miaou".

Mon nom est inconnu. Je suis un animal à deux pattes. Je dis "tweet".

Exemple de 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() + '<br>' +
        rover.describe() + '<br>' +
        mittens.describe() + '<br>' +
        bird.describe()
);