Apprentissage du modèle de conception JavaScript "Héritage de classe"_compétences javascript

Avant de faire quelque chose, vous devez d'abord comprendre les avantages de le faire. Je crois que personne n'est prêt à faire quelque chose sans raison. D'une manière générale, lorsque nous concevons une classe, nous espérons en fait réduire le code répétitif. L'utilisation de l'héritage peut parfaitement le faire. Avec le mécanisme d'héritage, vous pouvez concevoir à nouveau sur la base de la classe existante et les modifications complètes de la conception sont facilitées en en tirant parti. des méthodes dont ils disposent déjà. Sans plus attendre, voici quelques exemples :

Copier le code Le code est le suivant :

fonction Personne(nom){
This.name = nom;
>
Personne.prototype.getname = function(){
Renvoie this.name;
>

function Bloger(nom,blog){
Personne.appel(ce,nom);
This.blog = blog;
>
var blogger = new Bloger("zhenn","http://www.jb51.net");
alert(bloger.name=="zhenn"); /*return true*/
alerte(bloger.blog) /*Alerte http://www.jb51.net*/
alert(bloger.getname()=="zhenn"); /*Invite "bloger.getname n'est pas une fonction"*/

Comme vous pouvez le voir dans l'exemple ci-dessus, Blogger appelle dynamiquement les propriétés et méthodes natives de sa classe parent Person via un appel interne (pour une explication de l'appel, veuillez vous référer à http://www.jb51.net/article/ 62086.htm ), ce qui peut être compris comme Bloger hérite de Person et en devient une sous-classe, mais les étudiants attentifs découvriront que les méthodes de l'objet prototype Person ne peuvent pas être héritées simplement en s'appuyant sur call, ce qui signifie "bloger. getname n'est pas une fonction" en est la raison. Mais ne vous inquiétez pas, vous pouvez résoudre ce problème avec un petit traitement du code ci-dessus !

Copier le code Le code est le suivant :

fonction Personne(nom){
This.name = nom;
>
Personne.prototype.getname = function(){
Renvoie this.name;
>

function Bloger(nom,blog){
Personne.appel(ce,nom);
This.blog = blog;
>
/*Veuillez faire attention aux deux lignes de code suivantes*/
Bloger.prototype = new Person();
Bloger.prototype.constructor = Bloger;

var blogger = new Bloger("zhenn","http://www.jb51.net");
alert(bloger.name=="zhenn"); /*return true*/
alerte(bloger.blog) /*Alerte http://www.jb51.net*/
alert(bloger.getname()=="zhenn"); /*Prompt true*/

Ici, nous devons expliquer ces deux lignes de code. Nous savons que chaque constructeur a un attribut prototype, qui pointe vers l'objet prototype du constructeur. En fait, l'objet prototype est aussi un objet instance, mais dans le prototype. object Les propriétés et méthodes définies peuvent être partagées par tous les objets d'instance.On peut en conclure que le but de l'ajout de deux lignes de code est de définir l'objet prototype de la sous-classe pour qu'il pointe vers un objet instancié de la classe parent, et l'objet instancié de la classe parent. objet de la classe parent Toutes les méthodes d'attribut du prototype de la classe parent seront héritées, atteignant ainsi notre objectif. Le prototype de la sous-classe hérite de toutes les propriétés et méthodes de l'objet instance de la classe parent.

Mais vous devez également faire attention à la ligne de code Bloger.prototype.constructor = Bloger; car lorsque vous définissez le prototype de la sous-classe sur une instance de la classe parent, son attribut constructeur pointera vers la classe parent, donc vous devez à nouveau définir le constructeur du prototype de sous-classe. À ce stade, l'héritage de classe JavaScript a été parfaitement implémenté !

Afin de simplifier la déclaration des sous-classes, l'ensemble du processus d'extension d'une sous-classe peut être écrit dans une fonction appelée extend. La fonction consiste à créer une nouvelle classe basée sur une structure de classe donnée :

Copier le code Le code est le suivant :

fonction extend(childClass,parentClass){
var F = nouvelle fonction();
F.prototype = parentClass.prototype;
childClass.prototype = new F();
childClass.prototype.constructor = childClass;
>

Avec cette fonction d'extension, vous pouvez facilement étendre les sous-classes.Appelez simplement cette fonction.Les deux lignes de code ajoutées ci-dessus peuvent être modifiées en extend(Bloger,Person), et un héritage complet peut également être obtenu !