Prototypenanalyse in Javascript [empfohlen]_Javascript-Kenntnisse

Ich habe kürzlich viel gelernt, als ich JavaScript und den objektorientierten Prototyp in js lernte. Wenn etwas nicht stimmt, hoffe ich, dass Sie mich korrigieren können.

Als objektorientierte Sprache verfügt js natürlich über das Konzept der Vererbung, aber es gibt kein Klassenkonzept in js und keine Erweiterungen ähnlich wie in Java. Daher denke ich, dass die Vererbung in js hauptsächlich auf Prototypen (Kette) basiert ) in js.

Was ist also ein Prototyp? Wir wissen, dass eine Funktion in js auch ein Objekt ist. Wenn wir eine Funktion erstellen, verfügt die Funktion standardmäßig über ein Attribut namens Prototyp .Objekt, dieses Prototypobjekt verfügt über ein Standardattribut namens Konstruktor, das auf die Funktion mit dem Attribut protptype verweist.

function Person(){}
    Person.prototype={
　　　　　// constructor:Person;
      first_name:"guo",
      hair_color:"black",
      city:"zhengzhou",
      act:function(){alert("eatting");}
    };

Nehmen Sie dies als Beispiel. Diese Funktion hat einen Standardattributprototyp, der auf das Person.propttype-Objekt verweist, Person.prototype.constructor--. >Person. (Tatsächlich wird hier standardmäßig auf Objekt verwiesen, ich werde es später korrigieren)

Was passiert, wenn wir eine Instanz über den Konstruktor erstellen?

function Person(){} 
  Person.prototype={ 
    first_name:"guo", 
    hair_color:"black", 
    city:"zhengzhou", 
    act:function(){alert("eatting");} 
  }; 
  var boy=new Person(); 
  var girl=new Person(); 

Zu diesem Zeitpunkt müssen wir wissen, dass der Unterschied zwischen Konstruktoren und Funktionen in js das neue Schlüsselwort ist und eine Funktion, die den neuen Operator verwendet, ein Konstruktor ist. Wenn wir ein Instanzobjekt von Person erstellen und es in „boy“ und „girl“ speichern, generieren diese beiden Instanzobjekte ein Standardattribut namens _proto_ (das in ECMAScript5 durch [[prototype]] dargestellt werden kann. Dieses Attribut verweist auf den Konstruktor Der Prototyp). Objekt der Funktion, das boy._proto_--->Person.prototype ist (hat nichts mit dem Konstruktor zu tun). Zu diesem Zeitpunkt können Jungen und Mädchen die Attribute im Prototypobjekt durch Punkte aufrufen. Zu diesem Zeitpunkt müssen Sie wissen, dass Jungen und Mädchen die Attribute des Prototypobjekts gemeinsam haben. Wir können die obige Schlussfolgerung durch isProtptypeOf() oder object.getPrototypeOf() überprüfen (der Rückgabewert dieser Funktion ist das Prototypobjekt, das den Wert von _proto_ darstellt).

alert(Person.prototype.isPrototypeOf(boy)); //true 
alert(Object.getPrototypeOf(boy).first_name);  //"guo" 

An diesem Punkt können wir eine weitere Überprüfung durchführen. Was passiert, wenn in der Instanz eine Eigenschaft mit demselben Namen wie die Prototypobjekteigenschaft erstellt wird?

var boy=new Person(); 
var girl=new Person(); 
boy.hair_color="red";  
alert(boy.hair_color);  //red 
alert(girl.hair_color); //black 
alert(Object.getPrototypeOf(boy).hair_color);  //black 

Es ist ersichtlich, dass das in der Instanz deklarierte Attribut mit demselben Namen das Attribut im Prototypobjekt blockiert, es jedoch nur vorübergehend überschreibt und keinen Einfluss auf den Attributtyp des Prototypobjekts hat (Object.getPrototypeOf( boy).hair_color== black), es hat keine Auswirkungen auf andere Instanzobjekte, die den Eigenschaftstyp des Prototypobjekts teilen (girl.hair_color==black). Gleichzeitig können Sie mit dem Löschoperator die vom Instanzobjekt deklarierten Attribute löschen, um den Blockierungseffekt aufzuheben. Wir können hasOwnProperty() verwenden, um zu überprüfen, ob eine Eigenschaft in der Instanz (true) oder im Prototypobjekt (false) vorhanden ist.

alert(boy.hasOwnProperty("hair_color")); //true

Eigenschaften können mit Object.keys() aufgezählt werden.

var key=Object.keys(Person.prototype); 
alert(key); 

