Javascript-Vererbungsmechanismus (ausführliche Antworten, grafisches Tutorial)

JavaScript-Vererbung wird in vielen Büchern sorgfältig in viele Typen und Implementierungsmethoden unterteilt. Im Allgemeinen gibt es zwei Typen: Objektidentitätswechsel und Prototypenmethode. 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. Seine Implementierung ist ebenso wie die Art und Weise, wie seine Variablen verwendet werden, sehr locker. Sie können Ihre eigene Methode entwerfen, um die Implementierung des 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 und verwenden Es verfügt über das Schlüsselwort this, und Sie können damit Eigenschaften und Methoden hinzufügen. Der obige Code enthält die folgenden zwei Sätze:

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

Die Variable newMethod1 ist in Klasse B definiert. Sie ist eine Referenz, zeigt auf Klasse A und ruft auch Klasse A auf. Die Funktion dieser beiden Codezeilen entspricht dem direkten Kopieren des Inhalts im Codeblock Klasse A hier Die auf diese Weise erstellte KlasseB Das Objekt verfügt natürlich über die Eigenschaften und Methoden von KlasseA. Durch Objektidentitätswechsel kann auch eine Mehrfachvererbung erreicht werden, wie folgt:

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

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

ClassY überschreibt jedoch die gleichnamigen Eigenschaften und Methoden in classX OK, classz wird es auch tun. Verschiedene Klassen mit denselben Eigenschaften und Methoden sollten nicht vererbt werden.

2. Verwenden Sie die call()-Methode

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

Der erste Parameter in der call()-Methode übergibt ein Objekt, auf das sich dies bezieht ist das aktuelle Objekt, und 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. classA.call() entspricht auch dem direkten Kopieren des Inhalts Im Codeblock der Klasse A können Objekte der Klasse B auch direkt Variablen und Methoden in der 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, und die Funktion wird ohne Parameter definiert, gefolgt von Prototyp Die Variablen oder Methoden entsprechen den durch Static in Java geänderten Eigenschaften und Methoden, die zu allen Objekten gehören. Hier gibt es eine Besonderheit: cB.prototype=new cA(); Dieser Satz entspricht dem Kopieren des Inhalts von cEin Objekt zu cB, cB kann auch seine 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 Methode mithilfe der Prototypenmethode definieren. Persönlich ist dies eine gute Entwurfsmethode, um durch den Prototyp definierte Funktionen zur Wiederverwendung mehrerer Objekte zu verwenden: Es gibt cA.call(this,name) gleichzeitig im cB-Klassenkörper Der cB-Prototyp muss dem cB-Objekt zugewiesen werden, d. h. :cB.prototype=new cA();cA.call(this,name) entspricht hier auch dem Kopieren des Codes im cA-Klassenblock von cA an cB, und cB kann sich auch Eigenschaften und Methoden anhängen.

Das Obige habe ich für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Detailliertes Beispiel für die Interaktion zwischen Servlet3.0 und JS über Ajax

Native JS-Kapselung von Fade -In- und Fade-Out-Effektfunktionen Detaillierte Erklärung der Schritte

p5.jsZusammenfassung der Tastaturinteraktionsfunktionen

Das obige ist der detaillierte Inhalt vonJavascript-Vererbungsmechanismus (ausführliche Antworten, grafisches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!