Detaillierte Erläuterung von Codebeispielen des Vererbungsmechanismus in Javascript

JavaScripts Vererbung wird in vielen Büchern sorgfältig in viele Typen und Implementierungsmethoden unterteilt: Im Allgemeinen gibt es zwei Typen: Objekt Identitätswechsel und Prototyp Methoden. Diese beiden Methoden haben ihre eigenen Vor- und Nachteile. Ich werde sie hier zuerst auflisten und dann die Unterschiede zur unteren Ebene analysieren.

Nachdem ich die Erstellung von Javascript-Klassen und -Objekten gelernt habe, werde ich nun die Implementierung zusammenfassen Javascript-Vererbungsmechanismus. Javascript hat keine strenge und klare Definition des Vererbungsmechanismus wie Java, ebenso wie die Verwendung seiner Variablen. Sie können Ihre eigene Methode entwerfen, um den Vererbungsmechanismus zu „imitieren“. . Es gibt mehrere Methoden:

1. Objektidentitätswechsel

 <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>

Der durch die Funktion definierte Codeblock entspricht einer Klasse, Sie können ihn verwenden und er hat das Schlüsselwort this, das Sie verwenden können Fügen Sie Attribute und Methoden hinzu. Im obigen Code gibt es die folgenden zwei Sätze:

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

Die Variable newMethod1 ist in Klasse B definiert, die eine Referenz ist und auf Klasse A verweist , und ruft auch classA auf. Die Wirkung dieser beiden Codezeilen entspricht dem direkten Kopieren des Inhalts im classA-Codeblock hier. Das auf diese Weise erstellte classB-Objekt verfügt natürlich über die Attribute und Methoden von classA. Der Objektidentitätswechsel kann auch eine Mehrfachvererbung wie folgt implementieren:

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

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

KlasseY überschreibt jedoch die gleichnamigen Eigenschaften und Methoden in KlasseX. Wenn es kein Problem mit dem Design gibt, sollte classz nicht anders erben Eigenschaften und Methoden mit der gleichen Art.

2. Verwenden Sie die Methode 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(), um ein Objekt als ersten Parameter zu übergeben, wobei sich dies auf das aktuelle Objekt bezieht Die folgenden Parameter (es können mehrere sein) beziehen sich auf die Parameter, die an die Klasse ( Funktion ) übergeben werden müssen, die die call()-Methode aufruft Parameter im Codeblock der Klasse A Der Inhalt wird hier direkt kopiert, und die Objekte von Klasse B können auch direkt die Variablen und Methoden in Klasse B verwenden.

3. Prototypenkette

 <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>

Das Schlüsselwort „prototyp“ wird hier zum Definieren der Klasse verwendet. Bei der Definition der Funktion sind die Variablen oder Methoden äquivalent in Java. 🎜>statischDie geänderten Attribute und Methoden gehören zu allen Objekten. Hier gibt es eine Besonderheit: cB.prototype=new cA(); Dieser Satz entspricht dem Kopieren des Inhalts des cA-Objekts nach cB. und cB gibt zurück. Sie können Ihre eigenen Eigenschaften und Methoden hinzufügen.

4. Gemischte Methode

 <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>

Hier können Sie die Attribute im Klassenkörper kapseln und die Methoden mithilfe von Prototypen definieren. Mithilfe von Prototypdefinitionen kann die Funktion für mehrere Objekte wiederverwendet werden: Es gibt cA.call(this,name) im cB-Klassenkörper cB-Objekt, das heißt: cB.prototype=new cA(); cA.call(this,name) entspricht hier auch dem Kopieren des Codes im cA-Klassenblock Gleichzeitig kann cB auch eigene Attribute und Methoden hinzufügen.

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung von Codebeispielen des Vererbungsmechanismus in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!