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

Pour l'OO, il est préférable de regarder ailleurs que dans jQuery. jQuery est basé sur des collections renvoyées par des sélecteurs.

Si vous voulez des cours, vous avez le choix entre Base 2 , Joose y JS.Class .

Answer 2

John Resig a créé un snippet pour l'héritage simple ici. http://ejohn.org/blog/simple-javascript-inheritance/

il stocke la super classe dans une variable _super pour que vous puissiez l'appeler comme ça

this._super();

vous pouvez vous référer à son extrait de code pour avoir une meilleure idée de ce qu'il autre poste utile : http://alexsexton.com/?p=51

Answer 3

Comment invoquer les méthodes du parent :

var B=function(){
    A.call(this);
};

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

Answer 4

Si vous ne voulez pas dépendre d'autres bibliothèques, vous pouvez le faire :

function A() {}
A.prototype.foo = function() {};

function B() {
    A.call(this);
    //Or, if there are arguments that need to be passed to A(),
    //this might be preferable:
    //A.apply(this, arguments);
}

B.prototype = new A();

//Or, if the browser supports ECMAScript 5 and/or you have a shim for Object.create,
//it would be better to do this:
B.prototype = Object.create(A.prototype);

$.extend(B.prototype, {
   //set the constructor property back to B, otherwise it would be set to A
   constructor: B,
   bar: function() {}
});

Veillez à définir les propriétés éventuelles dans le constructeur plutôt que sur le prototype, par exemple :

function A() {
    this.baz = null;
}

Cela évite d'avoir des propriétés de prototype partagées involontairement.

Il existe des bibliothèques qui facilitent l'héritage prototypique :

• https://github.com/mbrowne/simpleoo.js (ma bibliothèque ; sa documentation développe certains des concepts que j'ai mentionnés ici)
• https://github.com/Gozala/selfish
• https://github.com/Raynos/pd

Notes :

• Chaque fois qu'un prototype est remplacé, y compris par une extension, il est préférable de de remettre sa propriété constructor sur le constructeur correct. C'est pourquoi nous avons défini B.prototype.constructor sur B. Si vous remplaciez A.prototype, vous devriez procéder comme suit :

...

A.prototype = {
    constructor: A,
    foo: function() {}
    //other methods...
}

• B.prototype = Object.create(A.prototype) est préféré à B.prototype = new A() parce qu'il vous permet de le détecter rapidement si vous avez oublié d'appeler A() à partir du constructeur de B() ; il permet également à A() d'avoir des paramètres obligatoires. Vous aurez besoin d'une shim pour les navigateurs plus anciens ; la shim la plus simple (bien qu'elle ne supporte pas la spécification Object.create complète) se trouve au bas de cette page : http://javascript.crockford.com/prototypal.html .

Answer 5

J'utilise le même modèle et j'aime sa concision.

En ce qui concerne l'absence du mot clé "super", ce n'est pas vraiment un problème. Grâce à l'opérateur Function.prototype.call(), vous pouvez appeler n'importe quelle fonction dans le contexte de n'importe quel objet. Ainsi, la séquence pour appeler A.prototype.init() depuis B.prototype.init() est la suivante :

A.prototype.init.call(this, some parameters ...);

N'oubliez pas non plus que vous pouvez appeler le constructeur A à partir du constructeur B comme ceci :

B = function(key, name) {
    A.call(this, key);
    this.name = name;
};

Un codeur JS expérimenté saura ce qui se passe.

Pour conclure : pas parfait mais assez proche.