Heim > Web-Frontend > js-Tutorial > Hauptteil

Einige Probleme mit der prototypischen Vererbung

一个新手
Freigeben: 2017-09-06 11:48:59
Original
1072 Leute haben es durchsucht

Wenn wir die Prototyp-Kettenvererbung verwenden, müssen wir bei der Definition von Methoden und Eigenschaften für den Prototyp vorsichtig sein, da dies zu unerwarteten Ergebnissen führen kann.

1. Definieren Sie die Methoden am Prototyp sorgfältig.
Wenn wir eine Methode für den Prototyp eines Konstruktors definieren möchten, müssen wir sie nach der Änderung des Prototyps definieren, andernfalls ist diese Methode für das neue Prototypobjekt nicht definiert, was zu den von uns erwarteten Ergebnissen führt. Beispiel:


1 function superObj(){}
2 superObj.prototype.sayHi=function sayHi(){
3     console.log('hi');
4 };
5 superObj.prototype={
6 name:'Poly'
7 };
8 var obj=new superObj();
9 obj.sayHi();//报错!! superObj.sayHi is not a function
Nach dem Login kopieren

Die korrekte Bedienung ist wie folgt


1 function superObj(){}
2 superObj.prototype={
3     name:'Poly'
4 };
5 superObj.prototype.sayHi=function sayHi(){6     console.log('hi');7 };8 var obj=new superObj();9 obj.sayHi();// 'hi'
Nach dem Login kopieren

2. Verwenden Sie keine Objektliterale, um Eigenschaften/Methoden für Prototypen zu erstellen.
Durch die Verwendung von Objektliteralen wird ein neues Objekt erstellt und die Referenzadresse des neuen Objekts dem Prototyp des Konstruktors zugewiesen. Zum Beispiel:


1 function superObj(){}
2 superObj.prototype={
3     sayHi:function sayHi(){
4         console.log('hi');
5     }
6 }
Nach dem Login kopieren

Die korrekte Operation lautet wie folgt:


1 function superObj(){}
2 superObj.prototype.sayHi=function sayHi(){
3     console.log('hi');
4 }
Nach dem Login kopieren

3. Es besteht eine direkte Entsprechung zwischen Objektinstanzen und Prototypen.
Das bedeutet, dass bei einem Verweis auf __proto__ die Referenzadresse des Prototyps gespeichert wird. Auch wenn sich der Prototyp des Konstruktors ändert, hat dies keine Auswirkungen auf den __proto__ in der zuvor erstellten Instanz. Beispiel


 1 function superObj(){} 
 2 superObj.prototype.say=function() { 
 3     console.log('hello'); 
 4 } 
 5 var obj=new superObj();
 6 superObj.prototype={ 
 7     say:function() { 
 8         console.log('world'); 
 9     }
 10 };
 11 var obj2=new superObj();
 12 obj.say();//'hello'
 13 obj2.say();//'world'
Nach dem Login kopieren

4. Es ist am besten, keine Attribute mit Referenztypen auf dem Prototyp zu definieren.
Wenn im Prototyp eine Eigenschaft definiert ist, deren Wert ein Referenztyp ist, teilen alle Instanzen den Eigenschaftswert (Referenztypwert, der auf dasselbe Objekt zeigt) und wenn eine der Instanzen den Wert ändert oder Eigenschaft für den Referenztyp, werden die Änderungen in allen Instanzen vorgenommen. Daher werden Eigenschaften, deren Werte Referenztypen sind, am besten im Konstruktor definiert. Beispiel


1 function superObj(){}
2 superObj.prototype.ary=[1,2,3];
3 var obj1=new superObj();
4 var obj2=new superObj();
5 obj1.ary[0]=0;//obj1.ary和obj2.ary指向的是同一个数组,当obj1修改此数组时,obj2.ary也会发生改变
6 console.log(obj2.ary[0]);//0
Nach dem Login kopieren
<br/>
Nach dem Login kopieren

Wenn Sie nicht möchten, dass Instanzen dasselbe Referenzobjekt teilen, sollten Sie es im Konstruktor definieren. Beispiel

<br/>

1 function superObj(){
2     this.ary=[1,2,3];
3 }
4 var obj1=new superObj();
5 var obj2=new superObj();
6 obj1.ary[0]=0;//obj1.ary和obj2.ary指向的不是同一个数组,所以修改obj1.ary不会影响obj2.ary
7 console.log(obj2.ary[0]);//1
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonEinige Probleme mit der prototypischen Vererbung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage