Mécanisme d'héritage Javascript (réponses détaillées, tutoriel graphique)

L'héritage JavaScript est soigneusement divisé en de nombreux types et méthodes d'implémentation dans de nombreux livres. Il en existe généralement deux types : l'usurpation d'identité d'objet et la méthode de prototype. 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 la façon dont ses variables sont utilisées. Vous pouvez concevoir votre propre méthode pour "imiter" l'implémentation du 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 Et il a ce mot-clé, vous pouvez l'utiliser pour y ajouter des propriétés 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 classB. C'est une référence qui pointe vers classA et appelle également classA. La fonction de ces deux lignes de code équivaut à copier directement le contenu dans le bloc de code classA ici, créer ceci Bien sûr, l'objet classB a les attributs et les 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 y en a. Il n'y a aucun problème avec la conception, et classz ne doit pas non plus hériter de différentes classes avec les mêmes propriétés et méthodes.

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>

Le premier paramètre de la méthode call() est de passer un objet, ici 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. le contenu du bloc de code classA Copiez-le 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, et la fonction est définie sans paramètres. Les variables ou méthodes après prototype sont équivalentes aux propriétés et méthodes modifiées par static en Java, qui appartiennent à tous les objets. Il y a ici une particularité : cB.prototype=new cA(); Objet cA Copier dans cB, cB peut également ajouter ses propres attributs 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. Sentiment personnel, c'est une bonne méthode de conception. Les fonctions définies par le prototype peuvent être réutilisées pour plusieurs objets ici : il y a cA.call(this,name) dans le corps de la classe cB ; le prototype cB doit être affecté à l'objet cB. , c'est-à-dire : cB.prototype=new cA();cA.call(this,name) équivaut également à copier le code dans le bloc de classe cA ici, et cette dernière phrase ajoute la méthode cA à cB, et cB peut également ajouter vos propres propriétés et méthodes.

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles associés :

Exemple détaillé d'interaction entre Servlet3.0 et JS via Ajax

Encapsulation JS native du fondu Fonctions d'effet d'entrée et de fondu Explication détaillée des étapes

p5.jsRésumé des fonctions d'interaction du clavier

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!