Explication détaillée des exemples de code du mécanisme d'héritage en Javascript

L'

héritage de JavaScript est soigneusement divisé en de nombreux types et méthodes de mise en œuvre dans de nombreux livres. De manière générale, il existe deux types : Objet Usurpation d'identité et prototype. méthodes. Ces deux méthodes ont leurs propres avantages et inconvénients. Je vais d'abord les énumérer ici, puis analyser les différences par rapport au niveau inférieur

Après avoir appris la création de classes et d'objets Javascript, je vais maintenant résumer la mise en œuvre du Mécanisme d'héritage Javascript. Javascript n'a pas de définition stricte et claire du mécanisme d'héritage comme Java. Son implémentation est très lâche, tout comme l'utilisation de ses variables. Vous pouvez concevoir votre propre méthode pour "imiter" le mécanisme d'héritage. . Il existe plusieurs méthodes :

1. Usurpation d'identité d'objet

 <script type="text/javascript">
   function classA(str){
     this.str=str;
     this.printstr=function(){
       document.write(this.str);
       document.write("<br>");
     }
     this.getstr=function(){
       return this.str;
     }    
   }
   function classB(name,str){
     //下面这两句代码相当于将classA代码体中的内容搬到这里
     this.newMethod1=classA;
     this.newMethod1(str);
     //注意，这里的写法
     delete this.newMethod1;
     //新的方法和属性的定义须在删除了newMethod之后定义，因为可能覆盖超类的属性和方法。
     this.name=name;
     this.sayName=function(){
       document.write(this.name);
       document.write("<br>");
     }
     
   }
   var a=new classB("Amy","helloworld");
   a.printstr();
   alert(a.getstr());
   a.sayName();
 </script>

Le bloc de code défini par fonction est équivalent à une classe, vous pouvez l'utiliser et il a le mot-clé this, vous pouvez utiliser this Ajoutez-y des attributs et des méthodes. Il y a les deux phrases suivantes dans le code ci-dessus :

this.newMethod1=classA;
 this.newMethod1(str);

La variable newMethod1 est définie dans la classeB, qui est une référence, pointant vers la classeA. , et appelle également classA, l'effet de ces deux lignes de code équivaut à copier directement le contenu dans le bloc de code classA ici. L'objet classB créé de cette manière aura bien sûr les attributs et méthodes de classA. L'usurpation d'identité d'objet peut également implémenter l'héritage multiple, comme suit :

function ClassZ() {
 this.newMethod = ClassX;
 this.newMethod();
 delete this.newMethod;

this.newMethod = ClassY;
 this.newMethod();
 delete this.newMethod;
}

Cependant, classY remplacera les propriétés et méthodes du même nom dans classX. S'il n'y a pas de problème avec la conception, classz ne devrait pas hériter de différentes. propriétés et méthodes avec le même type de propriétés.

2. Utilisez la méthode call()

 <script type="text/javascript">
   function classA(str){
     this.str=str;
     this.printstr=function(){
       document.write(this.str);
       document.write("<br>");
     }
     this.getstr=function(){
       return this.str;
     }    
   }
   function classB(name,str){
   //利用call方法实现继承
     classA.call(this,str);
     this.name=name;
     this.sayName=function(){
       document.write(this.name);
       document.write("<br>");
     }
     
   }
   var a=new classB("Amy","helloworld");
   a.printstr();
   alert(a.getstr());
   a.sayName();
 </script>

call() pour passer un objet comme premier paramètre, où this fait référence à l'objet actuel. , les paramètres suivants (il peut y en avoir plusieurs) font référence aux paramètres qui doivent être transmis à la classe ( fonction ) qui appelle la méthode call() classA.call() équivaut également à passer directement la méthode call(). paramètres dans le bloc de code classA Le contenu est copié directement ici, et les objets de classB peuvent également utiliser directement les variables et méthodes de classB.

3. Chaîne de prototypes

 <script type="text/javascript">
   function cA(){};
   cA.prototype.name="John";
   cA.prototype.sayName=function(){
     document.write(this.name);
     document.write("<br>");
   }
   function cB(){};
   cB.prototype=new cA();
   cB.prototype.age=23;
   cB.prototype.sayAge=function(){
     document.write(this.age);
     document.write("<br>");
   }
   var objB=new cB();
   objB.sayAge();
   objB.sayName();
   document.write("is objB the instance of cA "+(objB instanceof cA));
   document.write("<br>");
   document.write("is objB the instance of cB "+(objB instanceof cB));
   document.write("<br>");
 </script>

Le mot-clé prototype est utilisé pour définir la classe ici. Il n'y a pas de paramètres lors de la définition de la fonction. Les variables ou méthodes après prototype sont équivalentes à celles. en java. 🎜>staticLes attributs et méthodes modifiés appartiennent à tous les objets. Il y a une particularité ici : cB.prototype=new cA(); et cB renvoie Vous pouvez ajouter vos propres propriétés et méthodes.

4. Méthode mixte

 <script type="text/javascript">
   function cA(name){
     this.name=name;
   };
   cA.prototype.sayName=function(){
     document.write(this.name);
     document.write("<br>");
   }
   function cB(name,age){
     cA.call(this,name);
     this.age=age;
   };
   cB.prototype=new cA();
   cB.prototype.sayAge=function(){
     document.write(this.age);
     document.write("<br>");
   }
   var objB=new cB("Alan",27);
   objB.sayName();
   objB.sayAge();
   document.write("is objB the instance of cA "+(objB instanceof cA));
   document.write("<br>");
   document.write("is objB the instance of cB "+(objB instanceof cB));
   document.write("<br>");
 </script>

Ici, vous pouvez encapsuler les attributs dans le corps de la classe, et les méthodes sont définies à l'aide de prototypes. Personnellement, je pense que c'est une bonne méthode de conception, en utilisant les définitions de prototype. La fonction peut être réutilisée pour plusieurs objets. Deux points doivent être notés ici : il y a cA.call(this,name) dans le corps de la classe cB en même temps, le prototype cB doit être attribué au cB, c'est-à-dire : cB.prototype=new cA(); cA.call(this,name) équivaut également à copier le code dans le bloc de classe cA ici. La phrase suivante ajoute les méthodes de cA à cB. en même temps, cB peut également ajouter ses propres attributs et méthodes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!