Nachdem wir dies gelernt haben, werden wir feststellen, dass die Verwendung der oben genannten Schreibmethode zum Deklarieren eines Prototypobjekts ein Problem verursacht. Der Konstruktor zeigt nicht mehr auf Person. Dies steht im Gegensatz zu dem, was wir gesagt haben, dass das Konstruktorattribut des Prototypobjekts zeigt zur Funktion, die standardmäßig das Prototypattribut enthält. Dies liegt daran, dass jedes Mal, wenn eine Funktion erstellt wird, automatisch ein Prototypobjekt erstellt wird und dieses Objekt standardmäßig einen Konstruktor erstellt. Daher besteht unser Kern hier darin, den Standardprototyp neu zu schreiben, sodass der neue Konstruktor auch auf die Objektfunktion verweist und nicht mehr auf die Personenfunktion. Wenn der Konstruktor wirklich wichtig ist, müssen Sie „constructor:Person.

Danach müssen wir die Dynamik des Prototyps kennen. Änderungen der Eigenschaften im Prototypobjekt werden in der Instanz widergespiegelt, unabhängig davon, ob die Instanz vor oder nach der Änderung des Eigenschaftstyps des Prototypobjekts erstellt wird

function Person(){} 
Person.prototype={ 
  first_name:"guo", 
  hair_color:"black", 
  city:"zhengzhou", 
  act:function(){alert("eatting");} 
}; 
 
var boy=new Person(); 
Person.prototype.hobby="basketball"; 
var girl=new Person(); 
alert(boy.hobby); //basketball 

Wie aus dem obigen Code ersichtlich ist, teilt die Jungeninstanz immer noch Person.prototype.hobby, auch wenn die Änderung der Prototypobjekteigenschaften nach der Erstellung der Instanz erfolgt.

Diese Situation tritt jedoch nur auf, wenn die Eigenschaften des Prototypobjekts vollständig neu geschrieben werden. Die Erstellung der Instanz muss nach dem Neuschreiben der Eigenschaften des Prototypobjekts erfolgen, andernfalls tritt ein Fehler auf.

function Person(){} 
    var girl=new Person(); 
    Person.prototype={ 
      first_name:"guo", 
      hair_color:"black", 
      city:"zhengzhou", 
      act:function(){alert("eatting");} 
    }; 
 
    var boy=new Person(); 
    Person.prototype.hobby="basketball"; 
     
    alert(boy.hobby);  //basketball 
    alert(girl.first_name);  //undefined 

Zurück zum Thema „Abschirmung“: Wir haben zuvor erfahren, dass das Erstellen eines Attributs eines Instanzobjekts (mit demselben Namen wie ein bestimmtes Attribut im Prototypobjekt) das Attribut des Prototypobjekts blockiert, aber keine Auswirkungen hat andere Instanzobjekte. Hier liegt ein Fehler vor. Diese Situation betrifft nur grundlegende Datentypen. Wenn der Wert eines Attributs auf einen Typ verweist, tritt ein großes Problem auf.

function Person(){}
    
    Person.prototype={
      first_name:"guo",
      hair_color:"black",
      friends:["Nick","John"],
      city:"zhengzhou",
      act:function(){alert("eatting");}
    };

    var boy=new Person();
    boy.friends.push("Mike");
    var girl=new Person();
    alert(boy.friends);  //Nick,John,Mike
    alert(girl.friends); //Nick,John,MIke

Es ist ersichtlich, dass der obige Satz nicht zutrifft. Der Grund dafür ist, dass Freunde im Prototypobjekt vorhanden sind, nicht Junge, sodass sich seine Änderung auf diese Umgebung auswirkt. (Wir können über boy.frindes=[] Attribute einer Jungeninstanz erstellen.) Anschließend müssen wir die kombinierte Verwendung des Konstruktormodus und des Prototypmodus einführen.

function Person(hair_color,city){ 
       
      this.hair_color=hair_color; 
      this.city=city; 
      this.friends=["John","Nick"]; 
    } 
    Person.prototype={ 
      constructor:Person, 
      first_name:"guo", 
      act:function() { 
         
        alert("eatting"); 
      } 
    }; 
    var boy=new Person("black","zhengzhou"); 
    var girl=new Person("red","shenyang"); 
    boy.friends.push("Nick"); 
    alert(girl.friends); 
    alert(boy.friends); 

Dieser Modus ist derzeit die am weitesten verbreitete und anerkannteste Methode zum Erstellen benutzerdefinierter Typen in ECMAScript und kann sogar als Standardmodus verwendet werden.

Aber für Programmierer, die in anderen objektorientierten Sprachen arbeiten, erscheint dieses Muster sehr seltsam. Um alle Informationen in den Konstruktor zu kapseln, erschien das dynamische Prototypmuster. Der dynamische Modus verwendet hauptsächlich eine if-Anweisung, um zu bestimmen, ob das Prototypobjekt initialisiert werden muss, um Ressourcen zu sparen.

Darüber hinaus gibt es einen sicheren Konstruktionsmodus zur Anpassung an Situationen, in denen keine gemeinsamen Attribute vorhanden sind und dieser nicht verwendet wird.

Die obige Prototypenanalyse in JavaScript [empfohlen] ist der gesamte vom Herausgeber geteilte Inhalt. Ich hoffe, dass er Ihnen eine Referenz geben kann, und ich hoffe, dass Sie Script Home unterstützen.